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.