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();
As you can see, the only points worth noting with reference to the above code is first, the call to the “sendRequest()” function after the document has been loaded, and second, the execution of both the “createDataContainer()” and “displayData()” functions respectively.
In a practical sense, if you run the complete script, including both files, you’ll get an output similar to this:
Even when the above screenshot doesn't provide the coolest look and feel for displaying headlines, it does demonstrate how XML data can be pulled out from the server and outputted directly to the browser, by utilizing only standard DOM methods (remember that AJAX isn’t a W3C standard yet).
With this example, I’m winding up my journey for showing some illustrative code for fetching data with the DOM, so join me to read the corresponding conclusions.
Wrapping up
As I said before, we’re done for now. Throughout this part of the series, I’ve provided you with a handy method for making JavaScript-based requests to the server and serving XML documents, all without the need to use AJAX technology. Moreover, if you’re inclined to work very close to W3C standards, this is an approach worth considering, taking into account that it allows the implementation of Web services through a cross-domain integration.
Over the next tutorial, I’ll be explaining how to use remote scripting –- particularly AJAX -- to display randomly-generated characters, useful for integrating into any application that requires real protection against simulated user input. You won’t want to miss it!
| 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. |
