Ajax, Web Services & XML Part I

Last time we looked at Ajax and how to create a remote call to a service. We passed no parameters and received a simple text string. In this installment, we look at calling a web service using the SOAP protocol and XML. The response will come back to us in an XML document which we will display in a textarea.

As explained in the article “Introduction to Web Services” , a web service is basically a web site that receives a request and processes it and returns XML instead of HTML. The XML must have a format that can be interpreted as a web service call – this format is SOAP.

SOAP is a simple wrapper or “envelope” around an XML document. It has an optional header and a required body. The header contains information about the request/response and the body contains the bulk of the message. Our basic request to a movies database web service looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" xmlns:tns="http://www.ignyte.com/whatsshowing" xmlns:xs="http://www.w3.org/2001/XMLSchema">
   <soap:Body>
      <tns:GetTheatersAndMovies>
         <tns:zipCode>23112</tns:zipCode>
         <tns:radius>12</tns:radius>
      </tns:GetTheatersAndMovies>
   </soap:Body>
</soap:Envelope>

This request generates a response that lists area theaters and the movies and times they run.

What is significant about this example is that we have no back-end code supporting the application. The call to the web service is completely contained within the web page. We don’t need to write any additional code to support the application.

This also means that there is no “round tripping” to the web- or app-server. The web page will not refresh. The response will go out to the web service and return to our browser and the results will be displayed in the textarea.

Take the time to check out file ajax2a.html and run the application. (This example is written for IE6) Enter a zip code and a radius to search. When you click the button, the values will be sent to the web service. The SOAP request will be displayed in the first textarea and the SOAP response will be displayed in the second one.

When you look at the code, you’ll see similar features as in the last article. Function makeCall() now takes on three parameters – a URL, a Callback, and an XML document. This generalizes the call significantly. We also are using a POST, so that the XML payload can be delivered (instead of parameters in the URL). We are setting some header values to allow the XML to pass through the Internet and be received by the Web Service. Finally, when we send the request, the XML is specified as a payload for the request.

A new function “theaters()” creates the SOAP request and inserts the zip code and radius into the middle of it. Then it copies the XML into the response textarea and calls makeCall() with updateMe() as the callback procedure. UpdateMe() is unchanged from last time. When UpdateMe() is called, it fills in the response textarea with the SOAP response.

function theaters() {
var zip = document.getElementById("zip").value;
var radius = document.getElementById("radius").value;
var xml = '<?xml version="1.0" encoding="UTF-8"?>';
xml += '<soap:Envelope ';
xml += 'xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" ';
xml += 'xmlns:tns="http://www.ignyte.com/whatsshowing" target="_blank" rel="nofollow"" ';
xml += 'xmlns:xs="http://www.w3.org/2001/XMLSchema">" target="_blank" rel="nofollow";';
xml += '   <soap:Body>';
xml += '      <tns:GetTheatersAndMovies>';
xml += '         <tns:zipCode>'+zip+'</tns:zipCode>';
xml += '         <tns:radius>'+radius+'</tns:radius>';
xml += '      </tns:GetTheatersAndMovies>';
xml += '   </soap:Body>';
xml += '</soap:Envelope>';
document.getElementById("request").value = xml;
makeCall('http://www.ignyte.com/webservices/ignyte.whatsshowing.webservice/moviefunctions.asmx" target="_blank" rel="nofollow"', updateMe, xml);
}

Next Page: Ajax, Web Services & XML Part I - Page 2