Home arrow JavaScript arrow Page 5 - JavaScript Remote Scripting: Fetching Server Data with the DOM
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
Rating: 5 stars5 stars5 stars5 stars5 stars / 11
October 12, 2005
TABLE OF CONTENTS:
  1. · JavaScript Remote Scripting: Fetching Server Data with the DOM
  2. · One step toward standardization: making http requests with the DOM
  3. · Setting up the server response: parsing XML in the server
  4. · Displaying XML data: defining the “createDataContainer()” and “displayData()” functions
  5. · Putting the pieces together: showing the complete script

print this article
SEARCH DEVARTICLES

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.

blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials