AJAX ​

Introduction ​

Here is the description of Ajax from Wikipedia:

Ajax (also AJAX; short for asynchronous Javascript and XML) is a group of interrelated Web develoment techniques used on the client-side to create asynchronous Web appications. With Ajax, web aplications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. Data can be retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not required (JSON is often used in teh AJAJ variant), and the requests do not need to be asynchronous.

Ajax is not a single technology, but a group of technologies. HTML and CSS can be used in combination to mark up and style information. The DOM is accessed with JavaScript to dynamically display - and allow the user to interact with - the information presented. JavaScript and the XMLHttpRequest object provide a method for exchanging data asynchronously between browser and server to avoid full page reloads.

Using XMLHttpRequest ​

To use XMLHttpRequest, you must understand the three ways of creating an XMLHttpRequest object:

1. IE 5: request = new ActiveXOjbect("MIcrosoft.XMLHPPT")
2. IE 6+: request = new ActiveXObject("Msxml2.XMLHTTP")
3. All others: new XMLHttpRequest()

Therefore, the code below will work for all major browsers released over the last few years.

//A cross-browser Ajax function

function ajaxRequest()
{
    try //Non-IE browser?
    {
        var request = new XMLHttpRequest()
    }
    catch(e1)
    {
        try //IE 6+?
        {
        request = new ActiveXObject("Msxml2.XMLHTTP")
        }
        catc(e2)
            try //IE 5?
            {
            REQUEST = NEW ActiveXObject("Microsoft.XMLHTTP")
            }
            catch(e3) //There is no Ajax support
            {
                request = false
            }
    }
    return request
}

Table: An XMLHttpRequest object's properties

Properties

Description

onreadystatechange

Specified an event handing function to be called whenever the readyState property of an object changes.

readyState

An integer property that reports on the status of a request. It can have any of these values:
0 = Uninitialized
1 = Loading
2 = Loaded
3 = Interactive
4 = Completed

responseText

The data returned by the server in text format.

responseXML

The data returned by the server in XML format.

status

The HTTP status code returned by the server.

statusText

The HTTP status text returned by the server.

Table: An XMLHttpRequest object's methods

Methods

Description

abort()

Aborts the current request

getAllResponseHeaders()

Returns all headers as a string

getResponseHeader(param)

Returns the value of param as a string

open('method','url','asynch')

Specifies the HTTP method to use (GET or POST), the target URL, and whether the request should be handled asynchronously (true or false)

send(data)

Sends data to the tareget server using the specified HTTP method

setRequestHeader('param','value')

Sets a header with a parameter/value pair