Completing a Tree with Active Client Pages

The first thing you have in the script is the declaration of the furnitureStr variable. This variable will hold the string (HTML content) for the furniture page. Next you have the definition of the ajaxFurn() function. This function will download the content of the furniture page as a string and assign it to the furnitureStr variable. Before this function ends, it calls the function to download the shoes content string. The ajaxFurn() function is actually called by the “ajaxFurn();” statement below it.

Next you have the declaration of the shoesStr variable. This variable will hold the string (HTML content) for the shoes page. After this you have the definition of the ajaxShoes() function. This function will download the content of the shoes page as a string and assign it to the shoesStr variable. Before this function ends it calls the function to download the bags content string. The ajaxShoes() function is actually called by the “ajaxShoes();” statement below it.

Next you have the declaration of the bagsStr variable. This variable will hold the string (HTML content) for the bags page. After this you have the definition of the ajaxBags() function. This function will download the content of the bags page as a string and assign it to the bagsStr variable. This function is actually called by the  “ajaxBags();” statement below it.

After this, you have three functions to open the three pages (windows). Before I talk about these functions, let me talk about the first Ajax function, ajaxFurn(). This is the complete function:

function ajaxFurn()

{

var xmlHttp;

try

{

// Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

}

catch (e)

{

// Internet Explorer

try

{

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}

catch (e)

{

try

{

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}

catch (e)

{

alert("Your browser does not support AJAX!");

}

}

}

xmlHttp.onreadystatechange=function()

{

if(xmlHttp.readyState==4)

{

furnitureStr = xmlHttp.responseText;

ajaxShoes();

}

}

xmlHttp.open("GET","http://localhost/cgi-bin/furniture.pl",true);

xmlHttp.send(null);

}

You have the xmlHttp variable; this variable will hold the XMLHttpRequest object. Next you have an “integrated” try…catch statement. This statement creates the XMLHttpRequest that will be recognized by the particular browsers.

Next you have the function that will assign the downloaded text to the  furnitureStr variable. This function is defined and at the same time assigned to the onreadystatechange variable, which is a property of the XMLHttpRequest object. Each time there is a change of the status of the request, this function is called because it has been assigned to the onreadystatechange property. All of these are taken care of by the XMLHttpRequest object. Additionally, responseText is a property of the XMLHttpRequest object.

Next in the Ajax code segment, you command the download. Two statements are used here. The first one has the URL of the executable file (furniture.pl) at the server, which will send the text in string form. The second statement must accompany the first.

This function reaches its last point of execution, when the readyState property of the XMLHttpRequest object is 4. When this happens, the following statements inside the function assigned to the onreadystatechange property are executed:

furnitureStr = xmlHttp.responseText;

ajaxShoes();

There are two statements here. We have talked about the first one, where the downloaded content string is assigned to the furnitureStr variable. The second statement calls the ajaxShoes() function, which will download the string content of the shoes page.

The other two Ajax functions are similar.

Let us now talk about the functions to open the windows. These are the functions:

function furnitureFn()

{

furnRef = window.open();

furnRef.document.write(furnitureStr);

}

function shoesFn()

{

shoesRef = window.open();

shoesRef.document.write(shoesStr);

}

function bagsFn()

{

bagsRef = window.open();

bagsRef.document.write(bagsStr);

}

The first statement in each of the functions opens a window and returns a reference. The next statement in each function uses this reference to write content into the opened window.

If you have read the other articles that I mentioned earlier in this series, then it will not be difficult for you to understand the rest of the code in the other files. To save time I will not explain the rest of the code. I hope you downloaded the complete code.

I hope you appreciated these two part series and you will be using the tree to assist you in your ACP projects.