跨域请求有多种实现方式，这里只谈谈通过iframe
很简单，就是在一个主页面嵌入一个iframe,而这个iframe的url可以指向不同的域的地址，问题是现在这两个域还不能传递信息，下来看看如何传递信息把
1、iframe可以设置父窗口的锚，这样就可以把返回的参数设置到父框架的锚
2、主框架可以通过location.hash方法可以获得窗口的锚
因为是在不同的域过于通过javascript出于安全考虑无法获得不同域的任何信息，但可以设置不同框架的url，所以我们要设置url的时候不能让页面跳转又要传递信息，在url后面加"#"好在把我们的信息放在后面，这样页面就不回跳转并且带了要交互的信息，为了安全起见我们可以把我要传的消息通过ecodeURIComponent加密和decodeURIComponent解密
下面为测试代码：
１、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.οnlοad=function(){
timer = window.setTimeout(circle, 100);
}
-->
</script>
</head>
<body>
This is my JSP page. <br>
<input type="button" value="button" οnclick="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>
２、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>
３、webService的WDSL
4、请求的信封
很简单，就是在一个主页面嵌入一个iframe,而这个iframe的url可以指向不同的域的地址，问题是现在这两个域还不能传递信息，下来看看如何传递信息把
1、iframe可以设置父窗口的锚，这样就可以把返回的参数设置到父框架的锚
2、主框架可以通过location.hash方法可以获得窗口的锚
因为是在不同的域过于通过javascript出于安全考虑无法获得不同域的任何信息，但可以设置不同框架的url，所以我们要设置url的时候不能让页面跳转又要传递信息，在url后面加"#"好在把我们的信息放在后面，这样页面就不回跳转并且带了要交互的信息，为了安全起见我们可以把我要传的消息通过ecodeURIComponent加密和decodeURIComponent解密
下面为测试代码：
１、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.οnlοad=function(){
timer = window.setTimeout(circle, 100);
}
-->
</script>
</head>
<body>
This is my JSP page. <br>
<input type="button" value="button" οnclick="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>
２、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>
３、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/
"
>
-
<
xsd:schema
xmlns:xsd
="
http://www.w3.org/2001/XMLSchema
"
attributeFormDefault
="
qualified
"
elementFormDefault
="
qualified
"
targetNamespace
="
http://service.tough_tide.com
"
>
</
xsd:schema
>
</
wsdl:types
>
<
wsdl:part
name
="
parameters
"
element
="
tns:example
"
/>
</
wsdl:message
>
<
wsdl:part
name
="
parameters
"
element
="
tns:exampleResponse
"
/>
</
wsdl:message
>
<
wsdl:input
name
="
exampleRequest
"
message
="
tns:exampleRequest
"
/>
<
wsdl:output
name
="
exampleResponse
"
message
="
tns:exampleResponse
"
/>
</
wsdl:operation
>
</
wsdl:portType
>
<
wsdlsoap:binding
style
="
document
"
transport
="
http://schemas.xmlsoap.org/soap/http
"
/>
</
wsdl:binding
>
<
wsdlsoap:address
location
="
http://localhost:8080/HelloWorld/services/HelloWorldService
"
/>
</
wsdl:port
>
</
wsdl:service
>
</
wsdl:definitions
>
-
<
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
"
>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
