AJAX Basics
Note: I wrote this back some time ago (27th, February 2007) on another site but thought this warranted a re-post. Much has been done by way of AJAX frameworks, IDEs, stadards etc but I feel that the basics are still important and provide the foundation for understanding.
I’ve been intending to write this article for a while now. This desire started close to a year ago after attending several break-out sessions at Java One. It was one of these specifically that the core of what AJAX was and is was detailed out. The following is an attempt to give a basic tutorial on how to get started. Please note that I’m assuming a decent knowledge of Java Script and events.
Contrary to what I found in more than one Google search, AJAX is rather simple. What i found was that the majority of it all is related to one simple and small key piece. XMLHTTPRequest (or for those that are forced to code for I.E. the ActiveX object Microsoft.XMLHTTP) is the key component that make this whole thing go. The rest is just the “extras”.
First off, this “event” will be captured using the onChange() Java Script function within the <select> tag. If you are not familiar with Java Script events or at least this event, please check out the tutorial at QuirksMode or a Google search for JavaScript Events.
Now let’s assume that we have already created a web accessible script or something that produces a document that is structured like the following.
<?xml version="1.0" encoding="UTF-8" standalone="yes"?> <response> <code>ID or Code</code> <display>Display Value</display> </response>
And next we make a request to a server for information based on this data. Now we see where XMLHTTPRequest comes into play. This simple “function” will look to retrieve XML from a specified source and return it all without reloading the browser window. The following code will give you an idea of what’s going on:
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = processReqChangeXML;
req.open("GET", sendURL, true);
req.send(null);
}
This brings us to the step of capturing the event using the ReadyState value from our “req” variable earlier. The following is a snippet from a library I created and detail below.
if (req.readyState == 4) {
//-- only if "OK" from web server
if (req.status == 200) {
response = req.responseXML.documentElement;
response.getElementsByTagName('display')[a].firstChild.data;
}
}
At this point you should be looking at two functions and a script that produces an XML document. The rest of our work is simply putting all the pieces together. Now at this point you may be lost so let’s get some actual code together. Start off by downloading this AJAX library written for a series of applications over the last few months. Make sure you have your XML producing script ready and running. Paste the following in an HTML page and add a couple of values for the dropDown1 select box.
<select name="dropDown1" id="dropDown1" onChange="loadXMLDoc(this.form, 'dropDownCode', this.value, '/scriptName.php');" > <option value=""></option> </select> <select name="dropDownSelect" id="dropDownSelect"> <option value="">Please select from above list</option> </select>
Please let me know what issues you run into. The AjaxLib.js file is meant to be minimalistic and also meant as a tutorial aid. Good luck and have fun.
