Understanding Server Requests


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):

Figure 20.1. The general Ajax process flow, showing the dynamic type-ahead functionality discussed in Chapter 22.


  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.

Table 20.1. Ajax Properties

PROPERTY

DESCRIPTION

onreadystatechange

Event handler triggered when the state of the request object changes

readyState

Status code for the current state of the server request object (see Table 20.3)

responseText

String value of the data from the server

responseXML

DOM-compatible XML document object of the data from the server

status

Status code of the HTTP response from the server

statusText

String value of the HTTP status message


Table 20.2. Ajax Methods

METHOD

DESCRIPTION

abort()

Cancels the current HTTP request

getAllResponseHeaders()

String value of all HTTP headers

getResponseHeader(<label>)

Value of specified HTTP header

open(<method>,<URL>, <asynchFlag>)

Initializes the XML HTTP request

send(<content>)

Sends the request to the server and receives the response

setRequestHeader (<label>,<value>)

Sets an HTTP header and value to be sent





CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net