 |
 |
 |
 |
 |
 |
Free PHP Scripts
DbCon
AJAX Series: Tutorial #3 - The X in AJAX stands for XML
written by vegu on 29 Jan, 2007 10:55:01
The X in AJAX stands for XML, however most AJAX tutorials i come across online only seem to deal with the raw content responseText property.I imagine it is because it is sufficient most of the time. However using XML as transfer protocol can be an advantage because you do not need to parse the content manually and can work with the data in a structured way right way.
Whenever the content type of the content received by the xml request is xml the responseXML property is set. It holds a DOM object created from the XML received that we can walk through as we would do with any other DOM object.
Let's start by making a XML document for our client application to request. We do this by making a simple php script.
Contents of xml.php:
code: php<?
/* first we set the content type of the data created to text/xml, so the
* ajax request will later know that it is dealing with XML data
*/
header('Content-Type: text/xml');
/* then we output a little XML */
?>
<tutorial>
<alert msg="Hello World!" />
</tutorial>
Okay now when we request this file using ajax it will see that it's holding XML data and the responseXml property of the XMLHttpRequest object will be set upon receiving the data from the server.
The ajax_new() function is a function i introduced in the first AJAX tutorial on this site, it simply returns a XMLHttpRequest with cross browser support, if you have your own function already, use it.
code: js
/* creating a XMLHttpRequest object */
ajax = ajax_new();
ajax.onreadystatechange = function() {
/* if request was sent successfully and a response was received
* we can work with the responseXml property of the object
*/
if(ajax.readyState == 4 && ajax.status == 200) {
var xml = ajax.responseXML;
/* the first node of the xml dom object is a #document node, it's
* firstChild property points to the tutorial node (or tag if you like)
* that we set in our XML file earlier
*/
var tutorial = xml.firstChild;
/* the first child of our tutorial node again points to the alert
* node (or tag if you like) that we defined in our XML file earlier
*
* Of course you can also go through all child nodes of any xml element
* with a for loop
*/
var n,N;
/* now we can loop through the child elements of the tutorial node
* one of the elements will be the alert element that we defined the
* msg attribute for. When the loop finds the element we will retrieve
* the msg string using the getAttribute method.
*
* In order to find the right element we simply check it's node name
* and if it's nodeName property is 'alert' it means it's the
* node we're looking for. There are more ways to do this of course.
*/
for(n in tutorial.childNodes) {
N = tutorial.childNodes[n];
if(N.nodeName == 'alert') {
alert(N.getAttribute('msg'));
}
}
}
}
/* opening connection */
ajax.open('GET', 'xml.php', true);
/* sending request */
ajax.send(null);
That's basically it, the way AJAX was intended to be used :)
So why use it instead of just reading data from responseText? Well both ways have their advantages and disadvantages. It also depends on the complexity of your project.
Using XML as a protocol saves you the time from having to develop your own protocol structure. However if bandwidth is an issue – for example if youre making a web game that updates in real time – you might want to use a bitmask style protocol. Meaning you use delimiters for operations and arguments, but ill explain that further in the next tutorial.
With XML you're provided with a structured way of handling server client communication.
For example lets say you send an AJAX request to a php script, the php script attempts to connect to a database, but the connection fails for whatever reason. PHP then prints the XML data accourdingly
code: html<document>
<error msg="mySQL could not connect, OH MY GOD" />
</document>
And you can easily process that data on the client side. You could get all error elements or you could just work through all elements in the tree and handle them any way you like.
Related Posts
- AJAX Series: Tutorial #1 - Sending a simple request
- AJAX Series: Tutorial #2 - Sending POST requests
- AJAX Series: Tutorial #4 - When bandwidth is an issue
Your Comment
Comments
No comments yet.
