Home arrow HTML arrow Page 3 - ACP and Browsers: Setting up an Example
HTML

ACP and Browsers: Setting up an Example


In this and the next part of this five-part series, we look at the code for a simple example of Active Client Pages that uses Chrys’s Approach. We shall use this example to demonstrate how browsers respond to ACP. This example was described in the previous part of the series. To save time and writing space, I will not repeat the description here.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
September 08, 2009
TABLE OF CONTENTS:
  1. · ACP and Browsers: Setting up an Example
  2. · The Master Page
  3. · The HEAD Element Content
  4. · The Second Page

print this article
SEARCH DEVARTICLES

ACP and Browsers: Setting up an Example - The HEAD Element Content
(Page 3 of 4 )

The HEAD element has a JavaScript, which has two functions. Let us look at the function details.

The precedeOrReturn(name) Function

The precedeOrReturn() function take the name parameter. This name is the name of the page for whose reference we are looking. This function should be in every page. The JavaScript in the window calling this function should know the name of the page that has this function. This is the function:


function precedeOrReturn(name)

{

if (window.name == name)

{

return window.self;

}

else

{

parentWin = window.opener;

return parentWin.precedeOrReturn(name);

}

}


When the function is called, it receives a window name. The if-statement checks if the window in which the function resides has that name. If it has the name, then the reference to the window is returned; otherwise, the function sends the request to the window that opened it.

The master page should be the first window in the session, so the else part is never executed in the master page. The else part is there because this function is in other opened windows.

The openWin1() Function

There is a button in the BODY element of the page. When this button is clicked, this function is called and it opens the next window in the session. This is the function:


function openWin1()

{

win1 = window.open("","page1","width=400,height=400");

win1.document.write(page1Win);

}


The first statement opens the new window. The next statement writes in the content of the opened window. The page1Win variable holds the content of the new window. This content is obtained as a string by Ajax and assigned to the variable.

The BODY Element

The BODY element has the HTML elements to be displayed, plus a JavaScript.

The HTML elements to be displayed

These are the elements:

This is page 0<br />

<button type="button" onclick="openWin1()">Open Page 1</button>

The JavaScript

This is the JavaScript:


<script type="text/javascript">


var storeVarMaster = "It worked!";


window.name = "master";


//content of page 1

var page1Win = "";


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)

{

page1Win = xmlHttp.responseText;

}

}

 

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

xmlHttp.send(null);


</script>


The first statement in the script is a variable with the value, “It worked!”. The store here is simple; it is made up of this variable. The value assigned to this variable will be displayed by a third window. The next statement gives the name "master" to this master page. The next statement declares the variable that will hold the content of the next page. The rest of the code is classic Ajax. It downloads the content of the next window (page) and assigns it to the page1Win variable.

For the Ajax code, 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 page1Win 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 (sendPge1Str.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
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

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