Nowadays everybody talks about Ajax. To be truly honest, I thought that is something extremely difficult, but it is not.
It is no more than a programming technique (Asynchronous JavaScript and XML) in order to load external info in DIVs, without reloading the whole page (Gmail users probably knows best what I’m talking).

The reason why it was not widely used was that the XMLHttpRequest object is not supported by all browsers. Internet Explorer has his own object called XMLHTTP (as an ActiveX object).
Since all new browsers have this facility, this technology (I think that calling this “Language” is not fair) exploded.

First of all we need to define some javascripts to create the object and handle the request. For this particular example, I used another javascript function to make the request.

<script language="javascript"  type="text/javascript">

        //cross-browser object creation function
        function createRequestObject() {
                var ret;
                //read the user’s browser
                var browser = navigator.appName;
               
                //Internet Explorer has his own object
                if(browser == "Microsoft Internet Explorer"){
                        ret = new ActiveXObject("Microsoft.XMLHTTP");
                }
                else{
                        ret = new XMLHttpRequest();
                }
                return ret;
        }
       
        //create a request object
        var http = createRequestObject();
       
        //you will call this function
        function sendRequest(action) {
                //here’s the catch – call an external page
                http.open(‘get’, ‘req.php?action=’+action);
                //wait until the request is completed
                http.onreadystatechange = handleResponse;
                //finalize the request
                http.send(null);
        }
       
        //function that handle response state changes
        function handleResponse() {
                //fires only the object change to state 4
                if(http.readyState == 4){
                        //get the text from the external procedure
                        var response = http.responseText;
                        var update = new Array();
       
                        //parse the text
                        if(response.indexOf(‘|’ != -1)) {
                                //response should be ‘divID|value"
                                update = response.split(‘|’);
                                //update the element with the divID with the value
                                document.getElementById(update[0]).innerHTML = update[1];
                        }
                }
        }

</script>

After this we need to call sendRequest function from HTML, just like this:

<a href="javascript:sendRequest(‘currentDateTime’)">update time</a>

As you see, this example get the date from an external script (req.php), and return a string with the id of the DIV that will be updated and the value of the DIV, separated by a pipe:
Below is the entire code from req.php. It’s easy, don’t it?

<?
  //test the action from request
  switch($_REQUEST[‘action’]) {
        case ‘currentDateTime’:
                //return the divID and the value separated by a pipe
                echo "currentDateTime|".date("d/m/Y h:i:s");
        break;
  }
?>

In the original page we need a DIV to be filled with external info

<div id="currentDateTime">
</div>

The whole code from HTML file is:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Ajax demystified</title>
<style type="text/css">
A {
  color: #336699;
  text-decoration: none;
  font-weight: bold;
}

A:hover {
  color: #FF0000;
  font-weight: bold;
}

BODY {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 12px;
}

.mark {
  color: #FF0000;
  font-weight: bold;
}
</style>
<script language="javascript"  type="text/javascript">

        //cross-browser object creation function
        function createRequestObject() {
                var ret;
                //read the user’s browser
                var browser = navigator.appName;
               
                //Internet Explorer has his own object
                if(browser == "Microsoft Internet Explorer"){
                        ret = new ActiveXObject("Microsoft.XMLHTTP");
                }
                else{
                        ret = new XMLHttpRequest();
                }
                return ret;
        }
       
        //create a request object
        var http = createRequestObject();
       
        //you will call this function
        function sendRequest(action) {
                //here’s the catch – call an external page
                http.open(‘get’, ‘req.php?action=’+action);
                //wait until the request is completed
                http.onreadystatechange = handleResponse;
                //finalize the request
                http.send(null);
        }
       
        //function that handle response state changes
        function handleResponse() {
                //fires only the object change to state 4
                if(http.readyState == 4){
                        //get the text from the external procedure
                        var response = http.responseText;
                        var update = new Array();
       
                        //parse the text
                        if(response.indexOf(‘|’ != -1)) {
                                //response should be ‘divID|value"
                                update = response.split(‘|’);
                                //update the element with the divID with the value
                                document.getElementById(update[0]).innerHTML = update[1];
                        }
                }
        }

</script>
</head>

<body onload="javascript:sendRequest(‘currentDateTime’)">
        This page shows how Ajax is working. Is is nothing fabulous here.
       

 Click here for
         <a href="javascript:sendRequest(‘currentDateTime’)">update time</a>
          <div id="currentDateTime" class="mark">
          </div>
       
Nothing else but the date and time is updated.
       

        &copy;2006 <a href="mailto:andrei@webxpert.ro">Andrei DANEASA</a>
</body>
</html>

If you want to see this example working and test it, click here.

*This is not intended to be a complete tutorial of Ajax, but it covers the main functionalities. The rest is only programmer’s imagination.

Andrei
http://www.webxpert.ro


Leave a Reply