Home arrow JavaScript arrow Page 4 - JavaScript Remote Scripting: Processing XML Files

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

JavaScript Remote Scripting: Processing XML Files - Checking the progress of a request: a quick look at the “stateChecker()” function
(Page 4 of 6 )

If you’re used to writing JavaScript functions that verify the status of http requests, then the “statusChecker()” function should be pretty straightforward. First off, let’s see how it looks and then discuss its logic:

function stateChecker(){
    // if request is completed
        // if status == 200 display text file
            // create data container
            // read XML data
 // display XML data
            alert('Failed to get response :'+ xmlobj.statusText);

With reference to the function above, its logic can be explained through two simple steps. Of course, the first one involves checking the request’s status by verifying the values of both “readyState” and “status” properties. Once the request has been successfully completed, the second step takes place. Notice that the code calls the “createDataContainer()” function, which is tasked with building the required (X)HTML structure for displaying headlines. However, let’s pause for a moment and pay attention to the following line:


What this line of code does is simply store in the “data” array all the “<message>” nodes defined within the XML file that you saw previously, by applying the “getElementsByTagName()” method to the “responseXML” property. In a nutshell, this expression shows how easy it is to fetch XML data, by utilizing only DOM methods.

As you can see, the rest of the functions are fairly straightforward. After reading and storing all the “<message>” nodes in an array structure, the only thing left to be done is display the appropriate headlines. As you’ll see shortly, this operation is performed by the “displayData()” function.

blog comments powered by Disqus

- 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 

Developer Shed Affiliates


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