What’s Ajax?

Ajax for “Asynchronous JavaScript and XML”. It’s not a new kind of language. In fact it’s a kind a technique that enable to refreshing partial webpage, utilising Javascript, which will lower the Net communication load and improve viewing experience.

How does it work?

In most case it’s triggered by a button on the webpage, which will call a function to send a HTTPRequest and then refresh part of the webpage according to received HTTPResponse, or do something locally, like shelter something or uncover something

More Details?

Ok, Firstly: A workder.

I need a XMLHttpRequest object, which enables explorer exchange information with server without reload the whole webpage. In other word, it's the HTTP client.

variable = new XHLHttpRequest( );

Some old explorers(IE5/6) use ActiveXObject object:

variable = new ActiveXObject(“Microsoft.XMLHTTP”);

So, combine these two I have:

var xmlhttp;
if ( window.XMLHttpRequest )
  {
    xmlhttp = new XMLHttpRequest( );
  }
else
  {
    // add support for different version of IE
    var versions = ["Microsoft.XMLHTTP", "Msxml2.XMLHTTP.3.0", "Msxml2.XMLHTTP.6.0"]; 
    for( i = 3; i--; )
      {
        try
          {
            xmlhttp = new ActiveXObject( versions[i] );
            break;
          }catch(error){}
      }
    if( !xmlhttp )
    {
      throw new Error("This browser does not support XMLHttpRequest.");
    }
  };

Secondly: Send HTTP request to server.

Some basic knowledge of HTTP is required, which I would not note down here.

There're two HTTP request methods -- GET and POST. Basically, GET method satisfy most requirement:request for a webpage or resoueces ... But if I want to upload customized informations, such as username and password, to server, POST is a better choice.

Three useful methods:

/*
* Creating a HTTP request
* @ Parameters:
* @ method { String } "GET" or "POST"
* @ uri { String } Resources URI
* @ async { Boolean } Asynchronous or not. True if Ajax.  
*/
function open( method, url, async )
{ /*Unknown*/; }

/*
* Customize request header
* @ Parameters:
* @ header { String } Header. Like 'Content-type'.
* @ value { String } Value of header. Like 'text'.
*/
function setRequestHeader( header,value )
{ /* Unknown */ }

/*
* Sent the request
* @Parameters:
* @ content { String } Body of the http request. Only needed in POST method
*/
function sent( content )
{ /*Unknown*/; }

Examples:

GET

    // sent short message using GET method
    xmlhttp.open( "GET", "demo.asp?fname=Bill", true );
    xmlhttp.send( );

POST

    // sent message using POST method
    xmlhttp.open( "POST", "ajax_test.asp", true );
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send( "fname=Bill" );

Thridly: Handel response and do sth. to the webpage

1.receiveResponse

// Pure text response
textResponse = xmlhttp.responseText;
// or xml response
xmlResponse = xmlhttp.responseXML;

2.parseXml(optional)

//XML response can be transfer into text by:

xml = xmlhttp.responseXML;
text = '';
x = xml.getElementsByTangName("TAG");
for ( i = 0; i < x.length; i++)
  {
    //do something to transfer xml into text(html)
    text = text + x[i].childNodes[0].nodeValue + "</br>";
  }

refreshHtml

document.getElementById("myDiv").innerHTML=txt;

Done?

Not perfectly. Infact, before receiving the Html you need to make sure that it's ready by using. The state and status of the response can be acquire by

xmlhttp.readyState

and

xmlhttp.status

We can asure the response is safely received using a event handler.

ensureFullyReceive

xmlhttp.onreadystatechange = funtion(){
  if( xmlhttp.readyState==4 && xmlhttp.status==200 )
    {
      //reveive response and refresh page
      document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

p.s.: I am not sure what exactly 'onreadystatechange' is. In my personal understanding, in every important state of the communication( when state changes ), the 'reveive function' will break away from it and execute 'onreadystatechange'. It just like a event handler(listener) in Java.

DONE?

Yes! This is what Ajax all about! Have fun coding!

Attachments:

Meaning of State

value	meaning
0	Uninitialized
1	Connection established
2	Response receiced
3	Processing response
4	Done

Meaning of Status

value	meaning
200	"ok"
400	Unknown page

Ajax with pure javascript