Welcome to the first tutorial of these series of learning in 20 minutes. The aim of this tutorial is to show the basics of new technologies related to computer science. We all know that the people who are working in this business have a lack of free time to discover new technologies. So that, this is the objective of these series of tutorials, fill these little spots and introduce you to new concepts. With all this new information you will be able to detect whether or not it is interesting for your project.

1. What is AJAX ?

Let’s try to explain it fast. However if you already know jump to the next section, don’t waste your time.

AJAX was created by Jesse James Garret and it means Asynchronous JavaScript And XML. Basically, AJAX will allow you to execute instructions on the server side without reloading the page.

2. What is AJAX made of ?

AJAX is not a programming language, it is just a web development technique used for creating interactive web applications, so basically it is a way to do things. AJAX is made of 4 components :

  • JavaScript
  • XMLHttpRequest
  • CSS
  • PHP / CGI / or any other

In this fast introduction to AJAX I will just explain what is XMLHttpRequest. So that, I assume that you already know the other 3 components (JavaScript, CSS and PHP or others). Well, basically XMLHttpRequest is the object that will allow the client to request information to the server.

3. Our first AJAX application

In this part, we will develop an easy application :) Basically, there will be a button and when the user click it, the website will request the server time, afterwards it will be shown without reloading the website. Doesn’t it sound useful ?

Step 1 - Creating the XMLHttpRequest object

Let’s start getting an instance of the XMLHttpRequest object. It is quite easy to do it but if you want that your application work well under any navigator you should use the following JavaScript function.

  1. function getXMLHTTPRequest() {
  2.    try {
  3.       ret = new XMLHttpRequest(); /* Mozilla, Safari ... */
  4.    } catch(e) {
  5.       try {
  6.          ret = new ActiveXObject("Msxml2.XMLHTTP"); /* IE ... */
  7.       } catch (e) {
  8.          try {
  9.             ret = new ActiveXObject("Microsoft.XMLHTTP");
  10.          } catch (e) { ret = false; } /* Error */
  11.       }
  12.    }
  13.    return ret;
  14. }

Once we have this function implemented we just need to get the object. This could be done using the following sentence.

  1. var objectXMLRequest = getXMLHTTPRequest();

Step 2 - Creating our application

Right now the only thing that you will need to do is initialize the object, this part is really important since XMLHttpRequest needs a “callback” function in order to communicate with website when it has information coming from the server (remember that AJAX uses Asynchronous communication). The callback function will look like this :

  1. function StateChanged() {
  2.    if (objectXMLRequest.readyState == 4) {
  3.       if(objectXMLRequest.status == 200) {
  4.          document.getElementById('divtime').innerHTML = objectXMLRequest.responseText;
  5.       }
  6.    } else {
  7.       document.getElementById('divtime').innerHTML = '<img src="anim.gif" alt="" />';
  8.    }
  9. }

This function will be automatically called by the object and basically it knows what to do anytime. For instance, when readyState is 4 it means that the client has received the information correctly, and if not what we will do is showing the classical loading icon. To do this you just have to get the element divtime and change its innerHTML property. When do you use this function ? Let’s say that we want an application to receive the server time once we have clicked a button. Then, we will only need to associate the onclick event to the following function.

  1. function getTimeFromServer() {
  2.    var myurl = 'serverside.php';
  3.    objectXMLRequest.open("POST", myurl, true);
  4.    /* Callback function */
  5.    objectXMLRequest.onreadystatechange = StateChanged;
  6.    /* We don't need to send information to the server */
  7.    objectXMLRequest.send(null);
  8. }

Of course, we can change this function in order to send information to the server, just imagine an application that sends emails, we will most likely need to send to the server some fields, such as from, to, and even the body of the email, on the server side we will just need to call the function mail, doesn’t it sounds easy ? It actually does. On the server side we will have a simple php application that will print the time on the moment it receives the petition.

  1. header('Content-Type: text/xml');
  2. echo date('H:i:s');

If you prefer I have uploaded a compressed file with the source code and everything you would need to run this application.

Download - Source Code

View - Demo

Ending

This is just the beginning, now, you are ready to do whatever you want, you can add mysql queries or even read rss, whatever your imagination brings you ! I hope the tutorial has been really useful for you, and that you have enjoyed it so much !