Introducing Ajax - Part 2

By Ed Woychowsky

2.5 An Ajax Encounter of the Second Kind

As flexible and cross-browser capable as the "hidden frames" method of implementing Ajax is, all that
has been accomplished is the "AJ" part of Ajax. Which is sort of like the sound of one hand clapping,
and that usually means that Igor has been slacking off again. Thankfully, there's another part—eh, make
that technology—available: XML. The problem with XML is that it has developed a reputation of
being difficult; however, it doesn't have to be. Just keep in mind that, in those situations, code has a
tendency to follow you around, like Igor.

2.5.1 XML
In its simplest form, XML is nothing more than a text file containing a single well-formed XML
document. Come to think of it, the same is pretty much true in its most complex form as well. Looking
past all of the hype surrounding XML, it is easy to see that XML is merely the text representation of
self-describing data in a tree data structure. When this is understood, all that is left are the nitty-gritty
little details, like "What's a tree data structure?" and "How exactly does data describe itself?"
A tree data structure is built of nodes, with each node having only one node connected above it, called a
parent node. The sole exception to this rule is the root node, which has no parent node. Nodes can also
have other nodes connected below, and these are called child nodes. In addition, nodes on the same
level that have the same parent node are called children. Figure 2-2 is a graphical representation of a
tree data structure.

Figure 2-2 Tree data structure

Figure 2-2 can also be represented as the XML document shown in Listing 2-4.
Listing 2-4 XML Representation of the Same Information as in Figure 2-2
<?xml version="1.0" encoding="UTF-8" standalone="yes"?
1
>
2 <library>
3 <book>
4 <series>The Wonderland Gambit</series>
5 <title>The Cybernetic Walrus</title>
6 <author>Jack L. Chalker</author>
7 </book>
8 <book>
9 <series>The Wonderland Gambit</series>
10 <title>The March Hare Network</title>
11 <author>Jack L. Chalker</author>
12 </book>
13 <book>
14 <series>The Wonderland Gambit</series>
15 <title>The Hot-Wired Dodo</title>
16 <author>Jack L. Chalker</author>
17 </book>
18</library>
view plain | print | ?
<?xml version="1.0" encoding="UTF-8" standalone="yes"?> <library> <book> <series>The
Wonderland Gambit</series> <title>The Cybernetic Walrus</title> <author>Jack L. Chalker</author>
</book> <book> <series>The Wonderland Gambit</series> <title>The March Hare Network</title>
<author>Jack L. Chalker</author> </book> <book> <series>The Wonderland Gambit</series>
<title>The Hot-Wired Dodo</title> <author>Jack L. Chalker</author> </book> </library>
The nodes shown in Listing 2-4 are called elements, which closely resemble HTML tags. And like
HTML tags, start tags begin with < while end tags begin with </. However, unlike HTML tags, all
XML tags either must have a closing tag or be self-closing or must be empty elements. Self-closing
tags are recognizable by the ending />; if the forward slash was omitted, the document would not be a
well-formed XML document. In addition, to all elements being either closed or self-closing, the tags
must always match up in order. This means that the XML document in Listing 2-5 is well formed but
the XML document in Listing 2-6 is not well formed. In a nutshell, "well formed" means that there is a
right place for everything. Feet are a good example of this: Imagine if Igor used two left feet; the
monster wouldn't be well formed and wouldn't be able to dance, either.

Listing 2-5 A Well-Formed XML Document

<?xml version="1.0" encoding="UTF-8" standalone="yes"?
1
>
2<one>
3 <two>
4 <three>
5 <four/>
6 </three>
7 </two>
8</one>
view plain | print | ?
<?xml version="1.0" encoding="UTF-8" standalone="yes"?> <one> <two> <three> <four/> </three>
</two> </one>

Listing 2-6 An XML Document That Is Not Well Formed

<?xml version="1.0" encoding="UTF-8" standalone="yes"?
1
>
2<one>
3 <two>
4 <three>
5 <four/>
6 </two>
7 </three>
8</one>
view plain | print | ?
<?xml version="1.0" encoding="UTF-8" standalone="yes"?> <one> <two> <three> <four/> </two>
</three> </one>
As neat and nifty as the hidden frames method of communicating with the server is, the addition of an
XML document provides another option, XMLHTTP, or, as some refer to it the XMLHttpRequest
object. Note all those capital letters, which are meant to indicate that it is important. The
XMLHttpRequest object sends information to and retrieves information from the server. Although it
doesn't have to be, this information is usually in the form of XML and, therefore, has the advantage of
being more compact than the usual HTML that the server sends. Just in case you're interested, this was
the means of communication for that page that I had handwritten and was using during the "it doesn't
blink" fiasco.

2.5.2 The XMLHttpRequest Object

Unlike the hidden frames approach, in which the unload/reload cycle is still there but is tucked out of
the way, using the XMLHttpRequest object means finally saying good-bye to the unload/reload
cycle that we've all come to know and loathe. This means that, in theory, if not in practice, a single
page could conceivably be an entire website. Basically, it's a load-and-go arrangement.
In theory, the original page loads and a user enters information into a form and clicks submit. A
JavaScript event handler sends the user's information to the server via XMLHTTP and either waits
penitently for a response (synchronous) or sets an event handler for the response (asynchronous). When
the response is received, the JavaScript takes whatever action that it is programmed to, including
updating parts of the page, hence the lack of an unload/reload cycle or "blink." This is great theory, but
a theory is pretty useless if it cannot be put into practice; let's take a look in Listings 2-7 and 2-8 at how
this can be implemented from a client-side perspective.
Listing 2-7 Example Ajax Web Page
1 <html>
2 <head>
3 <title>AJAX Internet Explorer Flavor</title>
4 <script language="javascript">
5 var dom = new ActiveXObject('MSXML2.FreeThreadedDOMDocument.3.0');
6 var objXMLHTTP = new ActiveXObject('Microsoft.XMLHTTP');
7
8 /*
9 Obtain the XML document from the web server.
10*/
11 function initialize()
12{
13 var strURL = 'msas.asmx/getTime';
14
15 objXMLHTTP.open('POST',strURL,true);
16 objXMLHTTP.onreadystatechange = stateChangeHandler;
17
18 try
19 {
20 objXMLHTTP.send();
21 }
22 catch(e)
23 {
24 alert(e.description);
25 }
26}
27
28/*
29 Handle server response to XMLHTTP requests.
30*/
31function stateChangeHandler()
32{
33 if(objXMLHTTP.readyState == 4)
34 try
35 {
36 dom.loadXML(objXMLHTTP.responseText);
37 document.getElementById('time').innerText = dom.selectSingleNode('time').text;
38 }
39 catch(e) { }
40}
41 </script>
42 </head>
43 <body onload="initialize()">
44 <div id="time"></div>
45 </body>
46</html></pre>
view plain | print | ?
<html> <head> <title>AJAX Internet Explorer Flavor</title> <script language="javascript"> var dom
= new ActiveXObject('MSXML2.FreeThreadedDOMDocument.3.0'); var objXMLHTTP = new
ActiveXObject('Microsoft.XMLHTTP'); /* Obtain the XML document from the web server. */ function
initialize() { var strURL = 'msas.asmx/getTime'; objXMLHTTP.open('POST',strURL,true);
objXMLHTTP.onreadystatechange = stateChangeHandler; try { objXMLHTTP.send(); } catch(e)
{ alert(e.description); } } /* Handle server response to XMLHTTP requests. */ function
stateChangeHandler() { if(objXMLHTTP.readyState == 4) try
{ dom.loadXML(objXMLHTTP.responseText); document.getElementById('time').innerText =
dom.selectSingleNode('time').text; } catch(e) { } } </script> </head> <body onload="initialize()">
<div id="time"></div> </body> </html></pre>

Listing 2-8 XML Document

<?xml version="1.0" encoding="utf-8" ?
1
>
2<time>3:30 PM</time>
view plain | print | ?
<?xml version="1.0" encoding="utf-8" ?> <time>3:30 PM</time>
If this were CSI, Columbo or The Thin Man, now is the time when the hero explains how the deed was
done. It goes something like this: The HTML page loads, which causes the onload event handler,
initialize, to fire. In this function, the XMLHttpRequest object's open method is invoked,
which only sets the method (POST), gives the relative URL of a web service, and states that the request
will be asynchronous (true). Next, the onreadystatechage event handler is set; this is the
function that handles what to do when the web service responds. Finally, the send method of the
XMLHttpRequest object is invoked, sending our request on its merry way.
When a response is received from the web service, the stateChangeHandler is fired. You've
probably noticed the test of the readyState property. The reason for this is that there are more than
one possible readyState values, and we're interested in only four, complete. When the response is
complete, the result is loaded into an XML document, the appropriate node is selected, and the HTML
is updated.
Listings 2-7 and 2-8 could be considered by some a pure example of Ajax. Unfortunately, the way it is
currently coded, browsers other than Microsoft Internet Explorer would have real issues with it. What
sort of issues? The code simply won't work because of differences in how XML and the
XMLHttpRequest object work in various browsers. This doesn't mean that this form of Ajax is an
IE-only technology; it simply means that careful planning is required to ensure cross-browser
compatibility.
On the subject of compatibility, I don't want to scare you off, but let me point out that the more
advanced the client-side coding is, the more likely it is that there will be issues. The majority of these
issues are merely little annoyances, similar to flies buzzing around. These "flies" aren't fatal, but it is a
good idea to keep these things in mind.

2.6 An Ajax Encounter of the Third Kind

The fifth part of Ajax, an optional part, isn't for the faint of heart. It transcends the "mad scientist stuff"
into the realm of the magical, and it is called eXtensible Stylesheet Language for Transformations, or
XSLT. In other words, if Ajax really was mad science and it was taught in school, this would be a 400-
level course. Why? The reason is that the technology is both relatively new and very, very browser
dependent. However, when it works, this method provides an incredible experience for the user.

2.6.1 XSLT
XSLT is an XML-based language that is used to transform XML into other forms. XSLT applies a style
sheet (XSLT) as input for an XML document and produces output—in most cases, XHTML or some
other form of XML. This XHTML is then displayed on the browser, literally in the "wink of an eye."
One of the interesting things about XSLT is that, other than the XML being well formed, it really
doesn't make any difference where the XML came from. This leads to some interesting possible sources
of XML. For example, as you are probably aware, a database query can return XML. But did you know
that an Excel spreadsheet can be saved as XML? XSLT can be used to transform any XML-derived
language, regardless of the source.
Listing 2-9 shows a simple Internet Explorer–only web page along the same lines as the earlier
examples. By using XSLT and the XMLHttpRequest object to retrieve both the XML and XSLT
shown in Listing 2-10, it is extremely flexible. This is because after the initial page is loaded, any
conceivable page can be generated simply by changing the XML and/or the XSLT. Sounds pretty
powerful, doesn't it?
Listing 2-9 A Simple IE-Only Web Page
1 <html>
2 <head>
3 <title>AJAX Internet Explorer Flavor</title>
4 <script language="javascript">
5 var dom = new ActiveXObject('MSXML2.FreeThreadedDOMDocument.3.0');
6 var xslt = new ActiveXObject('MSXML2.FreeThreadedDOMDocument.3.0');
7 var objXMLHTTP;
8
9 /*
10 Obtain the initial XML document from the web server.
11 */
12 function initialize()
13 {
14 doPOST(true);
15 }
16
17 /*
18 Use the XMLHttpRequest to communicate with a web service.
19 */
20 function doPOST(blnState) {
21 var strURL = 'http://localhost/AJAX/msas.asmx';
22
23 objXMLHTTP = new ActiveXObject('Microsoft.XMLHTTP');
24
25 objXMLHTTP.open('POST',strURL,true);
26
27 if(blnState)
28 objXMLHTTP.setRequestHeader('SOAPAction','http:// tempuri.org/getState');
29 else
30
31 objXMLHTTP.setRequestHeader('SOAPAction','http://tempuri.org/getXML');
32
33 objXMLHTTP.setRequestHeader('Content-Type','text/xml');
34
35 objXMLHTTP.onreadystatechange = stateChangeHandler;
36
37 try
38 {
39 objXMLHTTP.send(buildSOAP(blnState));
40 }
41 catch(e)
42 {
43 alert(e.description);
44 }
45 }
46
47 /*
48 Construct a SOAP envelope.
49 */
50 function buildSOAP(blnState) {
<html> <head> <title>AJAX Internet Explorer Flavor</title> <script language="javascript"> var dom
= new ActiveXObject('MSXML2.FreeThreadedDOMDocument.3.0'); var xslt = new
ActiveXObject('MSXML2.FreeThreadedDOMDocument.3.0'); var objXMLHTTP; /* Obtain the initial
XML document from the web server. */ function initialize() { doPOST(true); } /* Use the
XMLHttpRequest to communicate with a web service. */ function doPOST(blnState) { var strURL =
'http://localhost/AJAX/msas.asmx'; objXMLHTTP = new ActiveXObject('Microsoft.XMLHTTP');
objXMLHTTP.open('POST',strURL,true); if(blnState)
objXMLHTTP.setRequestHeader('SOAPAction','http:// tempuri.org/getState'); else
objXMLHTTP.setRequestHeader('SOAPAction','http://tempuri.org/getXML');
objXMLHTTP.setRequestHeader('Content-Type','text/xml'); objXMLHTTP.onreadystatechange =
stateChangeHandler; try { objXMLHTTP.send(buildSOAP(blnState)); } catch(e)
{ alert(e.description); } } /* Construct a SOAP envelope. */ function buildSOAP(blnState) { var
strSOAP = '<?xml version="1.0" encoding="UTF-8"?>'; strSOAP += '<soap:Envelope
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:xsd="http://www.w3.org/2001/XMLSchema"
xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">'; strSOAP += '<soap:Body>'; if(blnState)
{ strSOAP += '<getState xmlns="http://tempuri.org/">'; strSOAP += '<state_abbreviation/>'; strSOAP
+= '</getState>'; } else { strSOAP += '<getXML xmlns="http://tempuri.org/">'; strSOAP +=
'<name>xsl/state.xsl</name>'; strSOAP += '</getXML>'; } strSOAP += '</soap:Body>'; strSOAP +=
'</soap:Envelope>'; return(strSOAP); } /* Handle server response to XMLHTTP requests. */ function
stateChangeHandler() { if(objXMLHTTP.readyState == 4) try { var work = new
ActiveXObject('MSXML2.FreeThreadedDOMDocument.3.0');
work.loadXML(objXMLHTTP.responseText); switch(true)
{ case(work.selectNodes('//getStateResponse').length != 0):
dom.loadXML(objXMLHTTP.responseText); doPOST(false); break;
case(work.selectNodes('//getXMLResponse').length != 0): var objXSLTemplate = new
ActiveXObject('MSXML2.XSLTemplate.3.0');
xslt.loadXML(work.selectSingleNode('//getXMLResult').firstChild.xml); objXSLTemplate.stylesheet =
xslt; var objXSLTProcessor = objXSLTemplate.createProcessor; objXSLTProcessor.input = dom;
objXSLTProcessor.transform(); document.getElementById('select').innerHTML =
objXSLTProcessor.output; break; default: alert('error'); break; } } catch(e) { } } </script> </head>
<body onload="initialize()"> <div id="select"></div> </html>
Listing 2-10 The XML and XSLT Part
1 <?xml version="1.0" encoding="UTF-8"?>
2 <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
3 <xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
4
5 <xsl:template match="/">
6 <xsl:element name="select">
7 <xsl:attribute name="id">state</xsl:attribute>
8 <xsl:attribute name="name">selState</xsl:attribute>
9 <xsl:apply-templates select="//Table[country_id = 1]"/>
10 </xsl:element>
11 </xsl:template>
12
13 <xsl:template match="Table">
14 <xsl:element name="option">
<xsl:attribute name="value"><xsl:value-of select="state_abbreviation"/></xsl:attribute
15
>
16 <xsl:value-of select="state_name"/>
17 </xsl:element>
18 </xsl:template>
19</xsl:stylesheet>
view plain | print | ?
<?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="html" version="1.0"
encoding="UTF-8" indent="yes"/> <xsl:template match="/"> <xsl:element name="select">
<xsl:attribute name="id">state</xsl:attribute> <xsl:attribute name="name">selState</xsl:attribute>
<xsl:apply-templates select="//Table[country_id = 1]"/> </xsl:element> </xsl:template> <xsl:template
match="Table"> <xsl:element name="option"> <xsl:attribute name="value"><xsl:value-of
select="state_abbreviation"/></xsl:attribute> <xsl:value-of select="state_name"/> </xsl:element>
</xsl:template> </xsl:stylesheet>

2.6.2 Variations on a Theme

At first glance, the JavaScript in the previous example appears to be very similar to that shown in
Listing 2-7; however, nothing could be further from the truth. The first of these differences is due to
two calls being made to a web service and the use of XSLT to generate the HTML to be displayed in
the browser. Let's look at this in a little more detail.
First, the only thing that the initialize function does is call another function, doPOST, passing a
true. Examining doPOST reveals that the purpose of the true is to indicate what the SOAPAction
in the request header is, http://tempuri.org/getState to get information pertaining to states
and provinces from the web service, or http://tempuri.org/getXML to get XML/XSLT from
the web service. The first time through, however, we're getting the XML.
The second difference, also in doPOST, is the addition of a call to buildSOAP right smack in the
middle of the XMLHttpRequest object's send. This is how arguments are passed to a web service,
in the form of text—a SOAP request, in this instance. Checking out buildSOAP, you'll notice that
Boolean from doPOST is passed to indicate what the body of the SOAP request should be. Basically,
this is what information is needed from the web service, states or XSLT.
You'll remember the stateChangeHandler from the earlier set of examples, and although it is
similar, there are a few differences. The first thing that jumps out is the addition of a "work" XML
document that is loaded and then used to test for specific nodes; getStateResponse and
getXMLResponse. The first indicates that the SOAP response is from a request made to the web
service's getState method, and the second indicates a response from the getXML method. Also
notice the doPOST with an argument of false in the part of the function that handles getState
responses; its purpose is to get the XSLT for the XSL transformation.
Speaking of a transformation, that is the purpose of the code that you might not recognize in the
getXML portion of the stateChangeHandler function. Allow me to point out the
selectSingleNode method used, the purpose of which is to remove the SOAP from the XSLT.
The reason for this is that the XSLT simply won't work when wrapped in a SOAP response. The final
lines of JavaScript perform the transformation and insert the result into the page's HTML.
The use of XSLT to generate the HTML "on the fly" offers some interesting possibilities that the other
two methods of implementing Ajax do not. For instance, where in the earlier example the look of the
page was dictated by the hard-coded HTML, this doesn't have to be the case when using XSLT.
Consider for a moment the possibility of a page using multiple style sheets to change the look and feel
of a page. Also, with the speed of XSLT, this change would occur at Windows application speeds
instead of the usual crawl that web applications proceed at.

2.7 The Shape of Things to Come

The sole purpose of this chapter is to offer a glimpse of the shape of things to come, both in this book
and in the industry. All joking aside, this glimpse wasn't the result of mad science or any other dark art.
It is the result of several years of beating various web browsers into submission, consistently pushing a
little further to create rich application interfaces with consistent behavior.
The wide range of technologies that comprise Ajax can be a double-edged sword. On one hand, there is
extreme flexibility in the tools available to the developer. On the other hand, currently Ajax
applications are often sewn together in much the same way that DHTML pages were in the late 1990s.
Unfortunately, although the hand-crafted approach works for furniture and monsters, it relies heavily
on the skill level of Igor—eh, the developer.
In future chapters, it is my intention to elaborate on the various techniques that were briefly touched
upon in this chapter. Also, even though Ajax is currently considered a technique that takes longer to
develop than the "traditional" methods of web development, I'll show some ideas on how to reduce this
time. After all, what self-respecting mad scientist cobbles together each and every monster by hand? It's
all about tools to make tools—eh, I mean monsters.

2.8 Summary
This chapter started with a brief introduction to Ajax that included some of the origins and problems
associated with using "mad scientist stuff," such as the accusations of attempting to pass off a mock-up
as an actual application and the inability to describe just how something works. Of course, some people
still will think Corinthian helmets and hoplites at the very mention of Ajax, but you can't please
everyone.
Next there was a brief outline of the philosophy behind Ajax, which centers on the idea of not
bothering the server any more than is necessary. The goal is that of reducing, if not eliminating, the
unload/reload cycle—or "blink," as some call it. The Ajax philosophy also includes the idea of making
the client's computer work for a living. After all, personal computers have been around in some form
for close to 30 years; they should do some work—take out the trash, mow the lawn, or something.
Finally, I presented the three simple examples of how Ajax can be implemented. The first example,
although not quite Ajax, does much to show something of the first attempts to implement a web
application with the feel of a Windows application. Although it's primitive by today's standard, it is still
better than 99 percent of the web pages out there today.
Using the XMLHttpRequest object, the second example is dead on as to what is expected from an
Ajax application. Broken are the bonds that limit updates to the unload/reload cycle that has been
confronting us on the Web since Day 1. In addition, XML plays well with the concept of reducing
traffic.
The third and final example pushes Ajax to the current limits with the addition of XSLT to the mix.
XSLT allows XML to be twisted and stretched into any conceivable shape that we can imagine. No
longer are our creations limited to the parts that we can dig up here and there; we can make our own
parts on demand.