The Ajax Approach to ACP: A Simple Example - The Simple Example Code (
Page 2 of 4 )
The code is relatively long, so I will give it to you in module-like forms with the explanation. There is only one HTML page here, which is the master page. The skeleton of the master page is as follows:
<html>
<head>
//Minimum code used by all pages is here.
</script>
</head>
<body>
<div id="theDIV">
<!—The HTML elements are here -- >
<script type="text/javascript">
<!—JavaScript (Ajax) statements to download text in advance -- >
</script>
</div>
</body>
</html>
This is the skeleton. You have the HTML start and end tags. You have the HEAD element. This element has the JavaScript that is used by all pages. The total script here should be as short as possible. Know that we are trying to reduce the download time for the master page as much as possible.
You also have the BODY element with its start and end tag. There are two principal elements in the BODY element. You have the DIV element and the SCRIPT element. The Script element is in the DIV element. All the HTML elements for the master page are in this DIV element.
At the bottom, you have the SCRIPT element. In general, this SCRIPT element has statements that download text (pages) in advance using Ajax. In this simple example only the second page will be downloaded.
The Head Script
Here, I talk about the script in the HEAD element of the master page. This is the script:
<script type="text/javascript">
var theArray = new Array()
function showSecondPage()
{
document.getElementById('theDIV').innerHTML = theArray[2];
}
</script>
You have the JavaScript array, theArray, which is created, and then you have the function, showSecondPage(). Each element of this array will hold the string (which has HTML tags) for a page. In our case there will be only one string element, which will hold the string for the second page. When the above function is called, it copies the string value of the array element with index 2 into the DIV element. When this is done, whatever was in the DIV element is replaced. That is what the statement in the function does.
The First Page
The DIV element has the content of the page and the script. Remember that for the first page, all of these are with the master page at the server. This is what our simple example has (the script is not shown):
This is the first page.<br />
<button type="button" onclick="showSecondPage()">Next Page</button>
You have the string, “This is the first page,” followed by the “<br />” element, followed by the button. When this button is clicked, the “showSecondPage()” function is called. This function produces the next page.
/ 4 
