Home arrow JavaScript arrow Page 2 - 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 - XML in the client: the basics of AJAX XML processing
(Page 2 of 6 )

In addition to the “responseText” property that you saw in the first article, the XMLHttpRequest object offers the “responseXML” property, useful for processing server response, which has been sent back to the client as XML data. Using regular DOM methods, it’s possible to parse basically XML in the client and implement some kind of interaction, either for boosting the capabilities of user interfaces or the application layer itself.

With reference to the above deployed concepts, in conjunction with the sample news rotator that I developed in part one of this series, what I’ll do next is write a simple script that retrieves some headlines from a XML file, then processes them and finally displays the results directly on the browser. Considering that client-side flat text file processing has already been covered, the next example will illustrate how to parse XML files once the corresponding http request has been successfully completed.

As you might guess, in order to get the script parsing XML, first I’ll need to work with sample data served as XML. In this particular case, I’ll define a simple XML file, which contains some headlines to be included in the news rotator. Its definition is the following:

<?xml version="1.0" encoding="iso-8859-1"?>
<news>
<message>
<title>Learn advanced concepts about AJAX and Remote Scripting. Visit DevArticles.com now!</title>
<url>http://www.devarticles.com</url>
</message>
<message>
<title>PHP 5.1 now presents new key improvements such as PDO (PHP Data Objects)</title>
<url>http://www.php.net</url>
</message>
<message>
<title>Google to continue extending its GoogleMaps API</title>
<url>http://www.google.com/apis/maps/documentation/</url>
</message>
<message>
<title>MySQL releases Open Source Database Tools for Macintosh OS X</title>
<url>http://www.mysql.com</url>
</message>
<message>
<title>Release of Flash Player 8 allows to develop richer applications and communications</title>
<url>http://www.macromedia.com</url>
</message>
<message>
<title>PHP introduces more improvements in regards to SOAP, streams and SPL</title>
<url>http://www.php.net</url>
</message>
</news>

As you can see, the above listed XML file presents a simple structure for defining the appropriate headlines to be displayed, as well as the URLs tied to them. With reference to the document hierarchy, I’ve defined a general <news> tag, which is placed on top of the document tree, and then created a few <message> nodes to wrap up both <title> and <url> child elements. Of course neither style data nor element attributes have been defined for the document, thus its structure is very simple and understandable.

Now that you have a pretty clear idea of how the sample XML file looks, I can move on to start writing the complete JavaScript application.


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