If you look closely at the SOAP request, you can see that it contains the tags
   <tns:zipCode>23112</tns:zipCode>
and    <tns:radius>15</tns:radius>. 
These are the input parameters.

And looking at the SOAP response (which could be huge), you will see a large number of tags like this:     <Theater><Name>Commonwealth 20</Name></Theater>
 and
    <Movie><Rating>PG-13</Rating><Name>A Prairie Home Companion</Name>
        <RunningTime>1 hr 45 mins</RunningTime>
        <ShowTimes>1:25pm | 4:00pm | 6:30pm | 9:15pm</ShowTimes></Movie>.
The values should be self descriptive.

You can fill your web page with many such calls. Since the calls are “asynchronous”, your web page will not “freeze” as the call is satisfied across the network. Instead, you will be able to continue to scroll and click on other controls – even spawn off other web service calls. When the data finally returns from the web service, the callback function is called without any further action on the part of the user or the JavaScript code.

This can be a problem. If a web service takes too long to respond it will time out and the callback will get an error code. Also, the programmer must take care not to destroy data thanks to a callback. For example, in our program, if the user starts to type in the response textarea, when the callback executes, the user’s entries will be destroyed.

The ability to call out to web services from a HTML page allows the programmer to take advantage of a myriad of free services on the internet. When combined with custom web services, powerful back end logic can be called quickly and easily from the Rich Client front end.

Other Functions Used :

function makeCall(url, callback, xml) {
  request = new ActiveXObject("Microsoft.XMLHTTP");
  if (request) {
    var now = new Date();
    request.onreadystatechange = callback;
    request.open("POST", url, true);
    request.setRequestHeader("SOAPAction", "http://www.ignyte.com/whatsshowing/GetTheatersAndMovies" target="_blank" rel="nofollow"");
    request.setRequestHeader("User-Agent", "Mindreef SOAPscope 4.1.2000 (http://www.mindreef.com" target="_blank" rel="nofollow"")
    request.setRequestHeader("Content-Type", "text/xml; charset=UTF-8");
    request.send(xml);
  }
}

function updateMe() {
  if (request.readyState != 4) return;
  if (request.status != 200) return;
  document.getElementById("result").value = request.responseText;
  request.abort();
  request = null;
}

Next time we’ll actually parse the XML response into something that can be displayed in a table.

Download Sample Code

Author: Greg Smith

First Page: Ajax, Web Services & XML Part I