The Simple Example Code - AJAX

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.

TABLE OF CONTENTS:

By: Chrysanthus Forcha

Poor Best

Rating:

/ 4

October 21, 2008

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

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>

<!—The HTML elements are here -- >

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

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

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.

Next: The Script in the DIV in the BODY >>