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

The Ajax Approach to ACP: A Simple Example

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.

TABLE OF CONTENTS:
  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
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

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.



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

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

AJAX & PROTOTYPE ARTICLES

- 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: