`
j2ee_zhongqi
  • 浏览: 207095 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

ajax跨域调用webservice

阅读更多
跨域请求有多种实现方式,这里只谈谈通过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
分享到:
评论
1 楼 xiaokang1582830 2012-11-14  
这有涉及到跨域?

相关推荐

    ajax跨域调用webservice的实现代码

    标题中的“ajax跨域调用webservice的实现代码”指的是使用AJAX技术在JavaScript中跨域请求Web服务(webservice)的方法。AJAX允许在不刷新整个页面的情况下与服务器进行异步通信,而Web服务则提供了接口供客户端应用...

    ajax跨域请求调用webservice接口+视频教程

    【标题】"Ajax跨域请求调用WebService接口"是一个关键的技术点,主要涉及到Web开发中的异步数据交互和跨域安全策略。在Web应用程序中,Ajax(Asynchronous JavaScript and XML)技术允许我们在不刷新整个页面的情况...

    ajax跨域请求WebService.asmx

    5. **调用方法**:在客户端,使用jQuery或者其他JavaScript库(如axios或fetch)的Ajax方法来调用WebService.asmx中的方法。需要指定URL、请求类型、数据格式(JSON或XML)等参数,并在回调函数中处理返回的结果。 ...

    ajax异步调用webservice实例

    1. 跨域问题:由于同源策略限制,AJAX不能跨域调用服务。解决方法包括CORS(跨源资源共享)、JSONP、代理服务器等。 2. 错误处理:添加错误处理逻辑,捕获并处理可能出现的网络异常、语法错误等。 3. 数据格式:根据...

    jquery跨域调用webservice

    本文将详细解释如何利用jQuery通过JSONP(JSON with Padding)的方式实现跨域调用WebService。 #### 1. JSONP 的基本原理 JSONP 是一种解决跨域请求的有效手段,它通过动态创建`&lt;script&gt;`标签来请求跨域的数据,并...

    jQuery使用Ajax方法调用WebService

    本文将深入探讨如何使用jQuery的Ajax方法来调用WebService,从而实现异步数据交换,提升用户体验。 首先,理解Ajax(Asynchronous JavaScript and XML)的核心概念是关键。Ajax允许网页在不刷新整个页面的情况下与...

    Jquery Ajax 跨域调用asmx类型 WebService范例代码

    摘要:Ajax 在 Web 2.0 时代起着非常重要的作用,然而有时因为同源策略 (SOP)(俗称:跨域问题(cross domain)) 它的作用会受到限制。在本文中,将学习如何克服合作限制。本文以asmx方式搭建webservice作为测试用...

    js跨域调用WebService的简单实例

    标题:“js跨域调用WebService的简单实例”主要探讨了如何在JavaScript中进行跨域调用WebService的问题,并提供了一个具体的实现示例。这个知识点是在Web开发中常见的问题,当前端JavaScript需要与后端进行数据交互...

    ajax+webservice跨域实现文件上传

    4. **Ajax跨域问题**:由于浏览器的安全策略,JavaScript默认不允许跨域请求。但在实现Ajax调用Web服务时,会遇到跨域问题。为解决此问题,可以采用CORS(Cross-Origin Resource Sharing,跨源资源共享)策略,通过...

    JS调用WebService源码

    JavaScript(JS)调用WebService是Web开发中常见的一种交互方式,允许前端JavaScript代码与后端服务进行通信,实现数据的动态获取和提交。本压缩包包含了一个简单的示例项目——"WebApplication1",用于演示如何使用...

    Jquery调用WebService示例方法(源代码)

    本示例将深入探讨如何使用jQuery来调用WebService,通过源代码解析相关知识点。 首先,了解jQuery的核心功能对理解jQuery调用WebService至关重要。jQuery提供了`$.ajax()`函数,它是进行异步数据请求的基础。在这个...

    js跨域调用

    在本实例中,我们将讨论如何使用JS实现跨域调用WebService。"JqCrossDomain"这个文件名可能指的是使用jQuery库来处理跨域请求,因为jQuery提供了一些方便的方法来简化这个过程。 首先,了解同源策略是理解跨域调用...

    跨域WebService请求-Nginx_SOAP服务_Ajax客户端.docx

    【总结】综上所述,跨域调用SOAP服务的关键在于利用Nginx的反向代理功能,以及在客户端正确构造并发送SOAP请求。这种方法简化了客户端代码,避免了服务器代理的复杂性,同时保证了Web服务的正常调用。然而,这种方式...

    Ajax请求WebService跨域问题的解决方案

    标题中的“Ajax请求WebService跨域问题的解决方案”指的是在Web开发中,当使用Ajax技术尝试从一个域名(源)向另一个域名(目标)的WebService发送请求时,由于浏览器的同源策略限制,会遇到跨域问题。同源策略是...

    js调用webservice示例+源码

    本文将深入探讨如何使用JavaScript调用Web Service,以及如何解决在这个过程中遇到的问题,以配合“js调用webservice示例+源码”的主题。 Web Service是一种基于网络的、平台无关的服务,它通过SOAP(Simple Object...

    jquery调用Webservice的demo(.net)

    在.NET开发环境中,jQuery是一个广泛使用的JavaScript库,用于在客户端进行高效的DOM操作、事件处理以及Ajax交互。而Web服务(Webservice)则是提供跨平台、跨语言的数据交换能力。本教程将通过一个简单的示例来讲解...

    使用javascript调用webservice示例.pdf

    首先,我们注意到在示例中,JavaScript调用Web服务的函数`ajaxRequest()`负责发起请求。该函数的第3行定义了Web服务的URL,这里是`http://localhost:88/webservicedemo.asmx`。这表明Web服务运行在本地主机的88端口...

    ajax+webservice

    1. **后台数据获取**:Ajax调用WebService接口,获取服务器端处理的数据,然后在客户端更新页面。 2. **实时交互**:用户操作触发Ajax请求,WebService实时响应,提供数据更新,无需刷新整个页面。 3. **跨域通信**...

Global site tag (gtag.js) - Google Analytics