Subject: Step 3) Design a listener as to how to respond to the response
Author: WebSpider
In response to: Step 2) Use XMLHttpRequest object to send the request to the target server
Posted on: 11/10/2009 10:26:25 PM
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.readyStatePossible 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
}
}
>
> On 11/10/2009 10:23:33 PM
WebSpider wrote:
<script language="javascript">
XMLHttpRequest xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", url, true);
xmlhttp.send(null);
</script>
The open() method takes two, three, or five arguments:
XMLHttpRequest.open(method, url [, async [, user, password]]);
The first argument defines which method to use when sending the request (GET or POST). The second argument specifies the URL of the server-side script. The third argument specifies that the request should be handled asynchronously or not. The fourth and fifth arguments specify the user and password for authentication if the source is protected.
The send() method takes one argument:
XMLHttpRequest.send(content);
If the open() methodÂ’s HTTP retrieval argument is POST, the argument should contain the form data that needs to be send to the server as the follows:
var url = "myServer.jsp";
xmlhttp.open("POST", url, true);
var params = "name1=value1&name2=value2";
//Send the proper header information along with the request
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
// send out the request
xmlhttp.send(params);
If the open methodÂ’s HTTP retrieval argument is GET, simply put null.
References:
