AJAX is changing the way our traditional UI components have worked. JavaScript trees/menus have been used extensively in today's Web applications. With the advent of AJAX many developers have become intently interested in using it to enhance user experience.

This article details implementation of a tree widget that uses AJAX to fetch data. This is an ideal control for implementations where the tree is to be used to display large amount of data. Loading a tree with all the nodes at startup will make the browser slow or even hang. So there is a need to fetch data dynamically as it is requested by the user. AJAX comes in handy for this case.

This article details out the steps involved in creating an AJAX tree. Code samples are attached, to help you get started.

This article is primarily intended for AJAX developers. An understanding of AJAX and JavaScript is required; knowledge of Web services is an added advantage.

To create my demo for dynamically displaying data in a tree view, I used the Amazon E-commerce API, which fetches details about products from their catalog. I used this to fetch elements for the tree. It is an ideal tool to showcase this control. The demo, Amazon Catalog Tree, is found at http://lmap.co.nr/Amazon1.htm . Take some time to explore the demo before reading on to learn about its features and components.

Features
Cross Browser—Almost all browsers support AJAX in one form or another and this implementation is fairly generic. The application supports IE, Firefox, Mozilla, and Netscape.

Caching—The tree caches the data fetched. This decreases the latency and enhances the user experience.

Supports n-level hierarchy—The implementation is free from hierarchical depth. It's capable of displaying n-level hierarchy and handle cases when the depth of a tree is not constant; rather, it varies with the node.

Components
Server Side
The server side component is required if your AJAX API calls are cross domain. A cross-domain call is when your AJAX requests are sent to an external server. However, if you are fetching data from your own server, this component is not needed. In such a case your implementation will be using only client-side scripting.

Because my demo uses the Amazon Web service, it meets the conditions for cross domain and therefore the Server Side component was needed. It is a PHP script that routes the GET requests it receives and returns the response as a string. It acts as a service broker. The server side component, called servicebroker.php, is included in the download that accompanies this article.

Here is a sample request to servicebroker.php: http://server:port/php/servicebroker.php?myURL=www.yahoo.com

Client Side
The client side tree control is an extension of JSCookTree, which is an open source UI control to show a static tree. This article tells more about it.

Algorithm Description

The global variables include:
• mainTree—This is an array which holds the details of the tree nodes.
• exposedID—It records the ids of the node which have been opened. This is used to implement caching.

An example page, Amazon1.htm, is included in the download that comes with this article.

The following functions are added/modified to the srcJSCookTree.js file, which is also included in the download:

• Add function ctExposeItem1. This function opens a particular node in the tree based on the treeindex and id. The id is used to identify a particular node in the tree.
• Modify function ctOpenFolder. The modification is necessary to handle caching. Here we check if a node has been opened earlier. If it has been opened earlier then we have the details in array mainTree. Hence there is no need to make an AJAX request to fetch the details for the children nodes of a tree. Array exposedID is used to keep a track of the expanded nodes.
  
  We need to assign a function to each node. This function is called if a node is expanded. This can be implemented in a generic way using eval function. Hence we become independent of determining which function needs to be called for expanding a node.

The main script, AmazonAll1-p.js, which makes the AJAX calls has the following logic: It makes AJAX calls to get the data. After making an AJAX request we need to do the following in onreadystatechange function:

• Add the tree node id in exposedID array.
• Get the response from the AJAX request. If you are using the PHP script for cross domain calls, you will need to load the retuned text into a DOM object. The code snippet to do so is available here.
• Parse the returned XML and reconstruct the mainTree array.
• Expose the item using function ctExposeItem1. Example:

  
  var treeIndex = ctDraw ('mainTreeID', mainTree, ctThemeXP1,
  'ThemeXP', 0, 0);
  ctExposeItem1(treeIndex, browsenode[0]);
  

This outlines the implementation for the AJAX tree. Enjoy.

By shivhare