JAVASCRIPT

JavaScript Remote Scripting: Fetching Server Data with the DOM

This article provides 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. If you’re inclined to work very close to W3C standards, this is an approach worth considering, since it allows the implementation of Web services through a cross-domain integration.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 9

October 12, 2005

TABLE OF CONTENTS:

<!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.