使用 Ajax 调用 SOAP Web 服务，第 1 部分: 构建 Web 服务客户机
James Snell (jasnell@us.ibm.com), 软件工程师，新兴技术, IBM
James Snell 是 IBM 的 software group 中的 emerging Internet technologies 小组的一名设计师兼策略专家，在这个小组中，他在 Web 服务技术不断发展的体系结构和实现中起到了积极的作用。他是 Programming Web Services with SOAP（O'Reilly 和 Associates 出版）一书的合著者。您可以通过 jasnell@us.ibm.com与 James 联系。
简介： 本文介绍如何使用异步 JavaScript 和 XML (Asynchronous JavaScript and XML, Ajax) 设计模式来实现基于 Web 浏览器的 SOAP Web 服务客户机。
发布日期： 2006 年 1 月 16 日
级别： 中级
访问情况 1059 次浏览
建议: 0 (添加评论)
平均分 （共 1 个评分 ）
本文是系列文章的第 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 设计模式。
请访问 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 中属性 attr 的值。（请参见清单 1）
<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 属性值非常简单，如清单 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。
Web services JavaScript Library 提供的 API 非常简单。
SOAP.* 对象（SOAP.Element、SOAP.Envelope、SOAP.Header 和 SOAP.Body）提供了构建和读取 SOAP 信封的方法，如清单 3 所示，因而处理 XML 文档对象模型的底层细节就顺利地抽象出来。
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 信封。
<Envelope xmlns="http://schemas.xmlsoap.org">
<Body>
<method xmlns="urn:foo">
<param>bar</param>
</method>
</Body>
</Envelope>
如果您正在创建的 SOAP 信封代表一个 RPC 样式的请求，则 SOAP.Body 元素提供了一个简便方法 set_rpc（如清单 5 所示），该方法能够构造一个完整的 RPC 请求——包含一个指定的操作名称、一个指定的输入参数数组和一个 SOAP 编码样式的 URI。
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"对应xsitype:new WS.QName('int','http://www.w3.org/2000/10/XMLSchema')）。可选。 - encodingstyle：标识参数所使用的 SOAP 编码样式的 URI。可选。
- binder：能够将参数序列化为 XML 的 WS.Binder 实现。可选。
例如，如果要指定的参数名为“abc”、XML 命名空间为“urn:foo”、xsi:type 为“int”且值为“3”，则我会使用以下代码：new Array({name:new WS.QName('abc','urn:foo'), value:3, xsitype:new WS.QName('int','http://www.w3.org/2000/10/XMLSchema')})。
一旦我为服务请求构建了 SOAP.Envelope，我就会将该 SOAP.Envelope 传递到 WS.Call 对象的 invoke 方法，以便调用该信封内编码的方法： (new WS.Call(service_uri)).invoke(envelope, callback)
另一种可选方案是手动构建 SOAP.Envelope。我会将参数 WS.QName、参数数组和编码样式传递到 WS.Call 对象的 invoke_rpc 方法，如清单 6 所示。
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 方法或 invoke_rpc 方法时，WS.Call 对象会创建一个基本的 XMLHttpRequest 对象，用包含 SOAP 信封的 XML 元素进行传递，并接收和解析响应，然后调用提供的回调函数。
为了能够扩展 SOAP 消息的预处理和后处理，WS.Call 对象允许您注册一组 WS.Handler 对象，如清单 7 所示。对于调用周期内的每个请求、每个响应和每个错误，都将调用这些对象。可以通过扩展 WS.Handler JavaScript 对象来实现新的处理程序。
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 服务）。
<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',nsuri);
call.invoke_rpc(
qn_op,
new Array(
{name:'name',value:name}
),null,
function(call,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 函数来调用 Hello World 服务。请参见清单 13。
<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
