Home > Articles > Web Development

  • Print
  • + Share This
Like this article? We recommend

Client-Side AJAX Application

The AJAX version of the FAQ application will be visually similar to the HTML version, but it will use the on-demand load and content replacement functionality common to AJAX applications. To keep the code simple and completely browser-independent, we’ll use two wrapper libraries: the X library (which provides browser-independent dynamic HTML functions) and the Sarissa library (which gives a consistent view of the XMLHttpRequest object).

The AJAX code also rely heavily on two functions in our client-side Ajax library:

  • The getContentFromURI function loads the requested URI and executes a callback function once the content is loaded. It also handles all status notifications and error messages, making the rest of our programming work much easier because we don’t have to write additional error handling code.
  • The copyChildren function copies the contents of an XML element (child text and element nodes) into an HTML element.

Due to completely asynchronous nature of our implementation, every action in our application is implemented with two functions: the first function, triggered on page load or through an onclick event, requests the data; the second function (callback) modifies the HTML page based on XML data received from the server. All the action-specific functions reside in a single JavaScript library.

The HTML page that starts the AJAX application is also kept as simple as possible: It’s a template that provides lean, semantically meaningful HTML markup for the navigational elements as well as the placeholders that are filled in by the callback functions.

The first set of action functions is called at page load time. The loadCategories function requests the load of the categories list (categories.asp) and the updateCategories callback creates the LI elements within the TOC UL element, resulting in the list of major categories. Each LI element contains a link (A element) that triggers the expandCategoryToc function.

As you click on each category, the expandCategoryToc function checks to see whether the category’s questions have already been loaded. (The check is simple: Is the next element an UL element?) It displays them if they are already present by using the doExpandOrCollapse function. Otherwise, it creates the UL element that will hold the second-level TOC (questions) and requests the load of all the questions in the selected category (questions.asp).

The updateCategoryQuestions callback function then fills the newly-created UL element with the LI elements (questions). As above, each LI element has an A element that triggers the displayQAPair function.

The last set of action functions is (not surprisingly) similar to the others: The displayQAPair function creates a DIV element that will hold the question-and-answer pair if needed and requests the data transfer from the server (answer.asp). The updateAnswer callback function then creates the necessary DL, DT, and DD elements.

  • + Share This
  • 🔖 Save To Your Account