Ajax, by which I mean XMLHTTPRequest, is almost always used with some sort of server platform, such as PHP or Java, usually to retrieve data from a database. This might scare off some people from using XMLHTTPRequest, especially those who don't have the ability or knowledge to do server-side scripting. This is fine. You can actually do some things without it. I'll do a simple example with populating select boxes.
HTML
First off, we need some HTML to work with. For this example, we'll have two select boxes. When the first one changes, we want the second one to fill up with data from the server.
<form>
<select id="one">
<option value="">Please choose one...</option>
<option value="colours">Colours</option>
<option value="numbers">Numbers</option>
<option value="letters">Letters</option>
</select>
<select id="two">
</select>
</form>
Data
Now we need some data files. Before I begin, I'll just mention that there are several ways to get back data from the server. Some people use XML, others use something called JSON which stands for JavaScript Object Notation, you can also get back raw HTML or JavaScript, and then there are other ways as well. For this example, I'm going to use JSON because it's pretty simple. You can do really advanced stuff with JSON, but I'm just going to use a JavaScript array. I'm going to create a file for each select option in select box 'one'. Each file will have an array of values to put into select box 'two'.
Update: technically this isn't JSON, even though it works. More information here.
select_colours.js:
['red','orange','black','purple','yellow','forest green']
select_numbers.js:
['3242','84930','12','5433344','8837845','1980']
select_letters.js:
['G','f','s','j','P','m']
This example isn't using a lot of data, but chances are in real life, you wouldn't use Ajax unless you had a lot of extra data to get back from the server. Otherwise, it wouldn't be worth going to the server to get the data, and you might as well just put the data directly into the page.
JavaScript
Any usage of XMLHTTPRequest starts with a function similar to this. It finds the XMLHTTPRequest object in a way that works across all browsers, then it sets up a callback function to do the dirty work, and sends the request to a url:
function httpRequest(url, callback) {
var httpObj = false;
if (typeof XMLHttpRequest != 'undefined') {
httpObj = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try{
httpObj = new ActiveXObject('Msxml2.XMLHTTP');
} catch(e) {
try{
httpObj = new ActiveXObject('iMicrosoft.XMLHTTP');
} catch(e) {}
}
}
if (!httpObj) return;
httpObj.onreadystatechange = function() {
if (httpObj.readyState == 4) { // when request is complete
callback(httpObj.responseText);
}
};
httpObj.open('GET', url, true);
httpObj.send(null);
}
Now, we'll add three more JavaScript functions. First, we'll add a callback function to take our JSON data and put it into the select box:
function fillSelect(JSON) {
var selectTwo = document.getElementById('two');
// clear out existing options
while (selectTwo.options.length) {
selectTwo.options[0] = null;
}
// fill with new options from JSON array
var data = eval(JSON);
for (var i=0;i < data.length;i++) {
selectTwo.options[selectTwo.options.length] = new Option(data[i]);
}
}
Notice we use the eval() function to turn our JSON text string into a real JavaScript object.
Next, we'll add an event handler function to react when the first select box changes. This will send off the actual XMLHTTPRequest:
function onSelectChange() {
// get the value of the selected option in select box 'one'
var selectOne = document.getElementById('one');
var selectedOption = selectOne.options[selectOne.selectedIndex].value;
if (selectedOption != "") {
// find the appropriate javascript file
httpRequest('select_' + selectedOption + '.js', fillSelect);
} else {
// empty the options from select box two
fillSelect('[]');
}
}
Lastly, we need to assign the onSelectChange() event handler to the select box. We'll do this in a window.onload function:
window.onload = function() {
var selectOne = document.getElementById('one');
selectOne.onchange = onSelectChange;
}
Conclusion
There you have it! If you want to see it in action, click on the files listed below:
Published on May 23rd, 2006. © Jesse Skinner
