Gary Han - A Nerd Who Tries To Be Cool And Failed Thus Far

The following makes up the foundation of an AJAX call for most javascripts.

The core of AJAX programming is to make http requests, then displaying the response to the page without refreshing the whole page.

For more information on AJAX, please check out the AJAX Tutorial

I found it understands better when putting the whole tutorial on the same page.

------------------------------------------------

        function AjaxSetup(){

          var xmlHttp;

           try{

            // Firefox, Opera 8.0+, Safari

            xmlHttp=new XMLHttpRequest();

          }catch (e){

            // Internet Explorer

            try{

              xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

            }catch (e){

              try{

                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

              }catch (e){

                 alert("Your browser does not support AJAX!");

                return false;

              }

            }

          }

          return xmlHttp;

        }

--------------------------------------------

This is the key of AJAX.
--------------------------------------------
xmlHttp=new XMLHttpRequest();
----------------------------------------------

With the above function, we now have a xmlHttp object at our disposal.

Now lets consider:
----------------------
function ajaxCall(element){
    var xmlHttp = AjaxSetup();

    xmlHttp.onreadystatechange=
                     function(){
                        if(xmlHttp.readyState==4) {
                              document.getElementById("sectionToUpdate").innerHTML=xmlHttp.responseText;
                        }
                     }
   
      xmlHttp.open("GET","http://www.example.com/requestUrl?",true);
      xmlHttp.send(null);
}
----------------------

The function first instantiates the xmlHttp object using our first function.

then set the function to be called when the xmlHttp call is done by doing:
-----------------------
      xmlHttp.onreadystatechange=
      function(){
        if(xmlHttp.readyState==4) {
                  document.getElementById("sectionToUpdate").innerHTML=xmlHttp.responseText;
        }
     }
-----------------------

followed by:
-----------------------
        xmlHttp.open("GET","http://www.example.com/requestUrl?",true);
----------------------
This is the actual request for the xmlHttp,
This opens a connection to the url specified.

The parameters are:

open(method, url, async, user, password)

xmlHttp.send(null) sends any extra information that is necessary for the request.

Lets see an example with such usage:
------------------------
function ajaxCall(){
  var xmlHttp = AjaxSetup();
  xmlHttp.onreadystatechange=function(){
    if(xmlHttp.readyState==4) {
        document.getElementById("updateSectionId").innerHTML=xmlHttp.responseText;
      }
    }
  xmlHttp.open("POST","http://www.example.com/requestUrl?",true);
  xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xmlHttp.setRequestHeader("Content-length", fullParams.length);
  xmlHttp.setRequestHeader("Connection", "close");
  xmlHttp.send("parameter1=hi&parameter2=hello"); 
}
--------------------------

The only different in the above code is:
--------------------------   
    xmlHttp.open("POST","http://www.example.com/requestUrl?",true);
    xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlHttp.setRequestHeader("Content-length", fullParams.length);
    xmlHttp.setRequestHeader("Connection", "close");
    xmlHttp.send("parameter1=hi&parameter2=hello");
---------------------------
this time we do a post method for the http call.
As well as sending a set of variables to the call.

    parameter1 = hi
    parameter2 = hello
   
these 2 parameters will then be accepted on there server side and be used to compute the proper results for us.

Most programmers would then notice the use of this function can be extended to accomodate almost any AJAX calls.

with a little modification to the function we then have:
   
 

***************************
function ajaxCall(fullParams, url, updatedFieldId){
  var xmlHttp = AjaxSetup();
  xmlHttp.onreadystatechange=function(){
    if(xmlHttp.readyState==4){
        document.getElementById(updatedFieldId).innerHTML=xmlHttp.responseText;
    }
  }
  xmlHttp.open("GET",url+'?'+fullParams,true);
  xmlHttp.send(null); 
}
function ajaxCallPost(fullParams, url, updatedFieldId){
  var xmlHttp = AjaxSetup();
  xmlHttp.onreadystatechange=function(){
    if(xmlHttp.readyState==4){
        document.getElementById(updatedFieldId).innerHTML=xmlHttp.responseText;
    }
  }
  xmlHttp.open("POST",url,true);
  xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xmlHttp.setRequestHeader("Content-length", fullParams.length);
  xmlHttp.setRequestHeader("Connection", "close");
  xmlHttp.send(fullParams); 
}
**************************

Now with these 2 functions we can do ajax call anywhere anytime doing anything.