ajax

introduction
ajax (asynchronous and xml) is a group of interrelated web development techniques used for creating interactive web applications or rich internet applications. with ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page. data is retrieved using the object or through the use of remote scripting in browsers that do not support it. despite the name, the use of and xml is not required, and they do not have to be used asynchronously.
Continue reading »

traversing the XML DOM

in one of my earlier posts about the i discussed how to bring in data via using the . i mentioned two ways of retrieving the information from an external file. the first was responseText and the other was responseXML. in this article i will demonstrate how to use the responseXML to retrieve information from an external xml file using the xml dom. (for this example lets assume you are using the xml example from the post, and that you have already returned the xml dom object and stored it in xmlDoc)

to get the information out of this file we will need to use getElementsByTagName. this will return an array containing all dom object that match the tag we reference:

var user = getElementsByTagName("user");

in the example we had 2 user elements. so the variable user now contains both those elements. now lets create a loop so we can cycle through all the elements a pull out whatever we need.

for (var i = 0; i < user.length; i++) {
}

now within the loop we need to add whatever code we want to retrieve the information we desire. lets say we want to grab the name and age tags. since these are childNodes of the user tag, we will add a second loop to cycle through all childNodes of the current user iteration.

	var child = user[i].childNodes;
	for (var j = 0; j < child.length; j++) {
	}

so now we are looping through every user element, and for each one we are then looping through all its childNodes. Now we can pull out the information withing the childNodes and display that information on the screen:

		document.write(child[j].firstChild.nodeValue);

the firstChild represents the text stored withing the element’s tags, however it doesn’t represent the value of the text, just the textNode itself. nodeValue represents the actual value of the textNode. so in plain english, that line of code is retrieving the child element, then getting the text node out of the element, retrieving the value of that text, and displaying it. if we put the whole code together it looks like this:

var user = getElementsByTagName("user");
for (var i = 0; i < user.length; i++) {
	var child = user[i].childNodes;
	for (var j = 0; j < child.length; j++) {
		document.write(child[j].firstChild.nodeValue);
	}
}

and will out put:

John Doe25Jane Smith28

with a little added formatting, or perhaps the use of some to create new elements, the text can be formatted and displayed in a slightly more appealing manor, but you get the point.

using the XMLHttpRequest

with all the emerging web applications out there, ajax has come overwhelmingly popular as a means to have active content on a page update without the need to re-load. one of the easiest way to achieve this is to use the XMLHttpRequest.

i have stated before that i am not an advocate of writing browser detection scripts since it makes more sense to check for the appropriate method when carrying out a task. in order to achieve this with the XMLHttpRequest is quite simple: write a function that attempts to create an XMLHttpRequest a number of ways and returns the results on success or an error on failure.

the function:

function new_request() {

	if (typeof XMLHttpRequest != "undefined") {
		return new XMLHttpRequest();
	} else if (typeof ActiveXObject != "undefined") {
		return new ActiveXObject("Microsoft.XMLHTTP");
	} else {
		throw new Error("XMLHttpRequest not supported");
	}

}

simple enough right? now whenever you need to make an XMLHttpRequest a few lines of code will get the information you need

using the function:

var url = "/my_file"; // the path to the file you want to use
var request = new_request();
request.open("GET", url, true);
request.onreadystatechange = function() {
	if (request.readyState == 4) {
		// the code you want to run when the file/data is loaded
	}
}

XMLHttpRequest can return two forms of data: xml dom object and text. this means, depending on what you ask it to do withing the request.readyState == 4 statement, you will be given a certain type of data. if you are simply making a call to a text file that contains a paragraph and you want to display that paragraph you would use the following code:

var txt = request.responseText

while this can be usefull if you have many small txt files that make up the content of a page, i feel it is infinitely more powerful to store the same data in an xml file and just traverse the file to get the data you need from it. to do this you would use the following line instead:

var xmlDoc = request.responseXML

this would allow you to work with the xml dom to pull values out of the file as you need them. so the full code to bring the data in would be the following:

var url = "/my_file.xml"; // the path to the file you want to use
var request = new_request();
request.open("GET", url, true);
request.onreadystatechange = function() {
	if (request.readyState == 4) {
		// the file will be read in as an xml dom object
		var xmlDoc = request.responseXML;
	}
}

you can now traverse the xml dom object to get whatever data you need out of the file. i will be writing instructions on how to traverse the xml dom in another post so this is where i will end.