跨域请求有多种实现方式,这里只谈谈通过iframe
很简单,就是在一个主页面嵌入一个iframe,而这个iframe的url可以指向不同的域的地址,问题是现在这两个域还不能传递信息,下来看看如何传递信息把
1、iframe可以设置父窗口的锚,这样就可以把返回的参数设置到父框架的锚
2、主框架可以通过location.hash方法可以获得窗口的锚
因为是在不同的域过于通过javascript出于安全考虑无法获得不同域的任何信息,但可以设置不同框架的url,所以我们要设置url的时候不能让页面跳转又要传递信息,在url后面加"#"好在把我们的信息放在后面,这样页面就不回跳转并且带了要交互的信息,为了安全起见我们可以把我要传的消息通过ecodeURIComponent加密和decodeURIComponent解密
下面为测试代码:
1、index.jsp文件
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script>
<!--
var time=null;
var oldText=null;
function getText(){
//document.frames[0].src="#"
var text=location.hash;
if(text.length>=1&&text.charAt(0)=='#'){
text=text.substring(1);
text=decodeURIComponent(text);
}
return text;
}
function circle(){
var text=getText();
if(text!=oldText){
oldText=text;
document.getElementById("text").value=text;
}
timer = window.setTimeout(circle, 100);
}
window.onload=function(){
timer = window.setTimeout(circle, 100);
}
-->
</script>
</head>
<body>
This is my JSP page. <br>
<input type="button" value="button" onclick="getText()"/><input type="text" value="" id="text"/>
<iframe id="iframe" src="http://192.168.1.28:8080/HelloWorld/test.html" width="300" height="200"/>
</body>
</html>
2、test.html
<html>
<title>
Call webservice with javascript and xmlhttp.
</title>
<body>
<script language="javascript">
<!--
//Test function with get method.
function RequestByGet(data){
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
//Webservice location.
var URL="http://192.168.1.28:8080/HelloWorld/services/HelloWorldService";
xmlhttp.Open("GET",URL, false);
xmlhttp.SetRequestHeader ("Content-Type","text/xml; charset=utf-8");
xmlhttp.SetRequestHeader ("SOAPAction","http://service.tough_tide.com");
xmlhttp.Send(data);
var result = xmlhttp.status;
//OK
if(result==200) {
document.write(xmlhttp.responseText);
}
xmlhttp = null;
}
//Test function with post method
/*
<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:q0="http://service.tough_tide.com" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<soapenv:Body>
<q0:example>
<q0:in0>helloworld</q0:in0>
</q0:example>
</soapenv:Body>
</soapenv:Envelope>*/
function RequestByPost(value)
{
var data;
data = '<?xml version="1.0" encoding="utf-8"?>';
data = data + '<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:q0="http://service.tough_tide.com" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">';
data = data + '<soapenv:Body>';
data = data + '<q0:example>';
data = data + '<q0:in0>'+document.getElementById("content").value+'</q0:in0>';
data = data + '</q0:example>';
data = data + '</soapenv:Body>';
data = data + '</soapenv:Envelope>';
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
var URL="http://192.168.1.28:8080/HelloWorld/services/HelloWorldService";
xmlhttp.Open("POST",URL, false);
xmlhttp.SetRequestHeader ("Content-Type","text/xml; charset=utf-8");
xmlhttp.SetRequestHeader ("SOAPAction","http://service.tough_tide.com");
xmlhttp.Send(data);
//document.write(xmlhttp.responseText);
//document.getElementById("text").value= xmlhttp.responseText;
var oRE = /<ns1:out>(.*)<\/ns1:out>/gi;
oRE.test(xmlhttp.responseText);
document.getElementById("text").value=RegExp["$1"];
changeURL(RegExp["$1"]);
}
function changeURL(str){
var f = parent;
//var url=parent.location.href;
f.location.href = "http://localhost:8080/HelloWorld/index.jsp" + "#"+encodeURIComponent(str);
}
-->
</Script>
<input type="text" id="content" />
<input type="button" value="CallWebserviceByPost" onClick="RequestByPost('Zach')">
<textarea rows="30" cols="50" id="text"></textarea>
</body>
</html>
3、webService的WDSL
<?xml version="1.0" encoding="UTF-8" ?>
- <wsdl:definitions targetNamespace="http://service.tough_tide.com" xmlns:tns="http://service.tough_tide.com" xmlns:wsdlsoap="http://schemas.xmlsoap.org/wsdl/soap/" xmlns:soap12="http://www.w3.org/2003/05/soap-envelope" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soapenc11="http://schemas.xmlsoap.org/soap/encoding/" xmlns:soapenc12="http://www.w3.org/2003/05/soap-encoding" xmlns:soap11="http://schemas.xmlsoap.org/soap/envelope/" xmlns:wsdl="http://schemas.xmlsoap.org/wsdl/">
- <wsdl:types>
- <xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema" attributeFormDefault="qualified" elementFormDefault="qualified" targetNamespace="http://service.tough_tide.com">
- <xsd:element name="example">
- <xsd:complexType>
- <xsd:sequence>
<xsd:element maxOccurs="1" minOccurs="1" name="in0" nillable="true" type="xsd:string" />
</xsd:sequence>
</xsd:complexType>
</xsd:element>
- <xsd:element name="exampleResponse">
- <xsd:complexType>
- <xsd:sequence>
<xsd:element maxOccurs="1" minOccurs="1" name="out" nillable="true" type="xsd:string" />
</xsd:sequence>
</xsd:complexType>
</xsd:element>
</xsd:schema>
</wsdl:types>
- <wsdl:message name="exampleRequest">
<wsdl:part name="parameters" element="tns:example" />
</wsdl:message>
- <wsdl:message name="exampleResponse">
<wsdl:part name="parameters" element="tns:exampleResponse" />
</wsdl:message>
- <wsdl:portType name="HelloWorldServicePortType">
- <wsdl:operation name="example">
<wsdl:input name="exampleRequest" message="tns:exampleRequest" />
<wsdl:output name="exampleResponse" message="tns:exampleResponse" />
</wsdl:operation>
</wsdl:portType>
- <wsdl:binding name="HelloWorldServiceHttpBinding" type="tns:HelloWorldServicePortType">
<wsdlsoap:binding style="document" transport="http://schemas.xmlsoap.org/soap/http" />
- <wsdl:operation name="example">
<wsdlsoap:operation soapAction="" />
- <wsdl:input name="exampleRequest">
<wsdlsoap:body use="literal" />
</wsdl:input>
- <wsdl:output name="exampleResponse">
<wsdlsoap:body use="literal" />
</wsdl:output>
</wsdl:operation>
</wsdl:binding>
- <wsdl:service name="HelloWorldService">
- <wsdl:port name="HelloWorldServiceHttpPort" binding="tns:HelloWorldServiceHttpBinding">
<wsdlsoap:address location="http://localhost:8080/HelloWorld/services/HelloWorldService" />
</wsdl:port>
</wsdl:service>
</wsdl:definitions>
4、请求的信封
- <soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:q0="http://service.tough_tide.com" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
- <soapenv:Body>
- <q0:example>
<q0:in0>asdfdsa</q0:in0>
</q0:example>
</soapenv:Body>
</soapenv:Envelope>
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/huangfeng1982712/archive/2008/03/27/2223097.aspx
分享到:
相关推荐
标题中的“ajax跨域调用webservice的实现代码”指的是使用AJAX技术在JavaScript中跨域请求Web服务(webservice)的方法。AJAX允许在不刷新整个页面的情况下与服务器进行异步通信,而Web服务则提供了接口供客户端应用...
5. **调用方法**:在客户端,使用jQuery或者其他JavaScript库(如axios或fetch)的Ajax方法来调用WebService.asmx中的方法。需要指定URL、请求类型、数据格式(JSON或XML)等参数,并在回调函数中处理返回的结果。 ...
【标题】"Ajax跨域请求调用WebService接口"是一个关键的技术点,主要涉及到Web开发中的异步数据交互和跨域安全策略。在Web应用程序中,Ajax(Asynchronous JavaScript and XML)技术允许我们在不刷新整个页面的情况...
1. 跨域问题:由于同源策略限制,AJAX不能跨域调用服务。解决方法包括CORS(跨源资源共享)、JSONP、代理服务器等。 2. 错误处理:添加错误处理逻辑,捕获并处理可能出现的网络异常、语法错误等。 3. 数据格式:根据...
本文将详细解释如何利用jQuery通过JSONP(JSON with Padding)的方式实现跨域调用WebService。 #### 1. JSONP 的基本原理 JSONP 是一种解决跨域请求的有效手段,它通过动态创建`<script>`标签来请求跨域的数据,并...
本文将深入探讨如何使用jQuery的Ajax方法来调用WebService,从而实现异步数据交换,提升用户体验。 首先,理解Ajax(Asynchronous JavaScript and XML)的核心概念是关键。Ajax允许网页在不刷新整个页面的情况下与...
摘要:Ajax 在 Web 2.0 时代起着非常重要的作用,然而有时因为同源策略 (SOP)(俗称:跨域问题(cross domain)) 它的作用会受到限制。在本文中,将学习如何克服合作限制。本文以asmx方式搭建webservice作为测试用...
标题:“js跨域调用WebService的简单实例”主要探讨了如何在JavaScript中进行跨域调用WebService的问题,并提供了一个具体的实现示例。这个知识点是在Web开发中常见的问题,当前端JavaScript需要与后端进行数据交互...
4. **Ajax跨域问题**:由于浏览器的安全策略,JavaScript默认不允许跨域请求。但在实现Ajax调用Web服务时,会遇到跨域问题。为解决此问题,可以采用CORS(Cross-Origin Resource Sharing,跨源资源共享)策略,通过...
JavaScript(JS)调用WebService是Web开发中常见的一种交互方式,允许前端JavaScript代码与后端服务进行通信,实现数据的动态获取和提交。本压缩包包含了一个简单的示例项目——"WebApplication1",用于演示如何使用...
本示例将深入探讨如何使用jQuery来调用WebService,通过源代码解析相关知识点。 首先,了解jQuery的核心功能对理解jQuery调用WebService至关重要。jQuery提供了`$.ajax()`函数,它是进行异步数据请求的基础。在这个...
在本实例中,我们将讨论如何使用JS实现跨域调用WebService。"JqCrossDomain"这个文件名可能指的是使用jQuery库来处理跨域请求,因为jQuery提供了一些方便的方法来简化这个过程。 首先,了解同源策略是理解跨域调用...
【总结】综上所述,跨域调用SOAP服务的关键在于利用Nginx的反向代理功能,以及在客户端正确构造并发送SOAP请求。这种方法简化了客户端代码,避免了服务器代理的复杂性,同时保证了Web服务的正常调用。然而,这种方式...
首先,我们注意到在示例中,JavaScript调用Web服务的函数`ajaxRequest()`负责发起请求。该函数的第3行定义了Web服务的URL,这里是`http://localhost:88/webservicedemo.asmx`。这表明Web服务运行在本地主机的88端口...
标题中的“Ajax请求WebService跨域问题的解决方案”指的是在Web开发中,当使用Ajax技术尝试从一个域名(源)向另一个域名(目标)的WebService发送请求时,由于浏览器的同源策略限制,会遇到跨域问题。同源策略是...
本文将深入探讨如何使用JavaScript调用Web Service,以及如何解决在这个过程中遇到的问题,以配合“js调用webservice示例+源码”的主题。 Web Service是一种基于网络的、平台无关的服务,它通过SOAP(Simple Object...
在.NET开发环境中,jQuery是一个广泛使用的JavaScript库,用于在客户端进行高效的DOM操作、事件处理以及Ajax交互。而Web服务(Webservice)则是提供跨平台、跨语言的数据交换能力。本教程将通过一个简单的示例来讲解...
1. **后台数据获取**:Ajax调用WebService接口,获取服务器端处理的数据,然后在客户端更新页面。 2. **实时交互**:用户操作触发Ajax请求,WebService实时响应,提供数据更新,无需刷新整个页面。 3. **跨域通信**...