JavaScript Remote Scripting: Reading Data From the Server - Reusing the source code: listing the full script
(Page 5 of 5 )
As I said before, below is the full source code for the JavaScript program that you just saw. As usual, feel free to tweak the script and modify it to fit your particular needs:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>REMOTE SCRIPTING WITH AJAX</title>
<script type="text/javascript">
// initialize XMLHttpRequest object
var xmlobj=null;
// initialize global variables
var data=new Array();
var i=0;
// send http request
function sendRequest(doc){
// check for existing requests
if(xmlobj!=null&&xmlobj.readyState!=0&&xmlobj.readyState!=4){
xmlobj.abort();
}
try{
// instantiate object for Firefox, Nestcape, etc.
xmlobj=new XMLHttpRequest();
}
catch(e){
try{
// instantiate object for Internet Explorer
xmlobj=new ActiveXObject('Microsoft.XMLHTTP');
}
catch(e){
// Ajax is not supported by the browser
xmlobj=null;
return false;
}
}
// assign state handler
xmlobj.onreadystatechange=stateChecker;
// open socket connection
xmlobj.open('GET',doc,true);
// send request
xmlobj.send(null);
}
// check request status
function stateChecker(){
// if request is completed
if(xmlobj.readyState==4){
// if status == 200 display text file
if(xmlobj.status==200){
// create data container
createDataContainer();
// display data into container
data=xmlobj.responseText.split('|');
displayData();
}
else{
alert('Failed to get response :'+ xmlobj.statusText);
}
}
}
// create data container
function createDataContainer(){
var div=document.createElement('div');
div.setAttribute('id','container');
if(div.style){
div.style.width='500px';
div.style.height='45px';
div.style.padding='5px';
div.style.border='1px solid #00f';
div.style.font='bold 11px Tahoma,Arial';
div.style.backgroundColor='#eee';
document.getElementsByTagName('body')[0].appendChild
(div);
}
}
// display data at a given time interval
function displayData(){
if(i==data.length){i=0};
document.getElementById('container').innerHTML=data[i];
i++;
setTimeout('displayData()',20*1000);
}
// execute program when page is loaded
window.onload=function(){
// check if browser is DOM compatible
if(document.getElementById &&
document.getElementsByTagName &&
document.createElement){
// load data file
sendRequest('technews.txt');
}
}
</script>
</head>
<body>
</body>
</html>
To wrap up
That's all for now. In the second part of this article, I'll explain how to use JavaScript remote scripting for working directly with XML files by using AJAX technology. Also, I'll run through an illustrative example, helpful to implement within many client-side programs. Considering that remote scripting can boost considerably modern Web applications, the topic is worthy of review. See you soon!
| 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. |
