AJAX is WEB 2.0 programming technology

What is AJAX?

AJAX is an acronym for Asynchronous JavaScript and XML. It is a development technique for creating interactive web applications. Unlike classic web pages, which must load in their entirety if content changes, AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes.

AJAX uses a combination of:

CSS, for marking up and styling information.
The Document Object Model accessed with a client-side scripting language like JavaScript
to dynamically display and interact with the information presented.
The XMLHttpRequest object to exchange data asynchronously with the web server.
XML is sometimes used as the format for transferring data between the server and client,
although any format will work.

Talking to the Server

Once the DOM event has occurred on the webpage, we need to obtain an XMLHttpRequest Object. This is
done using a function like the following. We need to write it this way to accommodate different browsers.
Notice that we set the callback function using onreadystatechange.


var obj;

function ProcessXML(url) {
  // native  object

  if (window.XMLHttpRequest) {
    // obtain new object
    obj = new XMLHttpRequest();
    // set the callback function
    obj.onreadystatechange = processChange;
    // we will do a GET with the url; "true" for asynch
    obj.open("GET", url, true);
    // null for GET with native object
    obj.send(null);
  // IE/Windows ActiveX object
  } else if (window.ActiveXObject) {
    obj = new ActiveXObject("Microsoft.XMLHTTP");
    if (obj) {
      obj.onreadystatechange = processChange;
      obj.open("GET", url, true);
      // don't send null for ActiveX
      obj.send();
    }
  } else {
    alert("Your browser does not support AJAX");
  }
}

AJAX: Here are the attributes and methods for the XMLHttpRequest Class:

Attributes

readyState	The readyState code changes value from 0 to 4 during a request cycle: 0: not initialized. 1: connection established. 2: request received. 3: processing. 4: finished and response is ready.
status	200: "OK" 404: Page not found.
onreadystatechange	callback method assigned via this attribute
responseText	holds the response data as a string of characters.
responseXml	holds the response data as XML data.

Methods

open(mode, url, boolean)	mode: type of request: GET or POST url: the location of the file boolean: true (asynchronous) or false (synchronous).
send("string")	null for a GET command (in native mode; null not passed with ActiveX)

Here is an example of a callback function which is registered via the onreadystatechange attribute.


function processChange() {
    // 4 means the response has been returned and ready to be processed
    if (obj.readyState == 4) {
        // 200 means "OK"
        if (obj.status == 200) {
            // process whatever has been sent back here:
        // anything else means a problem
        } else {
            alert("There was a problem in the returned data:\n");
        }
    }
}

The Rest of the Pieces

Let's use the functions we presented above in a little application to show how all the pieces fit together. We will
allow a user to enter a user name, then send that name to a server to check that it is not in use by anyone else.

First, our html:


<BODY>
Enter your Username:  < id="username" name="username" type="text" onblur="checkUserName(this.value,'')" >
</BODY>

And here is the missing piece on the client side: The function called from the html which gets the whole process going.


function checkUserName(input, response) {
  // if response is not empty, we have received data back from the server
  if (response != '') {
    // the value of response is returned from checkName.php: 1 means in use
    if (response == '1') {
       alert("username is in use");
    } else {
    //  if response is empty, we need to send the username to the server
       url  =  'http://localhost/xml/checkName.php?q=' + input;
       ProcessXML(url);
    }
  }
}

Note that the response value must actually be parsed from either text or XML returned
from the server. The processChange() callback receives the returned data.
Here is a little more detail on what happens in that function:


function processChange() {
    // 4 means the response has been returned and ready to be processed
    if (obj.readyState == 4) {
        // 200 means "OK"
        if (obj.status == 200) {
            // process whatever has been sent back here:
            // we need to parse the returned data (text or XML)
            // and then call checkUserName again with response set
            // to the appropriate value.
        // anything else means a problem
        } else {
            alert("There was a problem in the returned data:\n");
        }
    }
}

All we need to make it all work is a server-side script or servlet to catch the GET request, do the check
on the user name, and return the response. Here is an example in PHP - everything is hard-coded which is
not what it would really look like, but you get the idea.


<?php header('Content-Type: text/xml');

function checkName($q) {
  if (isset($q)){
    switch(strtolower($q)) {
      case  'maggie' :
          return '1';
          break;
      ...
      default:
          return '0';
    }
  } else {
    return '0';
  }

}
?>

Google and AJAX

AJAX has gained popularity over the past few years due in part to Google's use of the technology
in Gmail, Google Maps, and other web-based applications.

The interesting thing about this search capability is that users don't have to leave the page to do a search,
as results are loaded right below the search box using AJAX. Search results are sorted into 4 different
categories: local, web, video, and blogs, and can be displayed in a list or with tabs.
In addition, users can use the copy button on results to add them to other content (such as blog
post comments).

Ajax PHP Tutorial | Free PHP Scripts

Friday, August 8, 2008