Home arrow HTML arrow Page 3 - A Multiple Page Image Gallery with Active Client Pages
HTML

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.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
July 28, 2009
TABLE OF CONTENTS:
  1. · A Multiple Page Image Gallery with Active Client Pages
  2. · Use of ACP in the Example
  3. · The Code
  4. · The Three Pages

print this article
SEARCH DEVARTICLES

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 -- >

</table>

 

<br />

<button type="button" onclick="nextPic()">Next Picture</button><br /><br />

 

<! - - Five image tags -- >

 

<script type="text/javascript">

 

function ajaxDept0()

{

//Function to download one of the three pages in advance

//this page downloaded is referred to as Dep’t One

}

 

ajaxDept0();

 

 

function ajaxDept1()

{

//Function to download one of the three pages in advance

//this page downloaded is referred to as Dep’t Two

}

 

ajaxDept1();

 

 

function ajaxDept2()

{

//Function to download one of the three pages in advance

//this page downloaded is referred to as Dep’t Three

}

 

ajaxDept2();

 

function dept0Fn()

{

//function to open dep’t one page

}

 

function dept1Fn()

{

//function to open dep’t two page

}

 

function dept2Fn()

{

//function to open dep’t three page

}

 

</script>

 

<button type="button" onclick="dept0Fn()">Load Dep't One</button><br />

<button type="button" onclick="dept1Fn()">Load Dep't Two</button><br />

<button type="button" onclick="dept2Fn()">Load Dep't Three</button>

 

</body>

</html>

 

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.

 

dept0Str = "";

 

function ajaxDept0()

{

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)

{

dept0Str = xmlHttp.responseText;

ajaxDept1();

}

}

 

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

xmlHttp.send(null);

}

 

ajaxDept0();

 

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.


blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials