<%response.buffer=true%> <% yere = year(date()) Response.Expires = 0 %> JavaScript Intro
<XMLHTTP Object >
  spacerspacer

AJAX Intro

One of the techniques for making web pages more responsive is a JavaScript client side technology called AJAX.

AJAX is an unofficial acronym for Asynchronous JavaScript And XML, which colorfully explains two of the technologies involved. The object that allows this activity is actually a JavaScript object called XMLHTTP or xmlHttpRequest, based on whether we are currently using a Microsoft browser or not.

Background: Historically one of the limitations of using web pages as "applications" is that entire pages are frequently reloaded, sometimes for a minor change on the page at hand. This is inefficient, and inconvenient for our users.

XMLHTTP: In the Spring of 1999, to avoid the problem inefficient page reloads, Microsoft created an Active-X object in it's version 5 browser, called XMLHTTP. This object allowed for "asynchronous" (untimed) calls to the server. The version 5 IE browser allowed a client side scripting language like JavaScript to send and receive data from the server both at the request of the user (via events) and in the background, even without the user's knowledge.

XMLHttpRequest: The XMLHTTP object was of little use in a multi-browser world, until a similar object named xmlHttpRequest was developed in Mozilla, Firefox, Opera, Safari, Netscape and Konqueror. This "similar" object operates in a nearly identical way, but is created in a different manner, since Active-X is a Microsoft only technology.

Fortunately, we can "sniff" for the existence of the Microsoft Active-X capability, and if it is missing, use the alternate means to create the "XMLHttpRequest" object that is used for all the other browsers:

var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){ //Microsoft browser
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else{ //other browser
    xmlHttp = new XMLHttpRequest();
}

Calling the function above creates a cross-browser "xmlHttp" object, which can then access the server at the request of client side JavaScript. Creating the empty variable named xmlHttp outside the function makes the variable global in scope, and available inside all functions.

Now that the xmlHttp object is common in most modern browsers, it has become a staple used by Google Maps, GMail, Amazon's Diamond Search, Flickr and Netflix, to name a few!

Not A Standard: Just like the hugely useful innerHTML, The xmlHttp object is not yet part of a DOM standard. However the DOM3 Load and Save specification, that is currently in progress is considering a standardization of xmlHttp.

AJAX WorkFlow: Once a page is loaded, we may wish to connect to the server via user interaction with buttons on a web page, for example. We can change the data contained inside the page by creating an xmlHttp object through JavaScript that floats in the browser's memory and manages transmission between the client (browser) and the web server.

When a request has been made by the AJAX engine to the server, data is returned, and that data is manipulated and potentially displayed on the webpage via the Document Object Model:

 

Steps 3 - 6 above are the AJAX in action:

3) JavaScript, either via a timer built into the script, or in response to user actions like clicking buttons triggers a request to the xmlHttp object (AJAX engine).

4) The xmlHttp object sends the request to the server, and waits for a response.

5) After the request has been processed on the server, either a string or XML formatted data is returned to the xmlHttp object

6) The data is processed via JavaScript in client memory, and the visual elements of the page are manipulated via the DOM.

A is for Asynchronous: The "A" in AJAX stands for "asynchronous". We want our communication between the client and server to be free flowing and not interfere with the other DOM or web page processes while we wait for a response from the server. The xmlHttp object can be used for a series of communications that occur while the page is still visible in a browser:

Here you can see a representation of a web page in the memory of the browser on the client, which has an AJAX engine (xmlHttp object) negotiating communication secretly with the server. Requests are sent to the server where data is processed and returned either as straight text, or formatted as XML. We indicate which type of formatting is being used by identifying a property of the xmlHttp object:

xmlHttp.responseText or xmlHttp.responseXML

Basic AJAX Examples: View the behavior and the source of the following 3 examples in sequence for an introduction of how AJAX operates:

ajaxHeadline1.htm  ajaxHeadline2.htm  ajaxHeadline Source

 

xmlHttp Object Properties: Below are the main properties we need to remember while working with AJAX. The main things we are looking for is a readyState of 4 (processing complete, data has arrived) and a status of 200 (data arrived with no errors).

Property Description
onreadystatechange Event handler for an event that fires at every state change, typically a call to a JS function
readyState The current state of the request. Possible values:
0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete
responseText String version of data returned from the server
responseXML DOM-compatible XML document returned from the server
status Numeric code returned by server, such as 404 for "Not Found" or 200 for "OK"
statusText Text version of accompanying the status code, "OK", "Not Found", etc.

AJAX Tutorials: Once we have created our XMLHTTPRequest object, what do we do with it? View the following AJAX tutorial for an introduction: AJAX Tutorial

More AJAX Examples: An excellent book that is a good starting point for further studies is FOUNDATIONS OF AJAX, by Ryan Asleson, (Apress). Here are 3 examples from that book: Foundations Of Ajax Examples

PHP & AJAX: Since AJAX crosses the boundary between the client and server, we'll find resources that are platform neutral on the client side (JavaScript & the DOM) but platform specific on the server side. Here's an example that allows us to build a form via AJAX calls: Dynamic Lists

Username: Another use of is to determine if a Username is taken prior to form submission when a user registers: Username AJAX

 

   
Print this Page Back To Top

2000- <%=yere%> newMANIC INC, All rights reserved