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:

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:

XMLHttpRequest Open - Using False

In the examples (from the previous pages) we used this simplified syntax:

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:

The readyState property

The readyState property holds the status of the server's response.

Possible values for the readyState property:

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:

Or you can store the name of a function like this:

Free Online Website Builder - No Downloading Needed

Create a free Flash website with our simple, online web design editing platform. Stunning templates and user-friendly tools make website building easy and fun.

Start Creating your free website now!

Altova® XMLSpy® - The industry's leading XML editor!

Whether you're new to XML or already an advanced user, the user-friendly views and powerful entry helpers, wizards, and debuggers in XMLSpy are designed to meet your XML and Web development needs from start to finish. New features in Version 2010!

XML editor Graphical XML Schema / DTD editors XSLT 1.0/2.0 editor, debugger, profiler XQuery editor, debugger, profiler XBRL validator, taxonomy editor, taxonomy wizard Support for Office Open XML (OOXML) Graphical WSDL 1.1/2.0 editor & SOAP debugger JSON editing & conversion Java, C#, C++ code generation 32-bit and 64-bit versions And much more! Download a free trial today!