Active Client Pages: Simple Document Phase Example Continued

The JavaScript code segment has two sub code segments. Let us look at them.

The Ajax Code

We saw similar code in the previous part. So I will be brief here. This is the code segment:

//third page content

var page3Doc = "";

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)

{

page3Doc = xmlHttp.responseText;

}

}

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

xmlHttp.send(null);

You have the page3Doc string variable. This variable will hold the downloaded text to be used to develop and load the third page. Next you have the xmlHttp variable; this variable will hold the XMLHttpRequest object. Next you have an “integrated” try…catch statement. This statement creates the XMLHttpRequest that will be recognized by the particular browser.

Next you have the function that will assign the downloaded text to the page3Doc 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 of the status of the request, this function is called because it has been assigned to the onreadystatechange property. All of these are taken care of by the XMLHttpRequest object. responseText is also a property of the XMLHttpRequest object.

Next in the Ajax code segment, you command the download. Two statements are used here. The first one has the URL of the executable file (sendPge3Str.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.

The Code Segment for Developing and Loading the Third Page

In this section, we look at the sub code segment that develops and loads the third and last page. This is the code:

function loadThirdPage()

{

var firstName = document.getElementById('I21').value;

var lastName = document.getElementById('I22').value;

var pageThree = document.open();

pageThree.write(page3Doc);

pageThree.close();

pageThree.getElementById('S31').innerHTML = firstName;

pageThree.getElementById('S32').innerHTML = lastName;

}

It is a function. When the button in the second page is clicked, this function is called. This function resides in the second page. The first statement copies the value (the first name) of the first Input Text control to the firstName local variable. The second statement copies the value (lastName) of the second Input Text control to the lastName local variable. The next three statements create the third page using the page3Doc variable. This variable has the string content of the third page. We shall see this content below.

The next two lines copy the first name and last name into SPAN elements of the third page. These statements use the firstName and lastName local variables. Now, you may be wondering why we did not use the following statements:

pageThree.getElementById('S31').innerHTML = document.getElementById('I21').value;

pageThree.getElementById('S32').innerHTML = document.getElementById('I22').value;

I did this and it did not work with any of the major browsers.