In Part 2. of this AJAX guide we create a very simple XML text file and run through the steps to get the data to update into a web page without refreshing the page.

Browser support for the XMLHttpRequest object.
As mentioned in Part 1. this object is the magic key, so to get AJAX working we need to use web browsers that support it. The good news is that all the popular browsers do.. the bad news is that some don't behave in exactly the same way.
I'll give you points for guessing which one does it slightly differently? If you said IE then you'd be right.
Internet Explorer browsers use a different implementation of the XMLHttpRequest object. This implementation is called ActiveXObject, however it works in the same way.
So, if you want AJAX to work in all web browsers (including IE) then you have to include some JavaScript that checks the browser version before running the code (err! a little annoyance before we begin. Standards anyone?)

Here's some JavaScript to check the browser and set the AJAX object type. There are other ways of doing this, but this should be easily understandable if you read the comments.

function getXmlHttpRequestObject() { //gets the browser specific XmlHttpRequest Object<br /> if (window.XMLHttpRequest) { // if this exists then not IE<br /> return new XMLHttpRequest(); // sets the object<br /> } else if(window.ActiveXObject) { // else if this exists then IE<br /> return new ActiveXObject("Microsoft.XMLHTTP"); // sets the object<br /> } else { // neither object is supported<br /> alert("Your browser doesn't want to use AJAX"); //send a message<br /> }<br /> }

Before we go any further we need to make an xml data file. Here is some xml that you can copy/paste and save in a text file as data.xml - we'll need this for our first working example.
<?xml version="1.0" ?><root><data1>This is the new data from the xml file!</data1><data2>This is some more data.</data2></root>

Here are the steps that we need to get things working:

1. Create a web page with tag that has a unique ID, this will be the area that will dynamically update.
2. Create a link or button in the web page that calls a JavaScript function when it is clicked
3. Set the JavaScript function to check/set the XmlHttpRequest Object depending on browser
4. Set the connection and send a request to get the external data
5. Dynamically set the contents of the HTML using the external data

Sounds complicated, but it's pretty simple really. We'll step through one at a time, and then introduce the full working code.

Step 1. Create a new web page with a div tag. Give the div tag a unique ID, this will be the area that will dynamically update.

<br /> <div id="div1"></div> <p>

This is placed in the body of our web page.

Step 2. Create a link in the web page that calls a JavaScript function when it is clicked.
<a href="javascript:sayHello('data.xml');">Click to update the data</a>
This also passes the name of the xml file that we want to read to the function.

Step 3. Set the JavaScript function to check/set the XmlHttpRequest Object depending on browser - which we already did at the start of Part 2 and then set the result to a variable (in this case its called receiveReq).
This JavaScript can be put between the script tags of the head section of the web page.

function getXmlHttpRequestObject() { //gets the browser specific XmlHttpRequest Object<br /> if (window.XMLHttpRequest) { // if this exists then not IE<br /> return new XMLHttpRequest(); // sets the object<br /> } else if(window.ActiveXObject) { // else if this exists then IE<br /> return new ActiveXObject("Microsoft.XMLHTTP"); // sets the object<br /> } else { // neither object is supported<br /> alert("Your browser doesn't want to use AJAX"); //send a message<br /> }<br /> }<br /> var receiveReq = getXmlHttpRequestObject(); //set our browser specific XmlHttpRequest object.

Step 4. Set the connection and send a request to get the external data.
This uses the following readyState values:
0 (uninitialized)
1 (loading)
2 (loaded)
3 (interactive)
4 (complete)
The code comments explain what happens at each step. This also goes between the script tags.

function sayHello(datafile) {<br /> if (receiveReq.readyState == 4 || receiveReq.readyState == 0) //If XmlHttpRequest is not doing a request, start the new asyncronous call<br /> {<br /> receiveReq.open("GET", datafile, true); //Setup the connection as a GET call to data.xml - true means asynchronous<br /> receiveReq.onreadystatechange = handleSayHello; //Set the function when the XmlHttpRequest state changes<br /> receiveReq.send(null); //Send the request to the server for the text file<br /> }<br /> }<br /> function handleSayHello() { //Called every time the XmlHttpRequest state changes.<br /> if (receiveReq.readyState == 4) { //Check to see if it is finished, 4 indicates it has.<br /> document.getElementById('div1').innerHTML = receiveReq.responseText; //Set the contents of the HTML tag by element ID<br /> }<br /> }

Your first AJAX page should now load the text from data.xml asynchronously!

Next time in Part 3. Using responseXML and the DOM instead of responseText.

note: Drupal has added some extra line break and paragraph tags in the above text boxes - extra points for spotting and removing them before you run your code :)
tobyonline