Downloading Long HTML Pages with ACP - Some Useful Information
(Page 3 of 4 )
When you break a long page into screen sections as done above, so that it downloads fast from the point of view of the user, you are actually making the page appear to download fast. In a way, you are tricking the user. When the user receives the first screen, he starts reading his page, while the rest of the page is downloaded without his being conscious of it.
For an ordinary long page, the user normally has to sit and wait until the entire page has been downloaded before he starts reading it or working with it. While waiting, he would see how images are being position and in some situations, he sees how text and images are jumping about (changing their positions) until the page is completely downloaded.
With ACP, as I show you in this article, you should not have this problem, since a screen with its images would normally be displayed first, before that next screen.
To prevent an image from jumping, whether you have an ACP long page, an ordinary long page or a complete short page, give the IMG tag the width and height dimensions of the image.
Code Details
The First Ajax Code Segment
The first JavaScript Ajax code downloads the second screen's content and adds it to the bottom of the first screen's content for display. This is the JavaScript for the first Ajax code:
<script type="text/javascript">
function screen2Ajax()
{
var screen2 = "";
var xmlHttp2;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp2=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp2=new ActiveXObject("Msxml2.xmLHttp");
}
catch (e)
{
try
{
xmlHttp2=new ActiveXObject("Microsoft.xmLHttp");
}
catch (e)
{
alert("Your browser does not support AJAX!");
}
}
}
xmlHttp2.onreadystatechange=function()
{
if(xmlHttp2.readyState==4)
{
screen2 = xmlHttp2.responseText;
document.getElementById('D2').innerHTML = screen2;
screen3Ajax();
}
}
xmlHttp2.open("GET","http://localhost/cgi-bin/screen2.pl",true);
xmlHttp2.send(null);
}
screen2Ajax();
</script>
You have the screen2 string variable. This variable will hold the downloaded text (string), which is the second screen's content. Next you have the xmlHttp2 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 browser.
After this you have the function that will assign the downloaded text to the screen2 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 in 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. The responseText property 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 (screen2.pl) at the server, which will send the text in string form. The second statement must accompany the first. We have seen these statements before.
The Ajax code segment is actually the content of the screen2Ajax() function. The call to this function is below the function. Now any script that is in the BODY element is executed as the page is loaded. So as the page is loaded, this function is called when the loading reaches the position of the function.
The Second Screen's Content file
At the server, the second screen's content is in a Perl file. The name of the second screen's content file is screen2.pl. This is a Perl file residing in the server, in the cdi-bin directory. When the Ajax code segment calls this file or any similar file at the server, the file is executed at the server. It is the responsibility of this file, as it is executed, to send the required string to the browser. When the required string arrives at the browser, the status of the XMLHttpRequest object will change. As a result of this change, the function assigned to the onreadystatechange property of the object will be executed. This is the content of the file at the server:
$returnStr = qq{
Screen 2 HTML Elements e.g. <button type="button" onclick="alert('Screen Two')">Screen Two Button</button>
};
print $returnStr;
The Perl component of this file consists of two statements. The first Perl statement uses the qq{} Perl quote operator to assign the string to the $returnStr Perl variable. The second Perl statement is “print $returnStr;”, which returns the string to the browser. The content of the quote operator is the second screen's content, exactly as it would be in the page at the browser. The quote operator allows you to write code as a string without escaping the entities.
After the first Ajax code segment receives the content of the second screen, it writes it into the first empty DIV element. This DIV element holds the content of the second screen.
The Second Ajax Code Segment
Note the position of the second Ajax Code segment in the skeleton above. This code segment is similar to the first Ajax Code Segment. It is the first Ajax function that calls the second Ajax code segment, just after it has received and assigns the second screen content to its variable. In order to save time, I will not explain the second Ajax code segment. I will give you a link near the end of this article from which you can download the complete code.
After the second Ajax code segment receives the content of the third screen, it writes it into the second empty DIV element. This DIV element holds the content of the third screen.
The Third Screen's Content file
This is the content of the Perl file for the third screen's content at the server:
$returnStr = qq{
Screen 3 HTML Elements e.g. <button type="button" onclick="alert('Screen Three')">Screen Three Button</button>
};
print $returnStr;
The explanation is similar to that of the previous file.
Next: Generalizing ACP for Long Web Pages >>
More HTML Articles
More By Chrysanthus Forcha
