In Brief

Below is an example given by W3School:

  <html>
  <head><script src="clienthint.js"></script></head>
  <body>
  <form>
    First Name: <input type="text" id="txt1" onkeyup="showHint(this.value)">
  </form>
  <p>Suggestions: <span id="txtHint"></span></p> 
  </body>
  </html>

and the corresponding JavaScript file is as follows:

  var xmlHttp
  function showHint(str)
  {
      if (str.length==0) {
          document.getElementById("txtHint").innerHTML="";
          return;
      }
      xmlHttp=GetXmlHttpObject();
      if (xmlHttp==null) {
          alert ("Browser does not support HTTP Request");
          return;
      }
      var url="gethint.asp?";
      url=url+"?q="+str;
      url=url+"&sid="+Math.random();
      xmlHttp.onreadystatechange=stateChanged;
      xmlHttp.open("GET",url,true);
      xmlHttp.send(null);
  } 

  function stateChanged() 
  { 
      if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { 
          document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
      };
  } 

  function GetXmlHttpObject()
  { 
      var objXMLHttp=null;
      if (window.XMLHttpRequest) {
          objXMLHttp=new XMLHttpRequest();
      } else if (window.ActiveXObject) {
          objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
      };
      return objXMLHttp;
  }

The key things in AJAX is:

  • Label an object with CSS, e.g. the span tag in the example above
  • Create a JavaScript handling function to capture for an event, e.g. the onkeyup event
  • Ask the JavaScript to modify part of the HTML identified by the labelled object. In the mean time, the modification can be a result of retriving something from the web, e.g. via the XMLHttpRequest object.

So the core function in AJAX is the XMLHttpRequest object, which allows you to send and receive something while you are in JavaScript. The methods provided by XMLHttpRequest are:

  • open(method,uri,[async,[username,[password]]]): sets up a request to a web server.
  • send(requestContent): method sends a request to the server.
  • abort(): method aborts the current server request.
  • setRequestHeader(key, value): as the name implies.
  • getResponseHeader(key): as the name implies.
  • overrideMimeType(type): interpret the response as if the specified mime type.

To facilitate the program to handle the data got back from a web query, there is a readyState property in the XMLHttpRequest object to tell about the current state. Its value is an integer and it can be:

  • 0: The request is not initialized, i.e. object created but open() not called
  • 1: The request has been set up, i.e. open() called but not send()
  • 2: The request has been sent, i.e. send() just called but no action is done yet
  • 3: The request is in process, i.e. connection to the server is established and waiting for the response
  • 4: The request is completed, i.e. everything is done

Which means, we are interested in only whether readyState==4 or not. Additional parameter to the object are:

  • onreadystatechange: The function called when readyState changes
  • responseText: The response body as text. Non-null when readyState>=3
  • responseXML: The response body as XML pakaged as a DOM object. Non-null when readyState>=3
  • status: The integer HTTP response status code, e.g. 200

Good references

W3School: It provides a very brief but concise tutorial on AJAX.

Rasmus’ email about AJAX: Even shorter tutorial.

Others:

AJAX libraries that I am going to study:

prototype.js

It seems to me that quite a number of AJAX sites uses the prototype.js from Sam Stephenson.

I am studying it. Following are the links about this library:

Other stuff