Home arrow AJAX & Prototype arrow Page 4 - Ajax Features Needed to Build Active Client Pages

Principles of the Ajax Approach - AJAX

This is the second part of my four-part series, Active Client Pages Ajax Approach. In this part of the series, we continue our discussion of the Ajax features we will need to use with ACP, and then we look at the principles of the Ajax approach.

TABLE OF CONTENTS:
  1. Ajax Features Needed to Build Active Client Pages
  2. More About the XMLHttpRequest Object
  3. The responseText Property
  4. Principles of the Ajax Approach
By: Chrysanthus Forcha
Rating: starstarstarstarstar / 4
October 14, 2008

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

Design your first page as you would normally for web design or web development. Let it not be long, so that it will download reasonably fast. This is your master page; it should not have a frameset. It has the store that keeps information necessary for the different pages.

All of the HTML contents of the first page are in a DIV element. The contents of the pages after the first one (second, third, fourth etc.) are downloaded in advance as texts (strings). When you want a new page, the content of the DIV element is replaced by one of the downloaded strings. When a string is downloaded, it is stored in the store.

The store is made up of JavaScript variables and/or JavaScript object properties and/or JavaScript arrays. The store should be in the script of the head element of the master page. When the page is downloaded, the size of the store should be small. The store grows as you download more data.

The Ajax script or function for downloading data (page contents) should be at the bottom of the page; that is, at the bottom of the DIV element. Only the first page comes directly from the server; the rest of the pages are downloaded as text in advance and kept in the store. When a page is needed, your JavaScript code simply replaces the content of the DIV element with the corresponding text from the store. The content of each page can include Ajax download functions. Your script can modify the text before displaying it.

The script in the HEAD element of the master page should be minimal. If you need more scripts, you can download them by putting an external script tag at the bottom of a page (the DIV) as follows:


<script src="scriptCode.js"></script>


The problem here is, when you replace the content of the DIV element, the script that was there will disappear, but you may need it again. Fortunately, there is a way you can add JavaScript statements, functions and objects to the script in the HEAD element by using the JavaScript top level function eval(); this is the subject of a different article, which will explain how you can use Ajax to download text, which will be converted to script.

With the Ajax Approach, calculations and analysis are done at the client by the overall JavaScript. This lets you design your master page in such a way that the content is rendered as it arrives at the browser.


I have given you the principles of the Ajax Approach. Let us stop here for now. We continue in the next part of the series.



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