|
AJAX can be used to create more interactive
applications.
AJAX 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 web 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 ("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. |
