JavaScript
  Home arrow JavaScript arrow Page 6 - JavaScript Remote Scripting: Processing XM...
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Mobile Linux 
App Generation ROI 
IBM® developerWorks 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
JAVASCRIPT

JavaScript Remote Scripting: Processing XML Files
By: Alejandro Gervasio
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 5 stars5 stars5 stars5 stars5 stars / 11
    2005-10-05

    Table of Contents:
  • JavaScript Remote Scripting: Processing XML Files
  • XML in the client: the basics of AJAX XML processing
  • Reading XML files with AJAX: defining the “sendRequest()” function
  • Checking the progress of a request: a quick look at the “stateChecker()” function
  • Displaying XML data: defining the “createDataContainer()” and “displayData()” functions
  • Putting the pieces together: listing the complete script

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    ADVERTISEMENT


    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.

       · This second part of the series goes through the development of a JavaScript...
       · HiPlease can any one help me to manage a stick up footer on the website for IE...
     

    JAVASCRIPT ARTICLES

    - Validating Digits and Dates with jQuery`s Va...
    - Validating Ranges, Emails, and URLs with jQu...
    - More Uses for the jQuery Tooltip Plug-in`s b...
    - Building Image-Based Tooltips with the jQuer...
    - Using the jQuery Tooltip Plug-in`s bodyHandl...
    - Using Rangelength, Min and Max with the Vali...
    - Using Minlength and Maxlength with the Valid...
    - Modifying Tooltip Coordinates with the jQuer...
    - Applying a Fade Out Effect with the jQuery T...
    - Tracking Mouse Movements with the jQuery Too...
    - Checking Online Forms with the Validator jQu...
    - Nested JavaScript Functions as Objects
    - The jQuery Tooltip Plug-in
    - Active Client Pages at the Server
    - ACP Tab Web Page







    © 2003-2009 by Developer Shed. All rights reserved. DS Cluster 1 Hosted by Hostway
    Stay green...Green IT