AJAX Design

"Classic" HTTP-based page-swapping follows a procedure which is summarised as each page transition follows a common and very simple pattern. When performing a transaction the whole page is swapped with the new page even if only a small portion of the page 'literally' changed.

An optional pre-page script is invoked whose purpose is to fetch any data from the database that is needed for the page. The page is then rendered, and any start-of-page scripts are invoked.

The user then interacts with the page, eg fills out/edits a form and at some point causes an event to occur (eg onClick, onSubmit etc). An optional action script is invoked whose purpose is to validate and process any submitted data from the page (eg save it) and switches reference to the next HTML page and the process repeats.

Ajax applications follow a framework which is summarised and represented in the image below.

In our applications' Ajax-mode, we use the following concepts:

A Container Page which is the complete HTML page that resides in the browser. A Container Page can be either any static page.

Page Fragments which are chunks of markup that replace the innerHTML of specified tags within the Container Page.

The great thing in our AJAX model is that it treats the Page Fragments as if they are "classic" HTML pages, and they can have all the features of a standard HTML page including:

• Pre-page script
• Action script(s)
• Custom Tags
• Session Variable references

Each Ajax event transition follows a common and very simple pattern. This simple framework allows any Ajax-based web application of any complexity and sophistication to be constructed extra-ordinarily quickly and easily:

The Container Page is created according to the HTML "classic" Model. The user then interacts with the Container page, and at some point causes an event to occur (eg onClick, onChange, onMouseOver etc). A request is sent to the back-end via the browser's broker which instructs the server to generate an associated Page Fragment. If the Fragment has a pre-page script, it is invoked. The purpose of the Pre-page script is to fetch any data from the database that is needed for the Fragment

The process then repeats for each event.