AJAX: First AJAX Program

Back | Tutorial Home

Now that we have explored the XMLHttpRequest Lets get on with the simple “Word of the Day” example.

Paste the below code on any portion of your web page.

<tr>
  <td>
    <div id="wordtext"></div>
    <a href="javascript:showWord('Loading Another Word...')">Another word..</a>
    <script>
      showWord('Loading Word Of The Day ...');
    </script>
   </td>
</tr>

In the above code div tag identified by “wordtext” is our AJAX playground. This div tag is initially empty and is populated by following two Java Script methods.

showWord('Loading Word Of The Day ...'): This method called on page load and a random word of the day is displayed

showWord('Loading Another Word...'): This method called when the user click “Another word” link.

If you study the above two methods carefully these methods are same but input parameters are different.

This div tag can be accessed in the AJAX code using document.getElementById("wordtext").

The handle to the display area within in the div tags can be updated using innerHTML property

document.getElementById("wordtext").innerHTML=
	"<font face=Arial size=2><b>"+loadStatus+"<b></font>";

The below code should be placed in the within the head tags and is a complete listing of the AJAX code needed for this example.

<script>

   var xmlHttp
   function CreateXmlHttpObject()
      {
         var ajaxRequestObject=null;
         try
         {
           // Create native object           
           // For Firefox, Opera 8.0+, Safari & Internet Explorer 7 
           // ajaxRequestObject=new XMLHttpRequest()
           // IE7 does not support overrideMimeType()
           if (ajaxRequestObject.overrideMimeType) {
             ajaxRequestObject.overrideMimeType('text/xml');
           }
         }
         catch (e)
         {
            // Create Active X object
            // For Internet Explorer 5.0 & 6.0
            try
            {
              ajaxRequestObject=new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e)
            {
              ajaxRequestObject=new ActiveXObject("Microsoft.XMLHTTP");
            }
         }
         return ajaxRequestObject;
      }
      function stateChanged()
      { 
        if (xmlHttp.readyState==4)
        {
          if (xmlHttp.status == 200) {
            document.getElementById("wordtext").innerHTML=xmlHttp.responseText;
          }
          else {
            document.getElementById("wordtext").innerHTML="Error fetching 
              data, Please try again.";
          }
        }
      }
      function showWord(loadStatus)
      {
        var loadStatus=loadStatus;
        // Show loading within div tags screen before making a request.
        document.getElementById("wordtext").innerHTML="<font 
        face=Arial size=2><b>"+loadStatus+"<b></font>";
        // Create XmlHttpObject
        xmlHttp=CreateXmlHttpObject();
        if (xmlHttp==null)
        {
          alert ("Your browser does not support AJAX!");
          return;
        } 
        // use a random sid to avoid browser caching
        var url="/inc/word.php"+"?sid="+Math.random();
        xmlHttp.onreadystatechange=stateChanged;
        xmlHttp.open("GET",url,true);
        xmlHttp.send(null);
    }
</script>

Server Code

This is a simple Word of the Day server written in PHP which returns a random word of the day for each request

        <?
        $random_word = array("<b>Visual Basic</b>: Microsofts 
        most popular programming language.",
        "<b>Java</b>: Sun's pupolar prommramming language.",
        "<b>J2ME</b>: Java version for mobile devices.",
        "<b>Linux</b>: Open Source OS.",
        "<b>Orkut</b>: Popular social networking web site.",
        "<b>Google</b>: Popular search engine.",
        "<b>Digg</b>: Popular bookmarking web site.");
        $random_num = rand(0, (count($random_word)-1));
        print("$random_word[$random_num]");
        ?>

Back | Tutorial Home