Ajax—the XMLhttprequest Object’s Methods and properties

❑ Important Methods
❑ Sending an AJAX Request to a Server
❑ Important Properties
❑ The responseText Property
❑ XMLHttpRequest Open—Using False
❑ XMLHttpRequest Open—Using True
❑ The readyState Property
❑ The onreadystatechange Property
In this chapter, you learn about important methods and properties of the XML
HttpRequest object.
important Methods
The XMLHttpRequest object has two important methods:
8 The open() method
8 The send() method

sending an aJaX request to a server
To send a request to a Web server, use the open() and send() methods.
The open() method takes three arguments. The first argument defines which
method to use (GET or POST). The second argument specifies the name of
the server resource (URL). The third argument specifies if the request should be
handled asynchronously.
The send() method sends the request off to the server. If we assume the file
requested is called time.asp, the code would be:
url="time.asp"
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
In the example, we assume that the current Web page and the requested resource are
both in the same file directory.
important properties
The XMLHttpRequest object has three important properties:
8 The responseText property
8 The readyState property
8 The onreadystatechange property
the responsetext property
The XMLHttpRequest object stores any data retrieved from a server as a result of a
server request in its responseText property.
In the previous chapter, you copied the content of the responseText property
into your HTML with the following statement:
document.getElementById('test').innerHTML=xmlhttp.response-Text
XMLhttprequest Open—using False
In the previous examples, we used this simplified syntax:
xmlhttp.open("GET",url,false);
xmlhttp.send(null);
document.getElementById('test').innerHTML=xmlhttp.
responseText;

The third parameter in the open call is “false”. This tells the XMLHttpRequest
object to wait until the server request is completed before next statement is executed.
For small applications and simple server requests, this might be OK. But if the
request takes a long time or cannot be served, this might cause your Web applica-tion to hang or stop.
XMLhttprequest Open—using true
By changing the third parameter in the open call to “true”, you tell the XMLHttpRe-quest object to continue the execution after the request to the server has been sent.
Because you cannot simply start using the response from the server request before
you are sure the request has been completed, you need to set the onreadystate-change property of the XMLHttpRequest, to a function (or name of a function)
to be executed after completion.
In this onreadystatechange function, you must test the readyState property
before you can use the result of the server call.
Simply change the code to
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4) HB: // request is complete
{document.getElementById('test').innerHTML=xmlhttp.
responseText}
}
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
the readystate property
The readyState property holds the status of the server’s response.
Possible values for the readyState property are shown in the following table.
state description
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

the onreadystatechange property
The onreadystatechange property stores a function (or the name of a function)
to be called automatically each time the readyState property changes.
You can define the entire function in the property like this:
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{document.getElementById('test').innerHTML=xmlhttp.
responseText}
}
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
Or you can simply store the name of a function that is defined elsewhere, like this:
xmlhttp.onreadystatechange=state_Change
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
...
...
...
function state_Change()
{
if(xmlhttp.readyState==4)
{document.getElementById('test').innerHTML=xmlhttp.
responseText}
}