• Choose a category
• All
• Classic-Fiction

Define callback handler

var ready=req.readyState;

var data=null;

if (ready==READY_STATE_COMPLETE){

Check readyState

data=req.responseText;

Read response data

}else{

data="loading...["+ready+"]";

}

toConsole(data);

}

function toConsole(data){

if (console!=null){

var newline=document.createElement("div");

console.appendChild(newline);

var txt=document.createTextNode(data);

newline.appendChild(txt);

}

}

window.onload=function(){

console=document.getElementById('console');

sendRequest("data.txt");

}

Licensed to jonathan zheng

64

CHAPTER 2

First steps with Ajax

Let’s look at the output of this program in Microsoft Internet Explorer and Mozilla Firefox, respectively. Note that the sequence of readyStates is different, but the end result is the same. The important point is that the fine details of the readyState shouldn’t be relied on in a cross-browser program (or indeed, one that is expected to support multiple versions of the same browser). Here is the output in Microsoft Internet Explorer:

loading...[1]

loading...[1]

loading...[3]

Here is some text from the server!

Each line of output represents a separate invocation of our callback handler. It is called twice during the loading state, as each chunk of data is loaded up, and then again in the interactive state, at which point control would be returned to the UI under a synchronous request. The final callback is in the completed state, and the text from the response can be displayed.

Now let’s look at the output in Mozilla Firefox version 1.0:

loading...[1]

loading...[1]

loading...[2]

loading...[3]

Here is some text from the server!

The sequence of callbacks is similar to Internet Explorer, with an additional callback in the loaded readyState, with value of 2. In this example, we used the responseText property of the XMLHttpRequest object to retrieve the response as a text string. This is useful for simple data, but if we require a larger structured collection of data to be returned to us, then we can use the responseXML property. If the response has been allocated the correct MIME type of text/xml, then this will return a DOM document that we can interrogate using the DOM properties and functions such as getElementById() and childNodes that we encountered in section 2.4.1.

These, then, are the building blocks of Ajax. Each brings something useful to the party, but a lot of the power of Ajax comes from the way in which the parts combine into a whole. In the following section, we’ll round out our introduction to the technologies with a look at this bigger picture.

Licensed to jonathan zheng

What sets Ajax apart

65

2.6 What sets Ajax apart

While CSS, DOM, asynchronous requests, and JavaScript are all necessary components of Ajax, it is quite possible to use all of them without doing Ajax, at least in the sense that we are describing it in this book.

We already discussed the differences between the classic web application and its Ajax counterpart in chapter 1; let’s recap briefly here. In a classic web application, the user workflow is defined by code on the server, and the user moves from one page to another, punctuated by the reloading of the entire page. During these reloads, the user cannot continue with his work. In an Ajax application, the workflow is at least partly defined by the client application, and contact is made with the server in the background while the user gets on with his work. In between these extremes are many shades of gray. A web application may deliver a series of discrete pages following the classic approach, in which each page cleverly uses CSS, DOM, JavaScript, and asynchronous request objects to smooth out the user’s interaction with the page, followed by an abrupt halt in productivity while the next page loads. A JavaScript application may present the user with page-like pop-up windows that behave like classic web pages at certain points in the flow. The web browser is a flexible and forgiving