Home arrow JavaScript arrow A Simple Document Phase Example of Active Client Pages

A Simple Document Phase Example of Active Client Pages

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.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 5
July 31, 2009
  1. · A Simple Document Phase Example of Active Client Pages
  2. · The Master Page Code
  3. · The JavaScript Segment
  4. · Function to Develop and Load the Second Page Code Segment

print this article

A Simple Document Phase Example of Active Client Pages
(Page 1 of 4 )

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:


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.

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials