AJAX Introduction
Ever wondered what AJAX is? AJAX stands for Asynchronous JavaScript and XML. It is not a programming language in itself but rather a combination of different web development techniques. Furthermore, AJAX technology is not new though it has only been popularized recently especially by Google (Google Maps, GMail, Google Calendar, etc.)
At the heart of AJAX is JavaScript’s XMLHttpRequest Object. It is through this object that the browser asynchronously sends a request to the server thereby eliminating the need for a page reload. Without AJAX, the typical flow would be:
- User enters data into a field
- User presses submit button
- Browser sends form data to server and waits for a response
- Server responds back with an entire page
- Browser shows the returned page from the server
While the above approach works and is still being used by lots of websites, it is pretty cumbersome for the server and for the browser thereby taking more time. With AJAX, the flow would be
- User enters data into a field
- User presses submit button
- XMLHttpRequest sends data to server asynchronously
- Server responds back only with the data needed and not the entire page
- Javascript updates the sections of the page that only needs to be updated
While there are the same number of steps, the browser and especially the server only process data that needs to be processed and eliminates the need of an entire page reload. But how is it done?
There are many AJAX libraries available that simplifies things allowing the programmer to focus on the more important things to be done. You may use those and things will work just the same but since the purpose of this article is to introduce you to AJAX, allow me to show you my simple little function that handles all my AJAX needs.
* ajax_call function – this does the hard work
* accepts three parameters:
* url – the url of the server side script to call
* callback_function – the function to call when data is retrieved from the server
* error_function – the function to call when an error occurs
*/
function ajax_call (url, callback_function, error_function) {
var xmlHttp = null;
try {
// for standard browsers
xmlHttp = new XMLHttpRequest ();
} catch (e) {
// for internet explorer
try {
xmlHttp = new ActiveXObject ("Msxml2.XMLHTTP");
} catch (e) {
xmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");
}
}
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4)
try {
if (xmlHttp.status == 200) {
// we got the data, let’s call the callback function
callback_function (xmlHttp.responseText);
}
} catch (e) {
// oops we have an error, call the error function
error_function (e.description);
}
}
// open the url
xmlHttp.open ("GET", url);
// and send the data
xmlHttp.send (null);
}
The function is pretty self-explanatory so I won’t explain every line here (I’m feeling lazy). Note that this function only handles GET requests and does not handle POST but it can be easily modified to handle POST as well. I’ll leave that to you. Using it is pretty simple. Here’s an example:
* first we create a callback function to process the returned data
* in this example, we’ll just show the data in an alert box
*/
function fxn_callback (data) {
alert (data);
}
/*
* for error handling, we specify an error handler which simply
* shows an alert box containing a description of the error
*/
function fxn_error (err) {
alert ("Error: " + err);
}
/*
* then we call our ajax function passing three parameters
* the url – in this case a plain text file
* the callback function
* and our error function
*/
ajax_call ("somefile.txt", fxn_callback, fxn_error);
As you can see, it’s pretty simple. Also you may notice that we’re just returning a text file instead of an XML file. Well, that’s the beauty of it. XMLHttpRequest will return exactly what the server gave it back – XML, HTML, or just plain text and it’s up to your callback function to process that data. In my case, I prefer returning data in plain text so my server side script (PHP in this case) looks something like this.
// do some work here based on the data passed to us via GET …
echo "our return value";
exit;
?>
See how I echo the return value in my PHP script? That’s important because what’s been echoed in my PHP script is the data that will be returned to our AJAX function. Also, I added “exit;” at the end of my script to make sure that no extra data will be sent back.
To sum it all up… AJAX is not new – it’s been there for a while but rather untapped by the majority of web developers. AJAX is pretty easy to understand because it’s not a new programming language. It’s just plain old Javascript. Lastly, AJAX can process both XML and plain text data, it’s really up to you to choose.
[...] pretty self-explanatory but if you’re a bit confused then read the AJAX Introduction I wrote previously so you can grasp the idea of what’s being done in the Javascript code [...]
awesome. i’ve been using mootools and prototype for almost 2 years na but i never bothered to look under the hood mdash; code terror i guess. but this made sense to me! ^^