Ajax for Web Application Developers

MPAA - Cheap Flights - Web Advertising - Bad Credit Mortgages - Credit Cards

View Full Version : Ajax for Web Application Developers - anyone had any luck?

strivinglife

Nov 26th 2006, 5:23 am

I recently picked up a copy of Kris Hadlock's Ajax for Web Application Developers, and after fighting with actually reading the copy (since it appears to be written from the perspective of one who learns by reading, not doing), I'm stumped.

Anyone have a copy of this book, and have a functional project through Chapter 7?

My second post will contain the various files that I'm pulling in - hopefully someone can determine what's happening.

The loading data is getting dumped in correctly, the XML file is getting read, but it's not getting inserted into the body div.

Thanks.

strivinglife

Nov 26th 2006, 5:25 am

Ajax.js

Ajax = {};

Ajax.makeRequest = function(method, url, callbackMethod) {
this.request = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("MSXML2.XMLHTTP");
this.request.onreadystatechange = callbackMethod;
this.request.open(method, url, true);
this.request.send(url);
}

Ajax.checkReadyState = function(_id) {
switch(this.request.readyState) {
case 1:
document.getElementById(_id).innerHTML += 'Loading ...';
break;
case 2:
document.getElementById(_id).innerHTML += 'Loading ...';
break;
case 3:
document.getElementById(_id).innerHTML += 'Loading ...';
break;
case 4:
AjaxUpdater.isUpdating = false;
document.getElementById(_id).innerHTML += 'Ready.';
return this.request.status;
default:
document.getElementById(_id).innerHTML = 'An unexpected error has occurred.';
}
}

Ajax.getResponse = function () {
if (this.request.getResponseHeader('Content-Type').indexOf('xml') != -1) {
return this.request.responseXML.documentElement;
} else {
return this.request.responseText;
}
}

========================

AjaxUpdater.js

AjaxUpdater = {};

AjaxUpdater.initialize = function() {
AjaxUpdater.isUpdating = false;
}

AjaxUpdater.initialize();

AjaxUpdater.Update = function(method, service, callback) {
if (callback == undefined || callback == '') {
callback = AjaxUpdater.onResponse;
}
Ajax.makeRequest(method, service, callback);
AjaxUpdater.isUpdating = true;
}

AjaxUpdater.onResponse = function() {
if (Ajax.checkReadyState('loading') == 200) {
AjaxUpdater.isUpdating = false;
document.getElementById("body").innerHTML = "Hello chap.";
}
}

strivinglife

Nov 26th 2006, 5:30 am

Index.cfm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="AjaxUpdater.js"></script>
<script type="text/javascript" src="Ajax.js"></script>
<script type="text/javascript">
function onResponse() {
if (Ajax.checkReadyState('loading') == "OK") {
var record = Ajax.getResponse().getElementsByTagName('categories');
for (var i=0; i<record.length; i++) {
document.getElementById("body").innerHTML += Ajax.getResponse().getElementsByTagName('category')[i].firstChild.data + "<br />";
}
}
}
function initialize() {
AjaxUpdater.Update("GET", "email.xml", onResponse);
}
</script>
</head>

<body onload="javascript:initialize();">
<p>This is some text.</p>
<div id="loading"></div>
<p>And even more text.</p>
<div id="body"></div>
<p>This is some more text.</p>

</body>
</html>

=========================

email.xml

<?xml version="1.0" encoding="iso-8859-1"?>
<data>
<categories>
<category>From</category>
<category>Subject</category>
<category>Date</category>
</categories>
<row>
<items action="alert('Grace Hopper');" icon="img/mail.gif">
<item><![CDATA[Grace Hopper]]></item>
<item><![CDATA[<b>BUG Found</b>]]></item>
<item>2006-03-31 09:27:26</item>
</items>
</row>
<row>
<items action="alert('Pi Sheng');" icon="img/mail.gif">
<item><![CDATA[Pi Sheng]]></item>
<item><![CDATA[Movable type]]></item>
<item>2006-01-15 12:32:45</item>
</items>
</row>
</data>

That should be the four files. The 'Loading ...' text is getting pulled in, but the body div's innerHTML isn't changing. Using FireBug, I've determined that the data is getting pulled in, but ...

ajsa52

Nov 26th 2006, 3:14 pm

I write my first AJAX application three years ago (developed from my own without any books).
These days is easier with libraries like prototype.js (http://www.sergiopereira.com/articles/prototype.js.html)

strivinglife

Nov 26th 2006, 5:18 pm

Of course, you can use already created libraries. However, if you don't know what's going on, you can't fix any problems that arise.

Anywho, that's why I decided to learn how to work from nothing.

Since you've developed your own, any ideas on the above problem?

ajsa52

Nov 27th 2006, 8:56 am

Since you've developed your own, any ideas on the above problem?

Suggestions:
- On your onResponse function check against 0, not against "OK"
- On Ajax.getResponse maybe the getResponseHeader function is returning "" if your xml file is local.

Anyway, you should debug your code step by step, for example adding alert() calls.

----

Another method for putting data on HTML from XML instead of your javascript code (inside of onResponse function), is loading a XSL file, and a XSLT transformer. But this is for advanced users, especially when adding interactive parameters to the XSLT transformer.

Good luck.

strivinglife

Nov 28th 2006, 5:28 am

Thanks, I'll give your first suggestion a try and let you know if that, or the alerts, gets me anywhere.

strivinglife

Dec 3rd 2006, 6:30 pm

onResponse should be changed from "OK" to 200.

That was the problem. Thanks for pointing me towards that inconsistency.