Subject: Step 4) Fire the ball
Author: WebSpider
In response to: Step 3) Design a listener as to how to respond to the response
Posted on: 11/10/2009 10:30:59 PM
Now you just need a event to trigger the AJAX action.
<html>
<body>
<form>
Name: <input type="text" id="myID" onkeyup="fireAJAX()" />
Suggestions: <span id="myHook">This part will be soon replaced
by response from server.</span>
</form>
</body>
</html>
>
> On 11/10/2009 10:26:25 PM
WebSpider wrote:
Now that you have sent out some requests, you definitely expect some thing happend in return. Therefore, a listener has not be registered to listen to the response from the server.
xmlhttp.onreadystatechange = function()
{
//how to proceeds with the data from server
}
The beauty of AJAX is its asynchronous nature -- the waiting for the server to response does not block the process of client. For this nature to work, certain flags need to be defined to signal the current status of the response.
Step 3) Design a listener as to how to respond to the response
Property #1: XMLHttpRequest.readyState
Possible values for the readyState property:
0 -- The request is not initialized
1 -- The request has been set up
2 -- The request has been sent
3 -- The request is in process
4 -- The request is complete
Property #2: XMLHttpRequest.responseText
The data sent back from a server can be retrieved with this property
As an example, a listener can like this:
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
document.getElementById("myHook").innerHTML=xmlhttp.responseText;
document.myForm.myName.value=xmlhttp.responseText;
}else{
// do some funcy thing
}
}
References:
