ACP Tab Web Page - The Ajax Functions
(Page 4 of 4 )
There is a script below the DIV element. This script has the one statement I talked about above, and the two Ajax functions. This is the first Ajax function:
function tab2Ajax()
{
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)
{
tab2Page = xmlHttp.responseText;
tab3Ajax();
}
}
xmlHttp.open("GET","http://localhost/cgi-bin/tab2.pl",true);
xmlHttp.send(null);
}
tab2Ajax();
This function downloads the string that contains the second real page's content. The function is called tab2Ajax(). The statement that calls the function is just below the function in the script, as indicated just above.
The function begins with the xmlHttp variable; this variable will hold the XMLHttpRequest object. Next you have an “integrated” try…catch statement. This statement creates the XMLHttpRequest object that will be recognized by the particular browser.
Next you have the function that will assign the downloaded text to the tab2Page 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 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.
This is the second Ajax function. It downloads the string content of the third real page. Its explanation is similar to the former function's.
function tab3Ajax()
{
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)
{
tab3Page = xmlHttp.responseText;
}
}
xmlHttp.open("GET","http://localhost/cgi-bin/tab3.pl",true);
xmlHttp.send(null);
}
tab3Ajax();
Bottom Border of Clicked Tab
With conventional tabs, when you click a tab, the bottom border of the button (Tab) develops the same color as the rest of the page below it. In this way it appears as if the bottom border has opened to send out its page content.
When a tab in our project is clicked, the onclick event of the tab can use CSS and JavaScript to change the color of the bottom border of the tab (button) clicked. Alternatively, you can design your tabs using an HTML element that has the onclick event; you then have to give this element special borders. I will not address all that in this article.
You now know how to make use of ACP to design a tab web page.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
