AJAX Suggest Example
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
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.
Whether you're new to XML or already an advanced user, the user-friendly views
and powerful entry helpers, wizards, and debuggers in XMLSpy are designed to
meet your XML and Web services development needs from start to finish.
- XML editor
- Graphical XML Schema / DTD editors
- XSLT 1.0/2.0 editor, debugger, profiler
- XQuery editor, debugger, profiler
- Support for Office Open XML (OOXML)
- Graphical WSDL editor & SOAP debugger
- Java, C#, C++ code generation
- And much more!
Download a fully functional free 30-day trial today!
| 
HOME
Printer friendly page
