Home arrow AJAX & Prototype arrow Page 2 - The Ajax Approach to ACP: A Simple Example

The Simple Example Code - AJAX

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.

  1. The Ajax Approach to ACP: A Simple Example
  2. The Simple Example Code
  3. The Script in the DIV in the BODY
  4. The Back Button
By: Chrysanthus Forcha
Rating: starstarstarstarstar / 4
October 21, 2008

print this article



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:



//Minimum code used by all pages is here.




<div id="theDIV">

<!—The HTML elements are here -- >


<script type="text/javascript">

<!—JavaScript (Ajax) statements to download text in advance -- >





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];



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.

>>> More AJAX & Prototype Articles          >>> More By Chrysanthus Forcha

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Best AJAX Tutorials for Forms
- The Best AJAX Tutorials
- 8 Great Ajax Tutorials
- Using Ajax and jQuery
- Using Ajax and jQuery with HTML Forms
- Ajax.org Offers Cloud9 IDE for JavaScript
- Java Technologies Provider ICEsoft Releases ...
- Using Recaptcha in AJAX Prototype Framework ...
- Google's Closure Compiler Service API: Addit...
- Installing Google Web Toolkit: Introducing t...
- Google's Closure Compiler Service API: Displ...
- Google's Closure Compiler Service API: Deliv...
- Google's Closure Compiler Service API: the A...
- Google's Closure Compiler Service API: the S...
- Google's Closure Compiler Service API: Optim...

Developer Shed Affiliates


Dev Shed Tutorial Topics: