Home arrow JavaScript arrow Page 3 - A Simple Document Phase Example of Active Client Pages
JAVASCRIPT

A Simple Document Phase Example of Active Client Pages


In this fifth part of a twelve-part series on Active Client Pages, we look at a simple example illustrating the Document Phase of Chrys’s Approach. You need good knowledge in HTML and JavaScript to understand this part of the series.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 5
July 31, 2009
TABLE OF CONTENTS:
  1. · A Simple Document Phase Example of Active Client Pages
  2. · The Master Page Code
  3. · The JavaScript Segment
  4. · Function to Develop and Load the Second Page Code Segment

print this article
SEARCH DEVARTICLES

A Simple Document Phase Example of Active Client Pages - The JavaScript Segment
(Page 3 of 4 )

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.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials