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.
Figure 20.1. The general Ajax process flow, showing the dynamic type-ahead functionality discussed in Chapter 22.
Action. An event happens in the browser window. For example, the user begins to type something into a form field.
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()).
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.
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().
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
Table 20.1. Ajax Properties
Event handler triggered when the state of the request object changes
Status code for the current state of the server request object (see Table 20.3)
String value of the data from the server
DOM-compatible XML document object of the data from the server
Status code of the HTTP response from the server
String value of the HTTP status message
Table 20.2. Ajax Methods
Cancels the current HTTP request
String value of all HTTP headers
Value of specified HTTP header
Initializes the XML HTTP request
Sends the request to the server and receives the response
Sets an HTTP header and value to be sent