A Multiple Page Image Gallery with Active Client Pages
You can have a web page which has pictures. This page may have links to other pages that have pictures. The linked pages may also have links to pages that have pictures, and so on. In this second part of a two-part series I show you how to make the pictures in all these pages display quickly at the browser, when the user clicks a button. Of course, we are going to use ACP techniques to solve the problem. Only the first picture of the first page may be displayed slowly.
A Multiple Page Image Gallery with Active Client Pages - The Code (Page 3 of 4 )
I have already talked about the directories involved. I use a personal web server. So each URL will begin with http://localhost . There are four files: the master file (first page file) and the three Perl files for the three pages.
The Master Page
The master page resides in the root folder as an HTML file. Its name is example.htm. This is the skeleton for the code of the master page:
<html>
<head>
<script type="text/javascript">
//script to display the next image
</script>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<! - - One cell table to hold the hold the images in turn -- >
Please read the above skeleton. There are three Ajax functions. After the first one has finished its work, it calls the second one; after the second one has finished its work, it calls the third one. The third Ajax function does not call any other function. The code segment for the first Ajax function that calls the second Ajax function is:
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
dept0Str = xmlHttp.responseText;
ajaxDept1();
}
}
The second Ajax function called is ajaxDept1(), which is called from the inner block above, just after the downloaded text has been assigned to the dept0Str variable. This variable holds the string content of the page that will be produced when the button with the “Load Dep't One” label is clicked. I have not indicated the variable in the skeleton above.
I will explain just the operation of the first Ajax function; the other two are similar. The first Ajax function works with the dept0Str variable. This is the variable and the function.
You have the dept0Str variable, which holds the content of the page that will be produced when you click the button labeled “Load Dep't One.”
Let us talk about the Ajax function now. The name of the function is ajaxDept0. 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 dept0Str 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. responseText is also 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 (dept1.pl) at the server, which will send the text in string form. The second statement must accompany the first.
Everything being equal, the code segment that calls the next Ajax function is the last to be executed.
The operation of the other two Ajax functions is similar to the first. The third Ajax function does not call any other function.
Let us now look at the functions that produce the new pages. When you click the button labeled Load Dep't One, the dept0Fn() function is called. When you click the button label Load Dep't Two, the dept1Fn() function is called. When you click the button labeled Load Dep't Three, the dept2Fn() function is called. These functions operate in a similar way. I will explain the operation of just the first function, dept0Fn().
This is the dept0Fn() function:
function dept0Fn()
{
dept0 = document.open();
dept0 = dept0.write(dept0Str);
dept0 = dept0.close();
}
The first statement opens an output stream to receive the HTML text in string form. The dept0 variable is the reference returned by the “document.open()” expression. The second statement writes this HTML text using the document write() method. The write() method is preceded by the dept0 reference.
The third statement closes the output stream, thereby loading (opening) a new page (HTML document). After this function has been executed, you should see a new HTML document in your browser window. The elements of this HTML document are sub strings of the dept0Str string. The other two page opening functions operate in the same way.
HTML 
Downloading Long HTML Pages with ACP
