Fast FAQ Session with ACP - The Code
(Page 4 of 5 )
You should read the article I mentioned above if you do not know how to create the pages; all of the pages have the same design. In the explanation here, I will lay emphasis on how to produce the pages using ACP.
There are three web pages; each page has three questions. Each question has an answer collapsed into the question. When you click a question, its answer appears below it.
I use a Personal Web sever, so my domain is "localhost." To get the first page into your browser, you have to type http://localhost/faqacp.htm into the address bar of your browser and click Go. The name of the first page file is faqacp.htm.
There are three files for the three pages. There are two directories involved at the server: the root directory that has the file, faqacp.htm and the cgi-bin directory that has the other two pages as strings in Perl files. You have one string per page per Perl file. The cgi-bin directory is an immediate sub directory of the root directory at the server.
The names of the three files are faqacp.htm for the first page, pge1faqStr.pl for the second page and pge2faqStr.pl for the third page. At the browser, the three pages are opened by one window. Remember that the second two pages are each downloaded in advance as a string by its preceding page.
At the browser, you load the next page by clicking the button on the current page.
The First Page
When you type http://localhost/faqacp.htm into the address bar of your browser and click Go, you receive the first page. This is the skeleton code of the first page:
<html>p<head>
<style type="text/css">
/* style sheet statements */
</style>
<script type="text/javascript">
//JavaScript statements are here
</script>
</head>
<body>
< -- The questions, collapsed answers and the Button for page 1 -- >
<script type="text/javascript">
//content of page 1
var page1 = "";
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)
{
page1 = xmlHttp.responseText;
}
}
xmlHttp.open("GET","http://localhost/cgi-bin/pge1faqStr.pl",true);
xmlHttp.send(null);
function loadPage1()
{
//function to load the second page
}
</script>
<br />
<button type="button" onclick="loadPage1()">Load Page 2</button>
</body>
</html>
I will explain just the Ajax code segment and the function to load the second page. The explanation of the rest of the code segments can be found in the article I mentioned above.
Let us look at the Ajax code segment. You have the page1 string variable. This variable will hold the downloaded string to be used to develop and load the second page. Next 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 object using a method recognized by each browser.
Next you have the function that will assign the downloaded text to the page1 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 (pge1faqStr.pl) at the server, which will send the text in string form. The second statement must accompany the first.
Let us look at the loadPage1() function, which loads the second page. Now I consider the first page to be page zero, the second page to be page 1, and the third page to be page2. This is because in computing, counting generally begins from 0 and not 1. However, the user begins his counting from 1. The programmer always has to make the correspondences.
The loadPage1() function is:
function loadPage1()
{
page1Doc = document.open();
page1Doc.write(page1);
page1Doc.close();
}
The first statement opens an output stream for writing and returns a reference for the opened output stream. The next statement uses the reference and the document object write() method to write the second page's content to the output stream. The last statement closes the output stream, and by doing so, establishes the second page. After the last statement, you should see the second page displayed on the browser window.
Next: The Second Page >>
More HTML Articles
More By Chrysanthus Forcha
