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.

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.

{mospagebreak title=The Simple Example Code}

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:


<html>

<head>

//Minimum code used by all pages is here.

</script>

</head>

<body>

<div id="theDIV">


<!—The HTML elements are here — >

 

<script type="text/javascript">

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

</script>

</div>

</body>

</html>


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

}

</script>


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.

{mospagebreak title=The Script in the DIV in the BODY}

In this section, I talk about the script at the bottom of the first page. This script is in the BODY element. Remember that JavaScript in the HEAD element is executed when it is called, while JavaScript in the BODY element is executed when the page is loaded. This is the script:


<script type="text/javascript">

 

var xmlHttp;

 

try

{

// Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

}

catch (e)

{

// Internet Explorer

try

{

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}

catch (e)

{

try

{

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}

catch (e)

{

alert("Your browser does not support AJAX!");

}

}

}


xmlHttp.onreadystatechange=function()

{

if(xmlHttp.readyState==4)

{

theArray[2] = xmlHttp.responseText;

}

}

 

xmlHttp.open("GET","sendText.pl",true);

xmlHttp.send(null);

</script>


The features here are the same as in the previous part of the series. The only difference is that, in the previous part of the series, all of these statements are in a function. Here they are not in a function, so they are executed as the page is loaded. I will not repeat the explanation of the code.

The complete code can be downloaded at:


ajaxApproach.ZIP


{mospagebreak title=The Back Button}

With the Ajax approach to ACP, the Back button of the browser is not enabled, no matter how many pages you display. This is because no window is changed. If you click the browser Refresh (Reload) button, you would have the very first page.

If you need the Back and Forward buttons, then you should create you own. You can create them at the top-left corner inside your web page. You have to write code for them, so that when each one is clicked, the necessary page will be displayed (from the array). With the simple example we had, the pages are in string forms in the array in the master page. The functions for the buttons would be easy to write if the contents of the pages do not depend on one another.

Rendering Web pages as they arrive

With the Ajax approach to ACP, the first web page should be rendered as it arrives at the browser. If you design your web page according to normal CSS flow, it should be rendered by the browser as it arrives, everything being equal.

The main problem occurs with HTML tables. If you want a table to be rendered as it arrives, declare column properties (e.g. widths) at the start of the table definition. Avoid the particular use of "0*" to specify column width. If you do not specify the column widths, the table may not be rendered incrementally, as it arrives.

The secret lies in giving the table column widths values at the beginning of the table definition. The widths can be in pixels, percentage or proportionally e.g. width="3*".

Advantages of ACP

Before we end this part, let us recall the advantages of ACP.

Any information stored at the server and its analysis can be presented quickly to the user with ACP, independent of whether the Internet connection is fast or slow. Only the first page may take some time to download through a slow Internet connection.

Web pages are becoming voluminous because authors are putting a lot of script into them. This leads to lengthy download times. With ACP, downloads won’t take so long.

If you understand your scripting language very well, you will pay less for hosting since the analysis will now be done by your script at the client and not by some program at the server.

ACP frees the server from work and so increases overall speed of the World Wide Web. If every client uses ACP, a client will not have to wait too long for the server to serve other clients before it is served, since the processing will be done at the client and not at the server. In other words, the server will spend less time serving a client. One of the aims of N-Tier systems is to free the server from work. ACP also serves that purpose.

We will stop here and continue in the next part of the series.

[gp-comments width="770" linklove="off" ]

antalya escort bayan antalya escort bayan Antalya escort diyarbakir escort