JavaScript Remote Scripting: Fetching Server Data with the DOM - Putting the pieces together: showing the complete script (
Page 5 of 5 )
Considering that the script is comprised of two core files, first I’ll show the file responsible for fetching XML data, and second the file that parses and displays the headlines. Having said that, the “requester.htm” file looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>FETCHING XML DATA WITH THE DOM</title>
<script type="text/javascript">
function sendRequest(file){
// create <script> element
var js=document.createElement('script');
// assign <script> attributes
js.setAttribute('language','javascript');
js.setAttribute
('src','http://www.mydomain.com/scripts/script_file.php?
file='+file);
// append element to document tree & send GET request
document.getElementsByTagName('head')[0].appendChild(js);
}
// 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('news.xml');
}
}
</script>
<style type="text/css">
#container {
background: #ffc;
padding: 5px;
border: 1px solid #00c;
}
li {
margin-top: 3px;
}
a:link,a:visited {
font: bold 11px Tahoma, Arial, Helvetica, sans-serif;
color: #00f;
}
a:hover {
color: #f00;
}
</style>
</head>
<body>
</body>
</html>
And, with reference to the second file “script_file.php”, here’s its definition:
<?php
header('Content-Type: text/javascript');
echo 'var URL=new Array();var TITLE=new Array();';
// read XML file
$content=file_get_contents($_GET['file']);
// store XML file contents in array
$xml_parser=xml_parser_create();
xml_parse_into_struct($xml_parser,$content,$vals);
xml_parser_free($xml_parser);
// store titles in TITLE array & urls in URL array
foreach($vals as $key=>$value){
if($value[tag]=='URL'||$value[tag]=='TITLE'){
echo $value[tag].'['.$value[tag].'.length]=\''.$value
[value].'\';';
}
}
?>
// create data container
function createDataContainer(){
var div=document.getElementById('container');
if(div){return};
var div=document.createElement('div');
div.setAttribute('id','container');
document.getElementsByTagName('body')[0].appendChild(div);
}
// display data
function displayData(){
// reset data container
document.getElementById('container').innerHTML='';
var ul=document.createElement('ul');
document.getElementById('container').appendChild(ul);
for(var i=0;i<URL.length;i++){
// create links
var li=document.createElement('li');
var a=document.createElement('a');
// assign 'href' attribute
a.setAttribute('href',URL[i]);
// add link labels
a.appendChild(document.createTextNode(TITLE[i]));
li.appendChild(a);
ul.appendChild(li);
}
// remove <script> node
var js=document.getElementsByTagName('script')[0];
js.parentNode.removeChild(js);
// reset array values
URL=null;
TITLE=null;
// update headlines each 1 hour
setTimeout("sendRequest('news.xml')",3600*1000);
}
// create data container
createDataContainer();
// display data
displayData();