Example - AJAX Suggest
AJAX can be used to create more interactive applications.
AJAX Suggest example
The following AJAX example will demonstrate how a web page can communicate with a web server while a user enters data into an HTML form.
Type a name in the input field below:
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> |
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 a user inputs data, the function called "showHint()" is executed. The execution of the function is triggered by the "onkeyup" event. In other words:
Each time a user moves the 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:
var xmlhttp
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Your browser does not support XMLHTTP!");
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 above executes every time a character is entered in the input field.
If there is input in the input field (str.length > 0), the showHint() 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 showHint() function above calls a function named GetXmlHttpObject().
The purpose of the GetXmlHttpObject() function is to solve the problem of creating different XMLHTTP
objects for different browsers:
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
} |
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.
| 
