Call the SOAP Web service using AJAX: Construct a Web service client (1)

AJAX has been widely used in many well-known Web application services, such as GMail, Google Maps, Flickr, and Odeo.com. By using asynchronous XML message transmission, AJAX provides a way for Web developers to expand the value and functions of their Web applications. The Web Services JavaScript Library introduced here extends this basic mechanism and enhances the AJAX design mode by introducing support for calling SOAP-based Web Services.

Call Web services from a browser

Calling the SOAP Web service from a Web browser may be troublesome, because most popular Web browsers have slightly different aspects in generating and processing XML. All browsers implement consistent standards and have few standard APIs or functions for XML processing.

XMLHttpRequest API is one of the mechanisms supported by the browser implementation personnel, and is the core of the AJAX design pattern. Another article recently published by Philip McCarthy on the developerWorks website details this API. XMLHttpRequest is a JavaScript Object used to execute asynchronous HTTP requests. Philip McCarthy described a sequence diagram in his article. See figure 1). For more information about how XMLHttpRequest objects support AJAX design, see references, to obtain the link pointing to the full text ).

Figure 1. Philip McCarthy's AJAX sequence diagram

From this figure, you can clearly see how the XMLHttpRequest object works. Some JavaScript running in the Web browser creates an XMLHttpRequest instance and a function for asynchronous callback. The script then uses the XMLHttpRequest object to perform HTTP operations on the server. After receiving the response, call the callback function. This callback function may process the returned data. If the returned data happens to be XML, the XMLHttpRequest object will automatically use the XML processing mechanism built in the browser to parse the data.

Unfortunately, the main problem with AJAX is that the XMLHttpRequest object automatically parses the detailed XML Process. For example, assume that the data I'm requesting is a SOAP envelope containing elements from many different XML Namespaces, And I want to extract the attr value of the attribute in yetAnotherElement. See Listing 1)

Listing 1. a soap envelope containing multiple namespaces

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"> xmlns:n="http://example" xmlns:m="urn:example"> n:attr="abc" xmlns:n="urn:foo"/>

In Mozilla and Firefox, extracting the attr attribute value is very simple, as shown in Listing 2.

Listing 2. Methods for retrieving attr attribute values in Mozilla and Firefox cannot be used in Internet Explorer

var m = el.getElementsByTagNameNS( 'urn:example', 'yetAnotherElement')[0]. getAttributeNS( 'urn:foo', 'attr') alert(m); // displays 'abc'

Security

Because many actual security problems are involved, by default, in most Web browsers, the XMLHttpRequest object is restricted to interacting with resources and services in the domain where the Web page you are viewing resides. For example, if I am accessing a page in the http://example.com/myapp/, XMLHttpRequest will only allow access to resources in the example.com domain. This precaution is necessary to prevent malicious application code from conducting improper access to information that it should not be accessed. Because the Web service client described here is based on XMLHttpRequest, this restriction applies to the Web service that you will call.

If you need to be able to access Web services in another domain, you can use the following two reasonable solutions:

• Digitally sign JavaScript. By digitally signing a JavaScript script, you can tell the Web browser that it can trust the script to not execute any malicious activity, and the restrictions on the data that XMLHttpRequest can access should also be canceled.
• Use a proxy. A simple solution is to pass all requests from XMLHttpRequest through the proxy Resources in the domain of the loaded page. The proxy forwards the XMLHttpRequest request to a remote location and returns the result to the browser. From the XMLHttpRequest object perspective, this interaction occurs within the existing security configuration.

Unfortunately, the above Code cannot be run in Internet Explorer Version 6, because the browser not only does not implement the getElementsByTagNameNS function, in fact, a bad method is used to treat the prefix of an XML namespace as part of its element and attribute name.

Internet Explorer does not support XML Namespaces, which makes it difficult to process the dense XML format of namespaces. For example, SOAP is used independently of a browser. Even if you want to perform some simple operations like extracting the property values in the results, you must write special code that can achieve consistent expected behavior in multiple browsers. Fortunately, this special code can be encapsulated and reused.

To call Web services from a Web browser and process SOAP messages reliably, You need to first learn about security issues, see "about security" on the sidebar "). In addition, you also need to write a JavaScript script library figure 2) to abstract inconsistencies in the XML Implementation of the underlying browser, so that you can directly process Web Service data.

Figure 2. using JavaScript to call Web Services in a Web browser using Web Services Javascript Library
The Web Services JavaScript Library (ws. js) in Figure 2 is a set of JavaScript objects and practical functions that provide basic support for SOAP 1.1-based Web Services. Ws. js defines the following objects:

• WS. Call: A Web service client packaged with XMLHttpRequest
• WS. QName: qualified XML name implementation
• WS. Binder: the basis for customizing the XML serializer/deserializer
• WS. Handler: the basis of the request/Response Processing Program
• SOAP. Element: encapsulates the basic SOAP elements of the xml dom.
• SOAP. Envelope: the SOAP Envelope object extends the SOAP. Element
• SOAP. Header: the SOAP Header object extends the SOAP. Element
• SOAP. Body: the SOAP Body object extends the SOAP. Element
• XML: a cross-platform practical method for processing XML
The core of ws. js is the WS. Call object, which provides methods to Call Web Services. WS. Call interacts with XMLHttpRequest objects and processes SOAP responses.
The WS. Call object exposes the following three methods:
• Add_handler. Add a request/response handler to the processing link. The handler object is called before and after the Web Service is called to support scalable pre-adjustment usage and post-call processing.
• Invoke. Sends the specified SOAP. Envelope object to the Web service, and then calls the callback function after receiving the response. Use this method when calling a Web service that uses the Document Style encoded in text XML.
• Invoke_rpc. Create a SOAP. Envelope that encapsulates the RPC style request and send it to the Web service. Call the callback function when a response is received.

Generally, the WS. Call object is only a thin wrapper located at the top layer of the XMLHttpRequest object. This wrapper can perform many simplified operations. These operations include setting the SOAPAction HTTP Header required by the SOAP 1.1 Standard.