An Enhanced Ajax Approach to Active Client Pages

In this final part of a four-part series, I give you my enhancements to the AJAX approach to Active Client Pages. Before I conclude the series, I will introduce two other approaches to you. Keep reading to learn how to help your web pages load more quickly.

The Store

Active Client Pages Technology needs a store. With the Ajax approach, the store is in the JavaScript in the HEAD element of the master page. Data is stored in JavaScript variables, JavaScript arrays or JavaScript object properties. These elements would constitute the store. We saw this previously. The pages come and go but data for the different pages can remain in the store in the script of the HEAD element.

Other Methods of Storing Data

JavaScript 2D Array

If your data, including the information you need in advance, is in the form of a table (perhaps from a database), you can store it in a JavaScript 2D Array. You use the for-loop when creating a 2D array. The following code creates a 2D, 6 X 4 array.


a = new Array(6)

for (i=0; i < 6; i++)

{

a[i] = new Array(4)

}


HTML Table with Display Value of None

If your data, including the information you need in advance, is in the form of a table (from a database, perhaps), you can store it in an HTML Table whose value of the display property is set to "none." Your main HTML element in the master page is the DIV element. This DIV element has the HTML elements for the page and the Ajax script to download text (the page) in advance. When the value of the display property of a table or any HTML element is "none," the table does not occupy any space on the web page.

We can decide to have the DIV element, with one or more HTML tables, with the value of the display property of each of these tables set to "none." You keep your data in the cells of these tables. In the CSS normal flow, it is good to create these tables just before the DIV element of the master page. To create one of these tables, all you need to do is type the following:

<table id=“T1” style=“display:none”></table>

“T1” is the ID of the above table tag. You can use DOM features to add the rows and cells and cell contents. The DOM features you need are given below.

{mospagebreak title=The DOM Table}

Table Object Collections

cells[]

Returns an array containing each cell in a table.

rows[]

Returns an array containing each row in a table.


Table Object Properties

id

Sets or returns the id of a table.


Table Object Methods

insertRow()

Inserts a new row into a table.

deleteRow()

Deletes a row from a table.


TableRow Object

TableRow Object Collections

cells[]

Returns an array containing each cell in the table row.


TableRow Object Properties

id

Sets or returns the id of a table row.

innerHTML

Sets or returns the HTML between the start and end tags of a table row.

rowIndex

Returns the position of a row in the table’s rows collection.


TableRow Object Methods

insertCell()

Inserts a cell into a table row.

deleteCell()

Deletes a cell into a table row.


TableCell Object

TableCell Object Properties

cellIndex

Returns the position of a cell in the cell’s collection of a row.

id

Sets or returns the id of a table cell.

innerHTML

Sets or returns the HTML between the start and end tags of a table cell.


{mospagebreak title=The innerHTML Property}

Now that you are producing the content at the client, it might interest you to be able to change the content of HTML elements. You probably already knew that you could change the table cell content with the innerHTML property. Many browsers today allow you to change the content of almost any HTML element.


Consider the following code:


<html>

<head>

<script type="text/javascript">

function changeContent()

{

document.getElementById(‘S1′).innerHTML = "two";

document.getElementById(‘D1′).innerHTML = "second";

}

</script>

</head>

<body>

<span id="S1">one</span>

<div id="D1">First</div>

<button type="button" onclick="changeContent()">Click</button>

</body>

</html>

When you click the button, the contents of the SPAN and DIV elements will be changed by the function in the script. This is just to show you that, as your web pages or forms would be produced at the client, you may have to change the contents of HTML elements. This feature is not imperative for ACP. It comes as a complement. You can try the above code.

Images

Ajax is used to obtain a string from the server or an XML document without the user being conscious of the process. So in ACP, Ajax cannot help us to obtain images in advance. However I discovered that the HTML OBJECT element could download images in advance. This is a subject for a different article; however see the introduction I give on the next page.


{mospagebreak title=The HTML OBJECT Element}

Most user agents have built-in mechanisms for rendering common data types such as text, GIF images, colors, fonts, and a handful of graphic elements. To render data types they don’t support natively, user agents generally run external applications. The OBJECT element allows authors to control whether data should be rendered externally or by some program, specified by the author, that renders the data within the user agent.

The OBJECT element has an attribute called the archive attribute. This is what the specification says about this attribute: "This attribute may be used to specify a space-separated list of URIs for archives containing resources relevant to the object, which may include the resources specified by the ‘classid’ and ‘data’ attributes. Preloading archives will generally result in reduced load times for objects."

What really interests us here is the last statement, “Preloading archives will generally result in reduced load times for objects.” Note that URLs are URIs.

The HTML OBJECT Element, Images and ACP

We can make the URLs for the archive attribute be those of the images at the server. We can have an HTML OBJECT as an element in the web page. The images will be downloaded in advance as the specification indicates. We can then display the image when we want. This is a subject for an entirely separate article, which I will write in the near future. 

{mospagebreak title=Summing Up}

Before we end, let us look at a summary of the Ajax approach, which includes my enhancements. I will also introduce the other two approaches.

The Ajax approach is based on Chuck’s Works. The Ajax approach does not use a Frameset. This is the summary of the Ajax approach, including my enhancements.

  • The master page has the DIV element, which displays the pages.

  • While the user is working, data of any type, including program script code, is downloaded from the server in advance, without the knowledge of the user, by Ajax.

  • It is advisable to put the Ajax script at the bottom of the page. Each page can have Ajax script to download data in advance.

  • The downloaded data has to be stored in the JavaScript variables, JavaScript object properties and JavaScript arrays in the script in the HEAD element of the master page. The string form of a page, downloaded, should have only the HTML elements (sub strings) that would fit into a DIV element.

  • Pages are produced by script that is in the HEAD element of the master page or script in the BODY element of a page’s downloaded content.

I have already written a three-part series on one of the ACP approaches. I call it the Script approach. In this approach, external JavaScript plays a great role. My own approach combines the Script approach, the Ajax approach and my enhancements.

For each of the three different approaches, you have my enhancements, which are features that are not in Vlad and Chuck’s works, according to what I read from their web pages. Vlad and Chuck did not give all the advantages I gave you in part one of the series. I have to give you modified versions of their works to suit these advantages. Each of them has done good work, which solves certain problems. I gave you a different and modified version of their results in order to solve more problems. I think they are still developing their results. So, they may develop their approaches in different dimensions.

Summary of ACP

Let us talk about ACP in general here. In this series, you have seen the Ajax approach. You will see the other approaches later in different series. This is the summary:

  • While the user is working, data of any form, including program script code and images, is downloaded from the server in advance, without the knowledge of the user.

  • This downloaded data has to be stored in some master page.

  • The pages are produced by the script that is in the master page or a  downloaded script.

We have come to the end of the series. We have seen that Ajax can also be used for Active Client Pages. In other words, Ajax can solve more problems than those for which it was invented. We are thankful to Chuck for coming up with a method from which the Ajax approach is derived.

And this is the end of the series.

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

chat sex hikayeleri Ensest hikaye