AJAX Example

modified from http://www.w3schools.com/ajax/

In the AJAX example below we will demonstrate how a web page can communicate with a web server online as a user enters data into a web form.

Upload TO SEE EXAMPLE RUNNING

Example Explained - The HTML Form

The form above has the following HTML code:

<form> 
First Name:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form>

<p>Suggestions: <span id="txtHint"></span></p>

As you can see it is just a simple HTML form with an input field called "txt1".

An event attribute for the input field defines a function to be triggered by the onkeyup event.

The paragraph below the form contains a span called "txtHint". The span is used as a placeholder for data retrieved from the web server.

When the user inputs data, a function called "showHint()" is executed. The execution of the function is triggered by the "onkeyup" event. In other words: Each time the user moves his finger away from a keyboard key inside the input field, the function showHint is called.

Example Explained - The showHint() Function

The showHint() function is a very simple JavaScript function placed in the <head> section of the HTML page.

The function contains the following code:

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)
}

The function executes every time a character is entered in the input field.

If there is some input in the text field (str.length > 0) the function executes the following:

Defines the url (filename) to send to the server
Adds a parameter (q) to the url with the content of the input field
Adds a random number to prevent the server from using a cached file
Creates an XMLHTTP object, and tells the object to execute a function called stateChanged when a change is triggered
Opens the XMLHTTP object with the given url.
Sends an HTTP request to the server

If the input field is empty, the function simply clears the content of the txtHint placeholder.

Example Explained - The stateChanged() Function

The stateChanged() function contains the following code:

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

The stateChanged() function executes every time the state of the XMLHTTP object changes.

When the state changes to 4 (or to "complete"), the content of the txtHint placeholder is filled with the response text.

The GetXMLHttpObject() Function

The purpose of the function is to solve the problem of creating different XMPHTTP objects for different browsers.

MOST Browsers supporting AJAX will not allow you to make a HTTP request to a differnet domain!!!!! Some even require the same machine. Read documentation to be careful.

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

  return objXMLHttp

}

XMLHttpRequest Methods

The open() method.

The open() method sets up a request to a web server.

The send() method.

The send() method sends a request to the server.

The abort() method.

The abort() method aborts the current server request.

XMLHttpRequest readyState Property

The readyState property defines the current state of the XMLHttpRequest object.

Here are the possible values for the readyState propery:

State	Description
0	The request is not initialized
1	The request has been set up
2	The request has been sent
3	The request is in process
4	The request is completed

You can also check the status of the response to see if it is Good.

The next thing to check is the status code of the HTTP server response. All the possible codes are listed on the W3C site. For our purposes we are only interested in 200 OK response.

if (http_request.status == 200) {
    // perfect!
} else {
    // there was a problem with the request,
    // for example the response may be a 404 (Not Found)
    // or 500 (Internal Server Error) response codes
}