The Ajax Approach to ACP: A Simple Example (
Page 1 of 4 )
This is the third part of my four-part series, "Active Client Pages, An Ajax Approach." In this part I illustrate the Ajax approach with a simple example, complete with code. Be sure to read the first two parts; they will help you understand what I'm trying to accomplish here, though the first part of this article does include a quick summary.Description of the Simple Example
The master page comes with the first page from the browser. What the user sees in the first page is the text, “This is the first page” and a button with the title “Next Page.” When you click the “Next Page” button, you see the next page, which displays the text, “This is the second page.”
Technical Description
The master page has the DIV element. The contents of the first page are in the DIV element in the server; that is, the text “This is the first page” and the button are in the DIV element. The JavaScript code to download the text (content) for the second page is at the bottom of the DIV element. The script is executed when the master page is loaded. Remember: the script in the HEAD element is not executed when a web page is loaded, while that in the BODY element is executed.
The store is an array element in the HEAD element of the master page.
When the Ajax script at the bottom of the element is executed, it downloads the content for the second page in text form, without the user knowing. The content arrives as a string. It is assigned to the array element of index 2, in the HEAD element script. If there were a third page string, it would be assigned to the array element of index 3; if there were a fourth page string, it would be assigned to the array element of index 4; and so on. This means that the array element of index zero has nothing assigned to it.
Well, in this simple example, only one page string is used, for the second page, and so assigned to the array element of index 2. I chose the numbering as such so that the string for page 1 would correspond to the array element of index 1; the string for page 2 should correspond to the array element of index 2; that for page 3 to the array element if index 3; and so on. In our simple example, nothing is assigned to the array element of index 1. You can have the content of page 1 in string form at the server and have it downloaded in advance by Ajax and do the assignment, as you would with the other pages.
When you click the button on the first page, the content of the DIV element is replaced with the text (which can have HTML tags) that is the value of the array element of index 2.
That is the technical description of our simple example.
/ 4 
