It’s time to start consuming Web services whenever and
wherever possible in your Web development work. Web services provide the
modularization and scalability that other technologies have promised but have
failed to deliver because of various reasons, including system compatibility
and connectivity.

Thanks to the Internet, new ways to accomplish complex tasks
and new standards have come about that allow systems to overcome those
obstacles. SOAP is one of the standard protocols for communicating with Web services.
One thing to remember is that communication between server and client via
HTTP—a standard transport for SOAP—is plain text.

While this incurs overhead, it makes it possible to create
simple solutions while passing complex data structures to/from the server. As
long as there’s a way to pass simple text across HTTP, there’s a way to consume
Web services. In this article, I’ll show you how easy it is to consume Web
services via JavaScript and both Microsoft’s XMLHTTP proxy component and the
comparable XMLHttpRequest Netscape component.

Weekly development tips in your inbox

Keep your developer skills sharp by signing up for TechRepublic’s free Web Development Zone newsletter, delivered each Tuesday.

Automatically sign up today!

Creating a client solution using JavaScript

As long as you have the WSDL (Web Services Description
Language) source to the Web service, you can fashion the call to the service.
Inside the WSDL, there is important information that explains how to make the
call and details about the interface.
Listing A contains the WSDL description of my Web service.

This WSDL is automatically generated from a .NET Web
service. The URL, located in the location attribute of the soap:address tag, for
calling this service is
http://localhost/Develop.NET/Home.Develop.WebServices/SimpleService.asmx. The
tag wsdl:operation
defines a Web method the service exports: AddTwoIntegers.
And the parameters it receives are defined by the s:element tag whose name attribute,
consequently, is AddTwoIntegers. These parameters are
easily identified as IntegerOne, of type integer, and
IntegerTwo, of type integer. Once you identify your
parameters, you can start to conceptualize your solution.

Microsoft and Netscape, or Mozilla,
both provide a method for creating the illusion of a connected application
across HTTP through the use of a proxy component. Microsoft’s component,
XMLHTTP, is part of Microsoft’s XML installation. This component is provided as
a standard component with newer versions of Internet Explorer and is marked
safe for scripting. Mozilla’s comparable
XMLHttpRequest component provides similar functionality and is installed as a
standard component in newer versions of Mozilla-based
browsers.

Using either of these components, you can make the call to
the Web service and parse the result within your JavaScript code. This is done
by opening the connection to the server, passing the appropriate headers and
sending the appropriate request XML. You need to set the Content-Type
header to text/xml. You also need to add the SOAPAction header.

In order to add the Content-Type and SOAPAction
header, you call the setRequestHeader method
of both the XMLHTTP and the XMLHttpRequest components. This method takes two
parameters: the name of the header and the value. In the case of the SOAPAction header, they are SOAPAction
and http://tempuri.org/AddTwoIntegers, respectively. The value of the SOAPAction header can be found in the soapAction attribute of the soap:operation tag within the WSDL.
Listing B shows you how simple it is to
make the call to the Web service.

This code assumes that the call to the Web service will
succeed. Otherwise, the response block will contain fault code that can be
checked within the SOAP response XML. Also, you can check the status
property of the proxy component. This property contains the HTTP response
status returned from the server. For instance, an error on the server returns a
500 status.

Conclusion

As you can see, creating a client solution using JavaScript
is pretty simple. In addition, you don’t have to know all of the intricate
details about SOAP to create this type of solution.

If you would like to fully understand the concept of the
SOAP envelope and usage of complex data types to communicate with the server,
you can find
more details about SOAP on the W3C site
. For more information about the
XMLHttpRequest interface, check
out the XULPlanet Web site
. And, you can get more
details on XMLHTTP from the MSDN
site
.