TechRepublic : A ZDNet Tech Community

Easily consume SOAP Web services with JavaScript

Tags: Web services, Channel management, Simple Object Access Protocol, Phillip Perkins, Web service, Web, WSDL, JavaScript, Web Development Zone Newsletter

  • Save
  • Print
  • Recommend
  • 7

Takeaway: If you aren't using Web services in your development work, it's time to start consuming Web services whenever and wherever possible. This article demonstrates how easy it is to consume Web services via JavaScript and both XMLHTTP and XMLHttpRequest.

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.

  • Save
  • Print
  • Recommend
  • 7

Print/View all Posts Comments on this article

fdg dfgd dfg gf dfg dfgd aq@... | 10/04/05
I was hoping for a little more bluelizard | 10/04/05
Obscures the message innocent_bystander | 10/04/05
A first class OOP language! Tony Hopkinson | 10/04/05
sshhh!! Jaqui | 10/05/05
Illegal is a local problem Tony Hopkinson | 10/05/05
Nothing Strange About It innocent_bystander | 10/14/05
Did you haved a bad day ? Tony Hopkinson | 10/15/05
Fair Enough innocent_bystander | 10/17/05
There you go I sneered at him as well Tony Hopkinson | 10/17/05
Reply to sneered as well innocent_bystander | 10/19/05
Last word, is something I'm famous for Tony Hopkinson | 10/21/05
illegal is local? Jaqui | 10/15/05
As far as I'm aware it's not illegal Tony Hopkinson | 10/15/05
Get Rid of Client Side Code? Stephen.Abram@... | 10/21/05
Safely in the asylum, mad people outside Tony Hopkinson | 10/21/05
OK - "First class" is a stretch bluelizard | 11/19/05
RE: Easily consume SOAP Web services with JavaScript vfewbt@... | 03/04/08
RE: Easily consume SOAP Web services with JavaScript nissanmurano@... | 11/27/08

What do you think?

White Papers, Webcasts, and Downloads

Article Categories

Security
Security Solutions, IT Locksmith
Networking and Communications
E-mail Administration NetNote, Cisco Routers and Switches
CIO and IT Management
Project Management, CIO Issues, Strategies that Scale
Desktops, Laptops & OS
Windows 2000 Professional, Microsoft Word, Microsoft Excel, Microsoft Access, Windows XP,
Data Management
Oracle, SQL Server
Servers
Windows NT, Linux NetNote, Windows Server 2003
Career Development
Geek Trivia
Software/Web Development
Web Development Zone, Visual Basic, .NET

Boost Business Productivity