The first time you sign into developerWorks, a profile is created for you. Select information in your profile (name, country/region, and company) is displayed to the public and will accompany any content you post. You may update your IBM account at any time.

All information submitted is secure.

The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerworks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

All information submitted is secure.

My developerWorks:

My notifications:

Sign out

Select a language:

Processing XML with jQuery

Build dynamic, XML-based UI apps with jQuery, XML, DOM, and Ajax

Aleksandar Kolundzija (ak@subchild.com), Web developer, Meebo

Aleksandar Kolundzija is a web developer with over 10 years of industry experience, currently managing the Frontend Engineering team at Meebo. He is also the founder and creator of the Gallerama.com web-based photo management application. He holds a Computer Science degree from Hunter College. For more information on Alex, you can check out his blog at www.subchild.com or find him on Twitter by his handle @subchild.

Summary: Did you know that you can use jQuery's fast and powerful DOM traversal and manipulation methods to process any XML file? This ability, combined with jQuery's ability to easily load XML files using Ajax, makes this JavaScript library a great choice for building dynamic, XML-based UI applications. In this tutorial, take a closer look at the specifics of this approach and explore its benefits and caveats. Along the way, you get an overview of DOM processing in the browser and discover how useful jQuery's methods can prove when you parse XML. The tutorial also outlines the basic steps in the development of a generic, browser-based live XML editor using the covered techniques.

Date: 01 Feb 2011
Level: Intermediate
PDF: A4 and Letter (129 KB | 24 pages)Get Adobe® Reader®

Activity: 93787 views
Comments:

Before you start

While this tutorial is useful to seasoned developers looking to pick up or sharpen their jQuery and XML processing skills, it also provides a practical overview of essential DOM scripting concepts, which can bring even the most junior JavaScript coders up to speed and allow them to grasp the full scope of the tutorial.

About this tutorial

Frequently used acronyms

Ajax: Asynchronous JavaScript + XML
DOM: Document Object Model
HTML: Hypertext Markup Language
JSON: JavaScript Object Notation
UI: User interface
W3C: World Wide Web Consortium
XML: Extensible Markup Language

As advanced media- and data-rich web applications grow in population within the browser, technologies such as XML and jQuery become important components in their architecture due to their wide adoption and flexibility. In this tutorial, you explore DOM processing within the browser, narrowing the focus to how these paradigms apply to XML in particular and how the jQuery library can speed up development and increase robustness.

The tutorial covers these specific topics:

Introduction to the DOM
XML and JavaScript in the browser
jQuery and XML
Case study: LiveXMLEditor

Prerequisites

This tutorial assumes that you have a basic understanding of HTML and JavaScript. To follow along with the code you need the following:

Your favorite text editor for writing and editing code.
The jQuery library. You can either download it and serve it locally, or include and serve it directly from the Google CDN.
A good browser. While most browsers in use today are supported, review the jQuery Browser Compatibility page for recommended browsers. Many UI engineers choose Firefox for development due to its useful plug-ins, of which the most popular is Firebug. Firebug is not required for this tutorial, but it is highly recommended.
Familiarity with a server-side language (PHP in particular) helps with specific sections, but it is not essential.

See Resources for links to all the tool downloads.

Comments