在 Ajax 中使用 XSLT 转换 XML
本系列的 第 1 部分 提出了问题说明:建立便于插入任何 Web 页面的天气面板。天气面板采用 Ajax 技术实现,利用 United States National Weather Service (NWS) 提供的数据。NWS 数据以 XML 格式提供,每 15 分钟更新一次。
本系列文章分析了实现天气面板的四种不同方法。第一部分中介绍的一种办法是利用一种 Apache Web 服务器规则将 NWS XML 数据代理给浏览器。然后通过 JavaScript 代码从 DOM 提取需要的数据,转变为 HTML 格式再显示出来。
这一部分介绍第二和 第三种方法。这两种办法有一点是共同的,即都使用 XSLT。
XSLT
XSLT 是一种查询 XML 并将其转换成其他格式的语言。这恰恰是我们所要对天气数据做的 工作 — 以 XML 格式存储,但需要某种对用户(或者浏览器)更友好的格式。 NWS 数据中有些是天气面板所不需要的。需要某种技术提取需要的数据。XSLT 可以同 时满足这两方面的要求。
本教程不是为了详细介绍 XSLT。关于 XSLT 的更多信息请参阅 developerWorks 文章 “What kind of language is XSLT?” (参见 参考资料)。
和其他很多计算机语言不同,XSLT 语法是有效的 XML。如果习惯于 C、Java、Perl 或 Python 语言,可能会造成一点麻烦。
由于这两种方法都使用 XSLT,我们首先来看看它。然后再介绍如何纳入总体解决方案。
使用 XSLT 转换数据
首先看看 NWS XML 数据格式。清单 1 显示了 压缩后的例子。
清单 1. 示例 NWS XML 数据文件 KNGU.xml(有删减)
<?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">
<credit>NOAA's National Weather Service</credit>
<credit_URL>http://weather.gov/</credit_URL>
<image>
<url>gif/xml_logo.gif</url>
<title>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 Jan 7, 2:53 pm EST
</observation_time>
<observation_time_rfc822>
Mon, 7 Jan 2008 14:53:00 -0500 EST
</observation_time_rfc822>
<weather>Fair</weather>
<temperature_string>74 F (23 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 18 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>