XML processing in Ajax, part 2nd: Two ways to use Ajax and XSLT

Using XSLT to transform XML in Ajax

The 1th part of this series presents a description of the problem: setting up a weather panel that makes it easy to insert any Web page. The weather panel is implemented using Ajax technology, using the data provided by the United States National Weather Service (NWS). NWS data is provided in XML format and is updated every 15 minutes.

This series of articles analyzes four different ways to implement weather panels. One approach described in the first section is to use an Apache Web server rule to proxy NWS XML data to the browser. It then extracts the required data from the DOM through JavaScript code, which is then displayed in HTML format.

This section introduces both the second and third methods. One thing that is common to both approaches is the use of XSLT.

Xslt

XSLT is a language that queries XML and converts it into other formats. This is exactly what we want to do with weather data-stored in XML format, but needs some kind of friendlier format for users (or browsers). Some of the NWS data is not required by the weather panel. Need some kind of technology to extract the data needed. XSLT can meet both requirements at the same time.

This tutorial is not intended to introduce XSLT in detail. For more information about XSLT, see the DeveloperWorks article "What kind of language is XSLT?" (see Resources).

Unlike many other computer languages, XSLT syntax is a valid XML. If you are accustomed to C, Java™, Perl, or Python languages, you can create a bit of trouble.

Since both of these methods use XSLT, let's look at it first. Then we'll explain how to incorporate the overall solution.

Using XSLT to transform data

First look at the NWS XML data format. Listing 1 shows the compressed example.

Listing 1. Example NWS XML data file Kngu.xml (with deletions)

<?xml version= "1.0" encoding= "iso-8859-1"? >
<current_observation version= "1.0"
Xmlns:xsd= "Http://www.w3.org/2001/XMLSchema"
Xmlns:xsi= "Http://www.w3.org/2001/XMLSchema-instance"
xsi:nonamespaceschemalocation=
"Http://www.weather.gov/data/current_obs/current_observation.xsd" >
&LT;CREDIT&GT;NOAA ' s National Weather service</credit>
<credit_URL>http://weather.gov/</credit_URL>
<image>
<url>gif/xml_logo.gif</url>
&LT;TITLE&GT;NOAA ' s National Weather service</title>
<link>http://weather.gov</link>
</image>
<suggested_pickup>15 minutes after the hour</suggested_pickup>
<suggested_pickup_period>60</suggested_pickup_period>
<location>norfolk, naval Air Station, va</location>
<station_id>KNGU</station_id>
<latitude>36.94</latitude>
<longitude>-76.28</longitude>
<observation_time>
Last Updated on 7, 2:53 pm EST
</observation_time>
<observation_time_rfc822>
Mon, 7 2008 14:53:00-0500 EST
</observation_time_rfc822>
<weather>Fair</weather>
<temperature_string>74 F (C) </temperature_string>
<temp_f>74</temp_f>
<temp_c>23</temp_c>
<relative_humidity>34</relative_humidity>
<wind_string>from the southwest at 9 gusting to mph</wind_string>
<wind_dir>Southwest</wind_dir>
<wind_degrees>240</wind_degrees>
<visibility_mi>10.00</visibility_mi>
<icon_url_base>
http://weather.gov/weather/images/fcicons/
</icon_url_base>
<icon_url_name>
Skc.jpg
</icon_url_name>
<disclaimer_url>http://weather.gov/disclaimer.html</disclaimer_url>
<copyright_url>http://weather.gov/disclaimer.html</copyright_url>
<privacy_policy_url>http://weather.gov/notice.html</privacy_policy_url>
</current_observation>