AJAX - The XMLHttpRequest Object
Important Methods and Properties of the XMLHttpRequest object.
Important Methods
The XMLHttpRequest object has 2 important methods:
- The open() method
- The send() method
Sending an AJAX Request to a Server
To send a request to a web server, we 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 that requested a file 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 3 important properties:
- The responseText property
- The readyState property
- 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 we copied the content of the responsText property
into our HTML with the following statement:
|
document.getElementById('test').innerHTML=xmlhttp.responseText |
XMLHttpRequest Open - Using False
In the examples (from the previous pages) 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 request, this might be OK. But if
the request takes a long time or cannot be served, this might cause your web
application to hang or stop.
XMLHttpRequest Open - Using True
By changing the third parameter in the open call to "true", you tell the
XMLHttpRequest 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
onreadystatechange 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)
{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:
| 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 store a full 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 store the name of a function 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}
} |
Start Creating a stunning, Flash website. It's easy and free!
Wix is a revolutionary web design tool that provides you with a free, simple,
drag & drop editing platform to create your own professional and beautiful website.
Over 2 Million users have created their website with Wix.
Now create yours!
 |
W3Schools' Online Certification Program
The perfect solution for professionals who need to balance work, family, and career building.
More than 4500 certificates already issued!
|
The HTML Certificate documents your knowledge of HTML, XHTML, and CSS.
The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.
The XML Certificate documents your knowledge of XML, XML DOM and XSLT.
The ASP Certificate documents your knowledge of ASP, SQL, and ADO.
The PHP Certificate documents your knowledge of PHP and SQL (MySQL).
| 
