Home arrow JavaScript arrow Page 6 - JavaScript Remote Scripting: Processing XML Files
JAVASCRIPT

JavaScript Remote Scripting: Processing XML Files


In this article, you will learn how to use AJAX for reading and manipulating simple XML files, in order to implement a basic Web service. Specifically, you will learn how to develop a JavaScript application that fetches data from an XML file. By the end of this article, you will know the basics for using client-side parsed XML in your own applications.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 18
October 05, 2005
TABLE OF CONTENTS:
  1. · JavaScript Remote Scripting: Processing XML Files
  2. · XML in the client: the basics of AJAX XML processing
  3. · Reading XML files with AJAX: defining the “sendRequest()” function
  4. · Checking the progress of a request: a quick look at the “stateChecker()” function
  5. · Displaying XML data: defining the “createDataContainer()” and “displayData()” functions
  6. · Putting the pieces together: listing the complete script

print this article
SEARCH DEVARTICLES

JavaScript Remote Scripting: Processing XML Files - Putting the pieces together: listing the complete script
(Page 6 of 6 )

As I said before, below is the list of the whole script, including a few additional lines to run the program after the page has been loaded:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>READING XML FILES WITH AJAX</title>
<script type="text/javascript">
// initialize XMLHttpRequest object
var xmlobj=null;
var data=new Array();
// 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 Mozilla, 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 GET 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();
            // read XML data
            data=xmlobj.responseXML.getElementsByTagName
('message');
 // display XML data
            displayData();
        }
        else{
            alert('Failed to get response :'+ xmlobj.statusText);
        }
    }
}
// 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 at a given time interval
function displayData(){
    // reset data container
    document.getElementById('container').innerHTML='';
    var ul=document.createElement('ul');
    for(var i=0;i<data.length;i++){
        // create links
        var li=document.createElement('li');
        var a=document.createElement('a');
        // assign 'href' attribute
        a.setAttribute('href',data[i].getElementsByTagName('url')
[0].firstChild.nodeValue);
        // add link labels
        a.appendChild(document.createTextNode(data
[i].getElementsByTagName('title')[0].firstChild.nodeValue));
        li.appendChild(a);
        ul.appendChild(li);
    }
    document.getElementById('container').appendChild(ul);
    // update headlines each 1 hour
    setTimeout("sendRequest('news.xml')",5*1000);
}
// execute program when page is loaded
window.onload=function(){
    // check if browser is DOM compatible
    if(document.getElementById&&document.
getElementsByTagName&&document.createElement){
        // load XML file
        sendRequest('news.xml');
    }
}
</script>
<style type="text/css">
#container {
    background: #eee;
    padding: 5px;
    border: 1px solid #000;
}
li {
    margin-top: 5px;
}
a:link,a:visited {
    font: bold 11px Tahoma, Arial, Helvetica, sans-serif;
    color: #00f;
}
a:hover {
    color: #f00;
}
</style>
</head>
<body>
</body>
</html>

To wrap up

That’s it for now. Throughout this second part of the series, you’ve hopefully learned how to use AJAX for reading and manipulating simple XML files, in order to implement a basic Web service. Certainly, the concepts that I illustrated at the very beginning imply a challenge for developing richer applications that use remote scripting to provide users with a more interactive experience.

The third tutorial of the series goes one step further with remote scripting, by explaining its implementation through the use of fully-standard DOM methods, without getting a single foot into AJAX technology. Want to know more? Just wait for the next part!


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