A Simple Document Phase Example of Active Client Pages

This is the only JavaScript on the page. In this series a page and an HTML document are synonymous. This script has JavaScript statements grouped into three sub code segments. Let us look at the three segments.

The Store Segment

These are the statements for the store segment:

//the store

var firstName = "John";

var lastName = "Smith";

You have two JavaScript variables. Both of them have string variables. The first one has the value “John” and the second one has the value “Smith.”

The Ajax Code Segment

This is the longest of the three sub code segments. It is not long because it has a lot of executing statements; it is long because we use different, alternative ways to address different browsers. Each one is particular to a browser or set of browsers. This is the code segment:

//second page content

page2Doc = "";

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)

{

page2Doc = xmlHttp.responseText;

}

}

xmlHttp.open("GET","http://localhost/cgi-bin/sendPge2Str.pl",true);

xmlHttp.send(null);

You have the page2Doc string variable. This variable will hold the downloaded text to be used to develop and load the second page. Next you have the xmlHttp variable; this variable will hold the XMLHttpRequest object. Next you have an “integrated” try…catch statement. We have seen this before. This statement is long because of the different ways of addressing different browsers. It is this statement that makes the Ajax code segment long.

Next you have the function that will assign the downloaded text to the  page2Doc variable. This function is defined and at the same time assigned to the onreadystatechange variable, which is a property of the XMLHttpRequest object. Each time there is a change in the status of the request, this function is called, because it has been assigned to the onreadystatechange property. All these are taken care of by the XMLHttpRequest object. The responseText in the code is also a property of the XMLHttpRequest object.

You command the download next in the Ajax code segment. Two statements are used here. The first one has the URL of the executable file (sendPge2Str.pl) at the server, which will send the text in string form. The second statement must accompany the first. We have seen these statements before.