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="<a href="http://schemas.xmlsoap.org/soap/envelope/" target="_blank" rel="nofollow">

http://schemas.xmlsoap.org/soap/envelope/</a>"

xmlns:tns="<a href="http://www.ignyte.com/whatsshowing" target="_blank" rel="nofollow">

http://www.ignyte.com/whatsshowing</a>"

xmlns:xs="<a href="http://www.w3.org/2001/XMLSchema" target="_blank" rel="nofollow">

```
http://www.w3.org/2001/XMLSchema</a>"<
```
```
 <soap:Body<
```
```
 <tns:GetTheatersAndMovies<
```
```
 <tns:zipCode<23112</tns:zipCode<
```
```
 <tns:radius<12</tns:radius<
```
```
 </tns:GetTheatersAndMovies<
```
```
 </soap:Body<
```

</soap:Envelope<<!--l version="1.0" encoding="UTF-8-->

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="
```

<a href="http://schemas.xmlsoap.org/soap/envelope/" target="_blank" rel="nofollow">

<font color="#800000" size="3">http://schemas.xmlsoap.org/soap/envelope/</font></a>

```
" ';
```
```
xml += 'xmlns:tns="
```

<a href="http://www.ignyte.com/whatsshowing" target="_blank" rel="nofollow">

```

```

http://www.ignyte.com/whatsshowing" target="_blank" rel="nofollow"</font></a>

```
" ';
```
```
xml += 'xmlns:xs="
```

<a href="http://www.w3.org/2001/XMLSchema" target="_blank" rel="nofollow"<'">

```

```

http://www.w3.org/2001/XMLSchema" target="_blank" rel="nofollow"<'</font></a>

```
;
```
```
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);

```
}
```

If you look closely at the SOAP request, you can see that it contains the tags

```
 <tns:zipCode<23112</tns:zipCode<
```

```
 <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", "</font>

<a href="http://www.ignyte.com/whatsshowing/GetTheatersAndMovies" target="_blank" rel="nofollow">

```

```

http://www.ignyte.com/whatsshowing/GetTheatersAndMovies" target="_blank" rel="nofollow"

```

```
```
</a>
```
```
");
```

 request.setRequestHeader("User-Agent", "Mindreef SOAPscope 4.1.2000 (</font>

<a href="http://www.mindreef.com" target="_blank" rel="nofollow">

<font color="#800000" size="3">http://www.mindreef.com" target="_blank" rel="nofollow"

```

```
```
</a>
```
```
")
```

 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

Author Description

Free Training

Ajax, Web Services & XML Part II

Making Ajax Accessible

Ajax Challenges

Ajax Framework

The Security Aspects of Ajax

Advantages and Disadvantages of Ajax

How Ajax Has Become More Standardized

How Ajax Can Improve Web Applications

How Ajax Can Become as User Friendly as Flash

Ajax Graphics Enhancement Tools

The Power of Ajax