Ajax Tutorial

Ajax stands for Asynchronous JavaScript And XML. Once you learn how to use it properly, you will never go back to posting data to a PHP or ASP script.

Since I don't have alot of time to go into detail, I will provide the basics, you need to get started. 

Step1

Create a javascript file and make a link to it in your html page after your title tag.  If you have a style sheet, put it after the style sheet reference.


Example: 


Step2

Add the following lines to the top of your javascript file;


var xmlhttp

xmlhttp = new ActiveXObject("Msxml2.XMLHTTP.5.0");

Step3

Add the following functions. These functions are mandatory. They tell the browser what to do when the data is received. 

function stateChanged()
{
   
    if (xmlhttp.readyState==1)  //Do while page is loading.
   {
          document.getElementById("Wait").style.visibility="visible";    Make span id visible.
          document.getElementById("Wait").src="ajax-loader.gif";   
          document.getElementById("lblwait").innerHTML="Processing.....";   
    }


   if (xmlhttp.readyState==4)  //Do when complete.
  {
         document.getElementById("Wait").style.visibility="hidden";  //Set wait status to hidden.
         document.getElementById("lblwait").innerHTML="";  //Clear message
         document.getElementById("portdata").innerHTML=xmlhttp.responseText; //Get data
  }

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}

Step4 

Add function to execute server side script, like php or asp.


Example;


function getinfo(parm){


var recordnumber=parm; //get record number passed in
;
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  }
var url="../inc/getinfo.php";

url = url+"?recordnumber=" + recordnumber;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);

}


Call your function getinfo from an onclick or load event from the page.


Example:  onclick=javascript:getinfo();


Due to the nature of Ajax, only one piece of data is returned at a time, which makes it very difficult to do anything useful; however, there is a trick to getting more than one piece of data at a time. Stay tuned for additional blogs.



Here are some additional resources you may find useful;


http://www.tizag.com/ajaxTutorial
http://www.w3schools.com/ajax/default.asp