CSS, DHTML, and Ajax, Fourth Edition

Ajax functionality relies on the relatively straightforward ability to request data from the server. Every time you load a Web page, you are making a server request, so that's nothing new. However, the HTTP request is all or nothing: you have to load the complete and entire file used to render the Web page. You can overcome that somewhat using iframes, but, like many solutions to problems on the Web, iframes were never meant to be used this way.

It wasn't until Microsoft introduced the XMLHttpRequest object in Internet Explorer 5, which allowed JavaScript to make a server requests and to hold the information returned in a variable, that data could be transferred without having to reload the entire page, and without requiring the use of iframes.

These days, along with the DOM and JavaScript, server requests are used to dynamically change a page's content. The general Ajax function works something like this (Figure 20.1):

1. Action. An event happens in the browser window. For example, the user begins to type something into a form field.

2. Event. The event handler for the object that initiated the action (for example, the form field) will trigger a function used to request data from the server (I generally call that function fetchData()).

3. Fetch Data. This is the server request, where a JavaScript object is created (I call mine pageRequest) that will be used to send and receive data from the server. You initialize this object as either ActiveXObject("Microsoft.XMLHTTP") for Internet Explorer or XMLHttpRequest() for all other browsers.

4. Server Process. The page on the server processes the request. I usually call this page dataPage, with the relevant extension (for example, dataPage.php). If you used the GET method to make the request, then the contents of the data page are simply returned to the fetchData() function. If you use POST, then data can be sent to that page and used to return specific content. For example, you might pass a numeric value that is then used to send back a specific word based on that value.

5. Filter Data. Once the data is passed back to the page, it can be passed on to a function used to interpret it and display it in the Web page. I usually call this function filterData().

6. Reaction. Finally, the data is used by or placed onto the page, generally by using the innerHTML method to place it into a specific object.

Ajax Properties and Methods

Although the format outlined above takes care of the basic needs for fetching data off the server for use on a Web page, there are several JavaScript properties (Table 20.1) and methods (Table 20.2) that are commonly used to control Ajax functionality.