[转]使用 Ajax 调用 SOAP Web 服务，第 1 部分: 构建 Web 服务客户机

Ajax 前端之家
前端之家收集整理的这篇文章主要介绍了[转]使用 Ajax 调用 SOAP Web 服务，第 1 部分: 构建 Web 服务客户机，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

序:最近在研究适合项目的Web架构技术,以下技术可以直接从浏览器端访问SOAP服务器.


2006 年 1 月 16 日

本文介绍如何使用异步 JavaScript 和 XML (Asynchronous JavaScript and XML,Ajax) 设计模式来实现基于 Web 浏览器的 SOAP Web 服务客户机。

本文是系列文章的第 1 部分，演示了如何使用针对 Web 应用程序的 Ajax 设计模式来实现跨平台的基于 JavaScript 的 SOAP Web 服务客户机。

Ajax 已普遍用于许多知名的 Web 应用程序服务，例如 GMail、Google Maps、Flickr 和 Odeo.com。通过使用异步 XML 消息传递，Ajax 为 Web 开发人员提供了一种扩展其 Web 应用程序价值和功能的途径。这里介绍的 Web Services JavaScript Library 扩展了该基础机制，其通过引入对调用基于 SOAP 的 Web 服务的支持来增强 Ajax 设计模式。

从浏览器中调用 Web 服务

请访问 Ajax 技术资源中心，这是有关 Ajax 编程模型信息的一站式中心，包括很多文档、教程、论坛、blog、wiki 和新闻。任何新信息都能在这里找到。

从 Web 浏览器中调用 SOAP Web 服务可能会比较麻烦，这是因为大多数流行的 Web 浏览器在生成和处理 XML 方面都略有不同。所有浏览器都一致实现且用于 XML 处理的标准 API 或功能少之又少。

浏 览器实现人员一致支持的机制之一是 XMLHttpRequest API，它是 Ajax 设计模式的核心。developerWorks 网站最近发布的另一篇由 Philip McCarthy 撰写的的文章详细介绍了该 API。XMLHttpRequest 是一个用于执行异步 HTTP 请求的 JavaScript 对象。Philip McCarthy 在其文章中描述了一个顺序图（请参见图 1），此图对于理解 XMLHttpRequest 对象如何支持 Ajax 设计非常有帮助（请参阅参考资料，以获得指向全文的链接）。


图 1. Philip McCarthy 的 Ajax 顺序图

从 此图中，您可以清楚地看到 XMLHttpRequest 对象是如何工作的。一些运行在 Web 浏览器内的 JavaScript 创建了一个 XMLHttpRequest 实例和一个用于异步回调的函数。然后，该脚本使用 XMLHttpRequest 对象对服务器执行 HTTP 操作。在接收到响应后，调用回调函数。在该回调函数内，可能处理返回的数据。如果返回的数据碰巧是 XML，则 XMLHttpRequest 对象将自动使用浏览器中内置的 XML 处理机制来解析该数据。

遗憾的是，使用 Ajax 方法的主要难题在于 XMLHttpRequest 对象自动解析 XML 的详细过程。例如，假设我正在请求的数据是一个 SOAP 信封，其包含来自许多不同 XML 命名空间的元素，并且我希望提取 yetAnotherElement@H_403_50@ 中属性 attr@H_403_50@ 的值。（请参见清单 1）


清单 1. 一个包含多个命名空间的 SOAP 信封 
                
<s:Envelope 
  xmlns:s="http://schemas.xmlsoap.org/soap/envelope/" 
  xmlns:xsd="http://www.w3.org/2001/XMLSchema" 
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <s:Header/>
  <s:Body>
    <m:someElement xmlns:m="http://example">
      <n:someOtherElement 
        xmlns:n="http://example" 
        xmlns:m="urn:example">
        <m:yetAnotherElement 
          n:attr="abc" 
          xmlns:n="urn:foo"/>
      </n:someOtherElement>
    </m:someElement>
  </s:Body>
</s:Envelope>

在 Mozilla 浏览器和 Firefox 浏览器中，提取 attr@H_403_50@ 属性值非常简单，如清单 2所示。


清单 2. 在 Mozilla 和 Firefox 中检索 attr 属性值的方法不能运用在 Internet Explorer 中 
                
var m = el.getElementsByTagNameNS(
  'urn:example',
  'yetAnotherElement')[0].
    getAttributeNS(
      'urn:foo',
      'attr');
alert(m); // displays 'abc'

关于安全性

由 于涉及许多实际安全问题，因此在缺省情况下，大多数 Web 浏览器中的 XMLHttpRequest 对象都限制为只能与用户正在查看的 Web 页所在的域中承载的资源和服务进行交互。例如，如果我正在访问一个位于 http://example.com/myapp/ 的页面，则 XMLHttpRequest 将只允许访问位于 example.com 域中的资源。对于阻止恶意应用程序代码潜在地对其不应该访问的信息进行不适当的访问，这种预防措施非常必要。因为这里介绍的 Web 服务客户机基于 XMLHttpRequest，所以这种限制同样适用于您将会调用的 Web 服务。

如果您需要能够访问位于另一个域中的 Web 服务，您可以使用以下两种合理的解决方案：

  • 对 JavaScript 进行数字签名。通过对 JavaScript 脚本进行数字签名，您就告诉了 Web 浏览器可以信任该脚本不会执行任何恶意的活动，并且对 XMLHttpRequest 可以访问的数据的限制也应该取消。
  • 使用代理。一 个简单的解决方案是，通过位于加载的页面所在的域中的代理资源来传递所有来自 XMLHttpRequest 的请求。该代理将 XMLHttpRequest 的请求转发到远程位置，并将结果返回给浏览器。从 XMLHttpRequest 对象的角度来看，这种交互发生在现有的安全配置之内。

遗 憾的是，以上代码无法在 Internet Explorer Version 6 中运行，因为该浏览器不仅没有实现 getElementsByTagNameNS 功能，而且事实上还使用了一种很糟糕的方法——将 XML 命名空间的前缀作为其元素和属性名称的一部分来对待。

Internet Explorer 缺少对 XML 命名空间的支持，这使得它很难处理命名空间密集的 XML 格式，例如采用独立于浏览器的方式的 SOAP。即使要执行一些像提取结果中的属性值这样简单的操作，您也必须编写能够在多个浏览器中实现一致预期行为的特殊代码。幸运的是，这种特殊代码可以 封装并重用。

为了从 Web 浏览器中调用 Web 服务，并可靠地处理 SOAP 消息，您需要首先了解一些安全问题（请参见侧栏“关于安全性”）。此外，您还需要编写一个 JavaScript 脚本库（图 2），以便将底层浏览器 XML 实现中的不一致情况抽象出来，从而使您能够直接处理 Web 服务数据。


图 2. 在使用 Web Services JavaScript Library 的 Web 浏览器中通过 Javascript 调用 Web 服务

图 2 中的 Web Services JavaScript Library (ws.js) 是一组 JavaScript 对象和实用功能，它们为基于 SOAP 1.1 的 Web 服务提供了基本的支持。Ws.js 定义了下列对象：

  • WS.Call：一个包装了 XMLHttpRequest 的 Web 服务客户机
  • WS.QName：XML 限定名实现
  • WS.Binder：自定义 XML 序列化器/反序列化器的基础
  • WS.Handler：请求/响应处理程序的基础
  • SOAP.Element：包装了 XML DOM 的基本 SOAP 元素
  • SOAP.Envelope：SOAP Envelope 对象扩展了 SOAP.Element
  • SOAP.Header：SOAP Header 对象扩展了 SOAP.Element
  • SOAP.Body：SOAP Body 对象扩展了 SOAP.Element
  • XML：用于处理 XML 的跨平台实用方法

ws.js 的核心是 WS.Call 对象，该对象提供了调用 Web 服务的方法。WS.Call 主要负责与 XMLHttpRequest 对象进行交互，并处理 SOAP 响应。

WS.Call 对象公开了以下三个方法：

  • add_handler。向处理链添加请求/响应处理程序。处理程序对象在调用 Web 服务的前后被调用，以支持可扩展的预调用处理和后调用处理。
  • invoke。将指定的 SOAP.Envelope 对象发送给 Web 服务，然后在接收到响应后调用回调函数。当调用使用文本 XML 编码的文档样式的 Web 服务时，请使用此方法。
  • invoke_rpc。创建一个封装 RPC 样式请求的 SOAP.Envelope，并将其发送到 Web 服务。当接收到响应时，调用回调函数。

在 通常情况下，WS.Call 对象只不过是位于 XMLHttpRequest 对象顶层的瘦包装器 (thin wrapper)，该包装器能够执行许多简化处理的操作。这些操作包括设置 SOAP 1.1 规范要求的 SOAPAction HTTP Header。


回页首


使用 ws.js

Web services JavaScript Library 提供的 API 非常简单。

SOAP.* 对象（SOAP.Element@H_403_50@、SOAP.Envelope@H_403_50@、SOAP.Header@H_403_50@ 和 SOAP.Body@H_403_50@）提供了构建和读取 SOAP 信封的方法，如清单 3 所示，因而处理 XML 文档对象模型的底层细节就顺利地抽象出来。


清单 3. 构建一个 SOAP 信封 
                
var envelope = new SOAP.Envelope();
var body = envelope.create_body();
var el = body.create_child(new WS.QName('method','urn:foo'));
el.create_child(new WS.QName('param','urn:foo')).set_value('bar');

清单 4 显示了由 清单 3 中的代码生成的 SOAP 信封。


清单 4. 构建一个 SOAP 信封 
                
<Envelope xmlns="http://schemas.xmlsoap.org">
  <Body>
    <method xmlns="urn:foo">
      <param>bar</param>
    </method>
  </Body>
</Envelope>

如果您正在创建的 SOAP 信封代表一个 RPC 样式的请求，则 SOAP.Body 元素提供了一个简便方法 set_rpc@H_403_50@（如清单 5 所示），该方法能够构造一个完整的 RPC 请求——包含一个指定的操作名称、一个指定的输入参数数组和一个 SOAP 编码样式的 URI。


清单 5. 构建一个 RPC 请求信封 
                
var envelope = new SOAP.Envelope();
var body = envelope.create_body();
body.set_rpc(
  new WS.QName('param','urn:foo'),
  new Array(
    {name:'param',value:'bar'}
  ),SOAP.NOENCODING
);

每个参数都作为一个 JavaScript 对象结构进行传递，且可能带有以下属性：

  • name。一个指定参数名称的字符串或 WS.QName 对象。必需。
  • value。参数的值。如果该值不是一个简单数据类型（例如，字符串、整数或其他），则应该指定一个能将该值序列化为适当的 XML 结构的 WS.Binder。必需。
  • xsitype：标识参数的 XML 模式实例类型的 WS.QName（例如，xsi:type="int"@H_403_50@ 对应 xsitype:new WS.QName('int','http://www.w3.org/2000/10/XMLSchema')@H_403_50@）。可选。
  • encodingstyle：标识参数所使用的 SOAP 编码样式的 URI。可选。
  • binder：能够将参数序列化为 XML 的 WS.Binder 实现。可选。

例如，如果要指定的参数名为“abc”、XML 命名空间为“urn:foo”、xsi:type 为“int”且值为“3”，则我会使用以下代码：new Array({name:new WS.QName('abc',value:3,xsitype:new WS.QName('int','http://www.w3.org/2000/10/XMLSchema')})@H_403_50@。

一旦我为服务请求构建了 SOAP.Envelope，我就会将该 SOAP.Envelope 传递到 WS.Call 对象的 invoke@H_403_50@ 方法，以便调用该信封内编码的方法： (new WS.Call(service_uri)).invoke(envelope,callback)@H_403_50@

另一种可选方案是手动构建 SOAP.Envelope。我会将参数 WS.QName、参数数组和编码样式传递到 WS.Call 对象的 invoke_rpc@H_403_50@ 方法，如清单 6 所示。


清单 6. 使用 WS.Call 对象调用 Web 服务 
                
var call = new WS.Call(serviceURI); 
var nsuri = 'urn:foo';
var qn_op = new WS.QName('method',nsuri);
var qn_op_resp = new WS.QName('methodResponse',nsuri);  
  call.invoke_rpc(
    qn_op,
    new Array(
      {name:'param',value:'bar'}
    ),SOAP.NOENCODING,
    function(call,envelope) {
      // envelope is the response SOAP.Envelope
      // the XML Text of the response is in arguments[2]
    }
  );

在调用 invoke@H_403_50@ 方法或 invoke_rpc@H_403_50@ 方法时，WS.Call 对象会创建一个基本的 XMLHttpRequest 对象，用包含 SOAP 信封的 XML 元素进行传递，并接收和解析响应，然后调用提供的回调函数。

为了能够扩展 SOAP 消息的预处理和后处理，WS.Call 对象允许您注册一组 WS.Handler 对象，如清单 7 所示。对于调用周期内的每个请求、每个响应和每个错误，都将调用这些对象。可以通过扩展 WS.Handler JavaScript 对象来实现新的处理程序。


清单 7. 创建和注册响应/响应处理程序 
                
var MyHandler = Class.create();
MyHandler.prototype = (new WS.Handler()).extend({
  on_request : function(envelope) {
     // pre-request processing
  },
  on_response : function(call,envelope) {
     // post-response,pre-callback processing
  },
  on_error : function(call,envelope) {
  }
});
var call = new WS.Call(...);
call.add_handler(new MyHandler());

处理程序对插入或提取正在传递的 SOAP 信封中的信息最有用。例如，您可以设想一个处理程序自动向 SOAP Envelope 的 Header 插入适当的 Web 服务寻址 (Web Services Addressing) 元素，如清单 8 中的示例所示。


清单 8. 一个将 Web 服务寻址操作 Header 添加到请求中的处理程序示例 
                
var WSAddressingHandler = Class.create();
WSAddressingHandler.prototype = (new WS.Handler()).extend({
  on_request : function(call,envelope) {  		
    envelope.create_header().create_child(
        new WS.QName('Action','http://ws-addressing','wsa')
      ).set_value('http://www.example.com');
  }
});

WS.Binder 对象（清单 9）执行 SOAP.Element 对象的自定义序列化和反序列化。WS.Binder 的实现必须提供以下两个方法：

  • to_soap_element。将 JavaScript 对象序列化为 SOAP.Element。传入的第一个参数是要序列化的值。第二个参数是 SOAP.Element，必须将要序列化的值序列化为 SOAP.Element。该方法不返回任何值。
  • to_value_object。将 SOAP.Element 反序列化为 JavaScript 对象。该方法必须返回反序列化的值对象。

清单 9. WS.Binding 实现示例 
                
var MyBinding = Class.create();
MyBinding.prototype = (new WS.Binding()).extend({
  to_soap_element : function(value,element) {  		
    ...
  },
  to_value_object : function(element) {
    ...
  }
});





回页首


一个简单示例

我已经提供了一个示例项目来阐释 Web Services JavaScript Library 的基本功能。该演示所使用的 Web 服务（如清单 10 所示）已经在 WebSphere Application Server 中进行了实现，并提供了简单的 Hello World 功能。


清单 10. 一个简单的基于 Java 的“Hello World”Web 服务 
                
package example;
public class HelloWorld {
  public String sayHello(String name) {
    return "Hello " + name;
  }
}

在实现了该服务并将其部署到 WebSphere Application Server 后，该服务（清单 11）的 WSDL 描述定义了您需要传递的 SOAP 消息（用于调用 Hello World 服务）。


清单 11. HelloWorld.wsdl 的代码片段 
                
<wsdl:portType name="HelloWorld">
  <wsdl:operation name="sayHello">
    <wsdl:input 
      message="impl:sayHelloRequest" 
      name="sayHelloRequest"/>
    <wsdl:output 
      message="impl:sayHelloResponse" 
      name="sayHelloResponse"/>
  </wsdl:operation>
</wsdl:portType>

通过使用 Web Services JavaScript Library，您可以实现一个调用 Hello World 服务的方法，如清单 12所示。


清单 12. 使用 WS.Call 调用 HelloWorld 服务 
                
<html>
<head>
...
<script 
  type="text/javascript" 
  src="scripts/prototype.js"></script>
<script 
  type="text/javascript" 
  src="scripts/ws.js"></script>
<script type="text/javascript">
function sayHello(name,container) {
  var call = new WS.Call('/AjaxWS/services/HelloWorld'); 
  var nsuri = 'http://example';
  var qn_op = new WS.QName('sayHello',nsuri);
  var qn_op_resp = new WS.QName('sayHelloResponse',
    new Array(
      {name:'name',value:name}
    ),null,envelope) {
      var ret = 
        envelope.get_body().get_all_children()[0].
          get_all_children()[0].get_value();
      container.innerHTML = ret;
      $('soap').innerHTML = arguments[2].escapeHTML();
    }
  );
}
</script>
</head>
...

然后，您可以在我们的 Web 应用程序中的任意位置通过调用 sayHello@H_403_50@ 函数来调用 Hello World 服务。请参见清单 13。


清单 13. 调用 sayHello 函数 
                
<body>
<input name="name" id="name" />
<input value="Invoke the Web Service"
       type="button" 
       onclick="sayHello($('name').value,$('result'))" />
<div id="container">Result:
<div id="result">
</div>
<div id="soap">
</div>
</div>
</body>

调用成功后的结果如图 3 所示。在 Mozilla、Firefox 和 Internet Explorer 中运行该示例应该会得到相同的结果。


图 3. Firefox 中的 Hello World 示例





回页首


后续部分

使 用 Web Services JavaScript Library，可以采用简单的独立于浏览器的方式将基本的 SOAP Web 服务合并到 Web 应用程序中。在本系列的下一个部分中，您不仅可以探讨如何使用该库来调用更多基于 Web 服务资源框架 (WS-Resource Framework ) 系列规范的高级 Web 服务，而且还可以了解扩展该 Web 服务功能并将其集成到 Web 应用程序中的方法。


回页首


下载

描述 名字 大小 下载方法
Sample project ws-wsajaxcode.zip 19 KB HTTP
关于下载方法的信息


参考资料

学习

获得产品和技术

讨论


关于作者

James Snell 是 IBM 的 software group 中的 emerging Internet technologies 小组的一名设计师兼策略专家，在这个小组中，他在 Web 服务技术不断发展的体系结构和实现中起到了积极的作用。他是 Programming Web Services with SOAP（O'Reilly 和 Associates 出版）一书的合著者。您可以通过 jasnell@us.ibm.com与 James 联系。

猜你在找的Ajax相关文章

网页的异步请求（Ajax）
JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表...
手动实现AJAX
AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/Win...
axios异步提交表单数据的不同形式
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...
php的ajax简单实例
很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...
Json与Ajax(注册实例）
需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./serv...
jSon和Ajax登录功能，ajax数据交互案例
ajax实例，检测用户与注册 检测用户名是否被占用： 在用户填写完用户名之后，ajax会异步向...
关于AjaxControlToolkit的样式问题
网(LieHuo.Net)教程 技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...
一个简单的AJAX实现(HELLO AJAX)
客户端部分： <html> <head> <meta http-equiv="Content-Type" ...
AJAX中文乱码的两类问题及解决之策
1）发送路径中的参数有中文，在服务器段接收参数值是乱码 例如： var url=”a.jsp?na...
实例：AJAX返回xml代码如何在网页中显示
建站学院（LieHuo.Net）文档 今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作