We have seen that AJAX can be used to create more interactive applications.

AJAX Suggest Example

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 standard HTML form.

Type a Name in the Box Below
First Name:

Suggestions:

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 ("Your browser does not support AJAX!");
  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 GetXmlHttpObject() Function

The example above calls a function called GetXmlHttpObject().

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

The function is listed below:

function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}
Example Explained – The stateChanged() Function

The stateChanged() function contains the following code:

function stateChanged()
{
if (xmlHttp.readyState==4)
{
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 (”complete”), the content of the txtHint placeholder is filled with the response text.

Share This Post