Client-Side Components
AJAX is the confluence of JavaScript, XML, and the W3C's document object model (DOM) in the browser (often with the UI gussied up through the use of cascading stylesheets). AJAX technologies let JavaScript running on web pages communicate with a server without reloading the page. For example, the read-only view of a record can use AJAX to asynchronously ask the server for the status of the lock. Client-side JavaScript handles the server response by going through the web page's DOM to locate and remove the Edit button. The beauty of this is that users will not notice the asynchronous communication because the page does not reload, and the application appears responsive and natural.
The important tool for corresponding with the server is the HttpRequestObject that is part of the DOM of the browser page. Different browser makers offer different implementations of this object, as expected, and there are cross-browser libraries that offer a single API as a facade over the different implementations.
With the HttpRequestObject, JavaScript can make standard HTTP POST (or GET, HEADER, and so on) requests and read the server's reply. The server's reply can be accessed from the HttpRequestObject either as text or as already-parsed XML. Which of these gets used is controlled by the server's content type setting, either text/html or text/xml. The client should know whether to expect XML or plain text. In the application at hand, we simply pass around small messages as strings.
The HttpRequestObject has five properties that are accessed once the request to the server has been made. They track the interaction with the server and let the client determine if the request was handled and completed successfully or not. These properties are:
- readyState. Current state of the request, with the following states possible: 0, UNINITIALIZED; 1, LOADING; 2, LOADED; 3, INTERACTIVE; and 4, COMPLETE.
- status. Numeric HTTP status code returned by the web server, such as a 404 for page not found, 200 for success.
- statusText. Text linked with the aforementioned HTTP status code, such as a status of 200 yielding an "OK" or 404 yielding "Not found."
- responseText. A string containing the response data returned from the web server, used when the server sets the content type to text/html.
- responseXML. An XML document returned by the server, already parsed into a DOM of its own, used when the server sets the content type to text/xml.
An HttpRequestObject has the following API, used to setup and initiate the request:
- abort(). Aborts an ongoing request.
- open(request-method, url, asynch, username, password). Initializes a new request. request-method is the HTTP request verb, usually "GET" or "POST". The last three parameters are optional: asynch defaults to True, username and password may be specified if the web server requires authentication.
- send(data). Makes the request, optionally passing data.
- setRequestHeader(name, value). Sets the named request header to the supplied value.
- getResponseHeader(name). Returns the string value of the named response header.
- getAllResponseHeaders(). Returns a string containing all the response headers.