A Simple Document Phase Example of Active Client Pages
(Page 1 of 4 )
In this fifth part of a twelve-part series on Active Client Pages, we look at a simple example illustrating the Document Phase of Chrys’s Approach. You need good knowledge in HTML and JavaScript to understand this part of the series.
Description of the Example
There are three pages in the example. That is, there are three pages in the session. You type the address of the master page in the address bar of your browser and click Go. The first page appears. It has a button with the title "Load Second Page." You have to click the button. The second page will appear with the label "First Name" and the name “John” in an Input Text control next to it.
On the second page, you also see another label, "Last Name" and the name “Smith” in an Input Text control next to it. While the user is seeing the second page, he can change the value of the first name and last name by typing. There is also a button on the second page. This button has the title "Load Third Page." When you click this button the third page will appear.
The third page is like a verification page. It displays the first name and the last name (both label and value typed in for each case). These names are either the names that were initially displayed in the second page or the names edited by the user at the second page.
Technical Description of the Example
I used a personal web server and a browser to test the code. A personal web server is a simple web server you can use with your PC at home for your experiments. The personal web server I used is called Abyss Web Server X1. I got it free from the Internet. You can search the Internet and download it.
In the example, you have just the master HTML page and two Perl scripts. The master HTML page is in the root directory at the server. There is a cgi-bin directory in the root directory. This directory has the Perl scripts.
To get the master page, the user will have to type in the following address at the address bar of his browser:
http://localhost/simpleExample.htm
Remember, we are using a personal web server. Your domain is “localhost.” The name of the master page file is simpleExample.htm. When the user types in the address in the address bar of his browser and clicks Go, the master page file downloads; you then see the master page in your browser. For the Internet network, you will have to replace “localhost” in the above URL with you domain, e.g. www.mywebsite.com.
The master page is of course an HTML document. At the bottom of this code is a JavaScript with an Ajax code segment. This Ajax code segment downloads text, which will be used to develop the second page. With ACP, you should write your page so that it will be rendered as it arrives at the browser. The idea is that, as the HTML code for the master page arrives at the browser, it is being rendered (because of the way it was written). In the rendering process, as soon as the Ajax code segment is reached, it goes into action to download the text to be used to develop the next page.
With Ajax, the user is not conscious of the downloading process. By the time the user has finished reading the master page, the text to be used to develop the second page would have been downloaded. If the user then clicks the Load Second Page button, the second page will be loaded immediately (fast). The time which was supposed to be used to download the page would be omitted; in other words, there will apparently be no download time. This is one of the advantages of ACP. I like it!
The Store in the master page consists of just two JavaScript variables. One of these variables holds the first name and the other one holds the last name. The master page comes from the server with the variables and their values.
As the next page is loaded after you click the button on the current page, the store is moved into the next page. The second page also downloads text to be used to develop the third page using Ajax.
Next: The Master Page Code >>
More JavaScript Articles
More By Chrysanthus Forcha
