AJAX - The Complete Reference

168 Part I: Core Ideas

That’s it. You now have a table that populates itself with XML data, all without

JavaScript, and it will look exactly the same as the first version seen in Figure 4-7. The

complete example can be seen at http://ajaxref.com/ch4/xmldataislandie.html.

If after seeing this example you are fearful for your Ajax coding job, don’t worry. You

can make it more complicated very easily in an attempt to support other browsers. Your

XHTML markup will look pretty much the same since it is quite easy:

<xml id="xmlBookmarks" style="display:none;"

src="http://ajaxref.com/ch4/bookmarks.xml"></xml>

<h3>Bookmark List</h3>

<div id="responseOutput">

<table width="100%">

<tbody>

<tr><th width="15%">Bookmark</th><th width="35%">Description</th><th

width="10%">Rating</th><th width="25%">Last Visit</th><th width="15%">Total

Visits</th></tr>

</tbody>

</table>

<table width="100%" id="xmlTable" datasrc="#xmlBookmarks">

<tbody id="mainbody">

<tr id="tdmodel'>

<td width="15%"><a datafld="url" href="#" target="_blank">

<span datafld="title"></span></a></td>

<td width="35%"><span datafld="description"></span></td>

<td width="10%"><span datafld="rating"></span></td>

<td width="25%"><span datafld="lastVisit"></span></td>

<td width="15%"><span datafld="totalVisits"></span></td>

</tr>

</tbody>

</table>

</div>

This will work right away in Internet Explorer, but you need to address other browsers.

To do this, define a function to run when the page loads to see if the xmlBookmarks DOM

object is missing. If that is the case, call the function sendRequest(), which figures out

what to fetch by looking at the <xml> tag’s src attribute.

window.onload = function () {

if (!(typeof(xmlBookmarks) != "undefined" && xmlBookmarks.XMLDocument ))

sendRequest();

};

function sendRequest()

{

var xmlDoc = document.getElementById("xmlBookmarks");

var url = xmlDoc.getAttribute("src");

var xhr = createXHR();

if (xhr)

{

xhr.open("GET",url,true);

xhr.onreadystatechange = function(){handleResponse(xhr);};