How to Develop Web Applications with Ajax, Pt. 1 | 2

[previous]

How to Develop Web Applications with Ajax, Pt. 1

Each time the state of the XMLHttpRequest changes, the “onreadystatechange” event is triggered. By using “xmlObj.onreadystatechange = function(){ … }” we build and run a function on-the-fly each time the state of the XMLHttpRequest object changes. There are a total of 5 states, starting with 0 and going through 4.

0 – uninitialized (before the XMLHttpRequest begins) 1 – loading (once the XMLHttpRequest has been initialized) 2 – loaded (once the XMLHttpRequest has gotten a response from the server) 3 – interactive (while the XMLHttpRequest object is connected to the server) 4 – complete (after the XMLHttpRequest has done everything it was told to and is finished working)

The fifth state (number 4) is when we are certain that data will be available, so we check the xmlObj.readyState for “4” to see if data is available. If it is, we run the updateObj function. That function takes two parameters: an element ID on the current web page (the element on the current web page to update) and the data to fill in that element. The way this function works will be explained in more detail later.

Our web page’s P tag has an ID of “xmlData,” that’s the paragraph we’re going to update. The data we’re getting is from the XML file, but it’s a bit complicated. Here’s how it works.

The xmlObj.responseXML property is a DOM object – it’s a lot like the “document” object, except it’s for the remote XML file. In other words, xmlObj.responseXML is the “document” object if you ran a script in data.xml. Since we know this, we can retrieve any XML node via the “getElementsByTagName” method. The data is contained in the XML node is accurately named “<data>” so our task is simple: retrieve the first (and only) data node. Thus, xmlObject.responseXML.getElementsByTagName(“data”)[0] returns the first <data> node in the XML file.

Note: it returns the XML node, not the data within that node – the data must be extracted by accessing properties of that XML node, which is the next step.

After that, it’s as simple as retrieving the data by specifying “firstChild.data” (firstChild refers to the text node which is contained within the <data> node, and the “data” property is the actual text of that text node).

xmlObj.open ('GET', file, true);
xmlObj.send ('');

This is the last bit in our ajaxRead function. What does it say? Well, the “open” method of the xmlObj opens a connection to the server (via a specific protocol, specified here as “GET” – you can use “POST” and others as well), requests a file (in our case, the variable “file” that was sent as a parameter to the ajaxRead function – data.xml), and whether JavaScript should handle the request synchronously (false) or asynchronously (true, the default). Since this is asynchronous Javascript and XML, we will be using the default asynchronous method – using since synchronous won’t work in this case.

The last line of our function simply sends an empty string literal back to the server. Without this line, the ready state of xmlObj will never get to 4, so your page will never update. The send method can be used for other things, but today we are only retrieving data from the server – not sending to it – so I won’t go into any more detail about the send method in this article.

function updateObj(obj, data){
  document.getElementById(obj).firstChild.data = data;
}

Now to explain the updateObj function a little more: this function updates any specific element on the current web page with a new value. Its first parameter, “obj,” is simply a specific ID of an element on the current web page – this is the object that will be updated; its second parameter, “data,” is a string that specifies the new value to be placed in the object that is to be updated (“obj”). Normally, it would be advisable to check and be sure that an element on the current page has the ID specified in “obj,” but that check isn’t necessary due to the level of isolation of our script. The way this function updates is similar to the way we retrieved data from the “data” node in the XML file earlier – it locates the element it wants to update (this time by that element’s ID instead of its tag name and index on the page) and sets the data of the first child (the text node) of that element to the new data. If you wanted to update an object with HTML instead of just plain text, you could also use document.getElementById(obj).innerHTML = data.

That’s all there is to it

The concept is simple, and the code isn’t too difficult. You want to read a file from somewhere else without having to reload the web page. There is enough flexibility to allow you to do all sorts of things, including posting data from forms without reloading the web page and using a server-side language to generate the XML file dynamically. If you want to be a step ahead, remember that a reference is always helpful – oh, and remember that Google is your friend. In another article, I’ll explain how you can further use Ajax with server-side technologies to make powerful web applications.

About the Author

Jonathan Fenocchi is a Web developer who primarily works in the fields of Web Design, client-side scripting, and PHP scripting. His web site is located at: www.slightlyremarkable.com

[previous]

Created: March 27, 2003
Revised: August 2, 2005

URL: https://webreference.com/programming/javascript/jf/column12/1