1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Ajax for Web Application Developers - anyone had any luck?

Discussion in 'JavaScript' started by strivinglife, Nov 26, 2006.

  1. #1
    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 26, 2006 IP
  2. strivinglife

    strivinglife Peon

    Messages:
    250
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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;
    	}
    }
    Code (markup):
    ========================

    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.";
    	}
    }
    Code (markup):
     
    strivinglife, Nov 26, 2006 IP
  3. strivinglife

    strivinglife Peon

    Messages:
    250
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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>
    
    Code (markup):
    =========================

    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>
    Code (markup):
    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 ...
     
    strivinglife, Nov 26, 2006 IP
  4. ajsa52

    ajsa52 Well-Known Member

    Messages:
    3,426
    Likes Received:
    125
    Best Answers:
    0
    Trophy Points:
    160
    #4
    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
     
    ajsa52, Nov 26, 2006 IP
  5. strivinglife

    strivinglife Peon

    Messages:
    250
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #5
    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?
     
    strivinglife, Nov 26, 2006 IP
  6. ajsa52

    ajsa52 Well-Known Member

    Messages:
    3,426
    Likes Received:
    125
    Best Answers:
    0
    Trophy Points:
    160
    #6
    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.
     
    ajsa52, Nov 27, 2006 IP
    strivinglife likes this.
  7. strivinglife

    strivinglife Peon

    Messages:
    250
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Thanks, I'll give your first suggestion a try and let you know if that, or the alerts, gets me anywhere.
     
    strivinglife, Nov 28, 2006 IP
  8. strivinglife

    strivinglife Peon

    Messages:
    250
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #8
    onResponse should be changed from "OK" to 200.

    That was the problem. Thanks for pointing me towards that inconsistency.
     
    strivinglife, Dec 3, 2006 IP