Easily consume SOAP Web services with JavaScript
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.
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.
Print/View all Posts Comments on this article
White Papers, Webcasts, and Downloads
- Qwest Network Services for Healthcare Providers Qwest Communications Demands for improved quality care and increased satisfaction require a ... Download Now
- Infrastructures for Innovation Qwest Communications "Nearly nine out of ten senior IT and business executives say that data ... Download Now
- Critical Connections: Leveraging Technology to Improve Healthcare Qwest Communications The American Recovery and Reinvestment Act allocates more than $20 billion ... Download Now
- Network Managed Services: A Cost-Effective Approach to Complexity Qwest Communications The new era of networked applications and interconnected business ... Download Now
- Unified Communications and Your Business: What You Need to Know Qwest Communications To create a consistent, seamless Unified Communications (UC) experience ... Download Now
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