在Ajax中进行XML处理,第2部分: 两种使用Ajax和XSLT的方法

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

时间: 2024-10-18 06:37:59

在Ajax中进行XML处理,第2部分: 两种使用Ajax和XSLT的方法的相关文章

Office 2013中加入Strict Open XML和ODF 1.2两种新格式支持

微软宣布即将到来的Office 2013中Word将支持打开和编辑PDF之后,今天在Office官方博客上再次宣布将支持Strict Open XML和ODF 1.2两种新的文件格式.在Office 2010中已经支持Strict Open XML的打开和阅读之后,Office 2013首次支持写入功能. 新的Office 2013中也支持Open Document Format (ODF) 1.2,尽管在Office 2007 SP2中就已经被支持1.2标准,但是直到今年1月份才正式通过dva

Android中EditText显示明文与密码的两种方式_Android

效果图如下所述: 布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_pa

Android中EditText显示明文与密码的两种方式

效果图如下所述: 布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_pa

javascript中取前n天日期的两种方法分享

 这篇文章主要介绍了javascript中取前n天日期的两种方法,有需要的朋友可以参考一下 方法一:   代码如下: var d = new Date();   d = new Date(d.getFullYear(),d.getMonth(),d.getDate()-n);         方法二:    代码如下: var now = new Date();   now.setTime(now.getTime()-n*24*60*60*1000);  

ASP.Net中利用CSS实现多界面的两种方法_实用技巧

本文实例讲述了ASP.Net中利用CSS实现多界面的两种方法.分享给大家供大家参考.具体实现方法如下: 可以通过使页面动态加载不同CSS来实现多界面的效果: 方法一: 复制代码 代码如下: <%@page language="C#"%> <%@import namespace="System.Data"%> <script language="c#" runat="server"> publ

Ajax打开新窗口被浏览器拦截的两种解决办法

最近在做支付时发现打开支付窗口时被浏览器拦截了,百度了一下才发现是因为打开窗口前用ajax验证是否能支付,所以不是用户主动触发的打开ixin窗口,浏览器认为这样不安全,所以给拦截了. 解决办法一 先开始打开一个空的新窗口,然后改变新窗口的url,具体代码为 var wd = window.open(); $.ajax({ type: "POST", dataType: "json", url: URL, data: {orderNo:orderNo}, succes

在Ajax中进行XML处理,第3部分: 使用JSON并避免使用代理

简介:Ajax 风格的服务器调用不一定使用 XMLHttp 请求.本系列的最后一部分介绍天气面板的最后一种方法,利用 Web 公共服务 JavaScript Object Notation (JSON) 和动态脚本标记来实现. 前两部分介绍了三种方法创建可重用的天气面板.这些方法都采用了 Asynchronous JavaScript + XML (Ajax) 技术,特别是 JavaScript XMLHttpRequest 对象 来实现天气面板库.这些方法都使用了某种形式的 Web 代理将 X

在Ajax中进行XML处理,第1部分: 四种方法

在Ajax 程序中解析和转换XML 简介:任何编程问题都可以通过多种正确的方法解决.本系列共考察了四种创建一个 Asynchronous JavaScript + XML (Ajax) 天气预报面板(weather badge)的方法 ,这是一种小型可重用部件,可以轻松嵌入到任何 Web 页面.本文是第一篇文章,主要介绍一些基础内容,同时审视第一种方法 -- 遍历 DOM 树. 希腊哲学家亚里士多德曾经写到:"通往失败的道路有许多条--,但通往成功的道路仅有一条." 遗憾的是,亚里士多

Android中使用Gson解析JSON数据的两种方法_Android

Json是一种类似于XML的通用数据交换格式,具有比XML更高的传输效率. 从结构上看,所有的数据(data)最终都可以分解成三种类型: 第一种类型是标量(scalar),也就是一个单独的字符串(string)或数字(numbers),比如"北京"这个单独的词. 第二种类型是序列(sequence),也就是若干个相关的数据按照一定顺序并列在一起,又叫做数组(array)或列表(List),比如"北京,上海". 第三种类型是映射(mapping),也就是一个名/值对(