Dr. Dobb's is part of the Informa Tech Division of Informa PLC

This site is operated by a business or businesses owned by Informa PLC and all copyright resides with them. Informa PLC's registered office is 5 Howick Place, London SW1P 1WG. Registered in England and Wales. Number 8860726.


Channels ▼
RSS

Web Development

AJAX & Record Locking


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.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.