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.
|