掌握 Ajax,第 8 部分: 在请求和响应中使用 XML

第8 部分: 在请求和响应中使用XML

在 本系列的上一篇文章 中,您看到了Ajax 应用程序如何以XML 格式化发往服务器的请求。还了解了为什么这在大多数情况下并不是一个好主意。这篇文章主要探讨在大多数情况下确实是 好主意的一种做法:向客户机返回XML 响应。 dedecms.com

我其实并不喜欢写那种主要告诉您什么不应该 做的文章。很多时候,那都会是一篇非常愚蠢的文章。我要在前半篇文章中解释某些东西,然后在后半篇文章中说明使用您刚刚才学会的那种技术是一个多么糟糕的主意。在很大程度上,上一期文章正是这样一种情况,那篇文章教您如何将XML 作为Ajax 应用程序的请求数据格式使用。 内容来自dedecms

但愿这篇文章能够弥补您花费在学习XML 请求上的时间。在Ajax 应用程序中,使用XML 作为发送数据的格式的理由很少,但使服务器向 客户机回发XML 的理由很多。因此,您在上一篇文章中学到的关于XML 的知识最终将在这篇文章中体现出某些价值。 dedecms.com

服务器(有时)不能响应太多的请求 织梦内容管理系统

在深入钻研从服务器获取XML 响应的技术之前,您需要理解,为什么说使服务器发送XML 来响应请求是一个好主意(以及这与客户机发送XML 请求不同的原因所在)。

内容来自dedecms

客户机以名称/值对发送请求

内容来自dedecms

回忆一下上一篇文章,就会知道,在大多数情况下,客户机不需要使用XML,因为他们会使用名称/值对发送请求。因此,您可能会发送一个这样的名称:name=jennifer。只需简单地在连续的名称/值对之间添加一个“与” 符号(&),即可将其放在一起,就像这样:name=jennifer&job=president。使用简单的文本和这些名称值对,客户机即可轻松向服务器请求多个值。很少需要用到XML 提供的额外结构(及其带来的额外开销)。 织梦内容管理系统

实际上,需要向服务器发送XML 的所有理由都差不多可以归入以下两个基本的类别中: 内容来自dedecms

服务器仅 接受XML 请求。在这类情况下,您别无选择。上一期文章中介绍的基础知识应已使您掌握了发送此类请求所必需的工具。 dedecms.com

您正在调用一个仅接受XML 或SOAP 请求的远程API。这实际上就是上一种情况的特例,但值得单独拿出来提一下。如果您希望在一个异步请求中使用来自Google 或Amazon 的API,就会有一些特殊的考虑事项。在下一期的文章中,我将介绍这些考虑事项,还会给出一些向API 发送此类请求的示例。

织梦内容管理系统

服务器无法(以一种标准方式)发送名称/值对

本文来自织梦

在您发送名称/值对时,Web 浏览器会发送请求,平台会响应该请求,并承载一个服务器程序,配合它将那些名称/值对转换成服务器程序可以轻松处理的数据。实际上,每一种服务器端技术—— 从Java™ servlet 到PHP、再到Perl、Ruby on Rails —— 都允许您调用多种方法来根据名称获取值。因此,获取name 属性只是小事一桩。

内容来自dedecms

这种情况并不会将我们引向另外一个方向。如果服务器使用字符串name=jennifer&job=president 应答一个应用程序,客户机没有任何标准化的简便方法来将每个对拆分成名称和值。您必须手动解析所返回的数据。如果服务器返回一个由名称/值对构成的响应,这样的响应的解释难度与使用分号、竖线或其他任何非标准格式化字符相同。 dedecms.com

  copyright dedecms

织梦好,好织梦

给我一点空间! 本文来自织梦

在绝大多数HTTP 请求中,转义序列%20 用于表示一个空格,文本“Live Together, Die Alone” 将以Live%20Together,%20Die%20Alone 的形式通过HTTP 发送。 dedecms.com

  copyright dedecms

对于您来说,这就意味没有任何简单的方法在响应中使用纯文本、使客户机以一种标准的方法获取并解释响应,至少在响应包含多个值时是如此。假设您的服务器只是要发回数字42,那么纯文本是很好的选择。但如果服务器要一次性发回电视剧Lost, Alias 和Six Degrees 的近期收视率又该怎么办呢?尽管可以选择许多种方法来使用纯文本发送这一响应(清单1 给出了一些示例),但没有一种是不需客户机进行某些处理的极其简单的方法,也没有一种是标准化的方法。

内容来自dedecms


清单1. 收视率的服务器响应(不同版本) 织梦好,好织梦

  dedecms.com

  copyright dedecms

show=Alias&ratings=6.5|show=Lost&ratings=14.2|show=Six%20Degrees&ratings=9.1

copyright dedecms

  dedecms.com

Alias=6.5&Lost=14.2&Six%20Degrees=9.1 内容来自dedecms

  织梦好,好织梦

Alias|6.5|Lost|14.2|Six%20Degrees|9.1

织梦内容管理系统

  织梦内容管理系统

尽管不难找到拆分这些响应字符串的方法,但客户机将不得不根据分号、等号、竖线和与符号解析并拆分这些字符串。这不是编写使其他开发人员能够轻松理解和维护的健壮代码的方法。

dedecms.com

进入XML

织梦好,好织梦

意识到没有任何标准的方法可以使服务器使用名称/值对响应客户机之后,使用XML 的原因也就显而易见了。向客户机发送数据时,名称/值对是非常好的选择,因为服务器和服务器端语言可以轻松解释名称/值对;向客户机返回数据时使用XML 也是如此。在本系列前几期的文章中,您已经看到了利用DOM 来解析XML,在后续的文章中,还会看到JSON 怎样提供了解析XML 的另一种选择。在所有这一切之上,您可以将XML 作为纯文本处理,并以这种方式获取其值。因此,有几种方法可从服务器获得XML 响应,并使用较为标准的代码提取数据,在客户机中使用这些数据。

织梦内容管理系统

还有一个额外的好处,XML 非常易于理解。比如说,大多数编写程序的人都能理解 清单2 中的数据。

内容来自dedecms


清单2. 收视率的服务器响应(XML 格式) dedecms.com

  本文来自织梦

 

织梦内容管理系统

  copyright dedecms

<ratings> copyright dedecms

<show>

本文来自织梦

<title>Alias</title>

本文来自织梦

<rating>6.5</rating> 本文来自织梦

</show>

copyright dedecms

<show>

copyright dedecms

<title>Lost</title>

内容来自dedecms

<rating>14.2</rating>

dedecms.com

</show> dedecms.com

<show>

织梦内容管理系统

<title>Six Degrees</title> 织梦好,好织梦

<rating>9.1</rating>

织梦内容管理系统

</show> copyright dedecms

</ratings> 内容来自dedecms

 

dedecms.com

在特定分号或撇号的含义方面,清单2 中的代码没有任何隐晦之处。

内容来自dedecms

  本文来自织梦

从服务器接收XML

内容来自dedecms

由于本系列的重点在于Ajax 应用模式的客户端,因此我不会深入探讨关于服务器端程序如何才能生成XML 响应的细枝末节。但在您的客户机接收XML 时,您需要了解一些特殊的考虑事项。 copyright dedecms

首先,您可使用两种基本的方式处理一个来自服务器的XML 响应:

copyright dedecms

作为碰巧被格式化为XML 的纯文本 内容来自dedecms

作为一个XML 文档,由一个DOM Document 对象表示。 本文来自织梦

其次,举例来说,假设有一个来自服务器的简单XML 响应。清单3 展示了与上面介绍的内容相同的收视率程序清单(实际上,是与 清单2 相同的XML,在这里再次给出只是为了使您便于查看)。我将在这部分的讨论中使用这段样本XML。 dedecms.com


清单3. XML 格式的收视率示例 本文来自织梦

 

本文来自织梦

  dedecms.com

 

dedecms.com

<ratings>

织梦内容管理系统

<show>

本文来自织梦

<title>Alias</title> 本文来自织梦

<rating>6.5</rating>

本文来自织梦

</show>

织梦好,好织梦

<show>

织梦内容管理系统

<title>Lost</title>

织梦内容管理系统

<rating>14.2</rating>

内容来自dedecms

</show>

dedecms.com

<show> dedecms.com

<title>Six Degrees</title>

内容来自dedecms

<rating>9.1</rating>

本文来自织梦

</show>

内容来自dedecms

</ratings> 本文来自织梦

 

内容来自dedecms

将XML 作为纯文本处理 本文来自织梦

处理XML 的最简单的选择(至少就学习新的编程技术而言),就是用与处理服务器返回的其他文本片段相同的方法来处理它。换言之,基本上就是忽略数据格式,只关注服务器的响应。

copyright dedecms

在这种情况下,您要使用请求对象的responseText 属性,就像在服务器向您发送非XML 响应时一样(参见 清单4)。

copyright dedecms


清单4. 将XML 作为普通服务器响应处理 织梦好,好织梦

  copyright dedecms

  内容来自dedecms

function updatePage() {

copyright dedecms

if (request.readyState == 4) { copyright dedecms

if (request.status == 200) {

织梦内容管理系统

var response = request.responseText;

dedecms.com

  织梦内容管理系统

// response has the XML response from the server

本文来自织梦

alert(response);

织梦好,好织梦

}

织梦内容管理系统

}

本文来自织梦

}

内容来自dedecms

  织梦内容管理系统

 

织梦好,好织梦

内容来自dedecms

前文回顾

dedecms.com

为避免出现大量重复的代码,本系列这些后续的文章只给出与所探讨的主题相关的那部分代码。因此,清单4 仅仅展示了Ajax 客户机代码中的回调方法。如果您对于此方法在更大的异步应用程序环境中的位置尚不清楚,应回顾本系列的前几篇文章,那些文章介绍了Ajax 应用程序的基础知识。

本文来自织梦

 

dedecms.com

在这个代码片段中,updatePage() 是回调方法,request 是XMLHttpRequest 对象。最终,您将得到把所有一切串联在一起的XML 响应,位于response 变量之中。如果输出此变量,您会得到类似于清单5 的结果。(请注意,清单5 中的代码在正常情况下应该是连续的一个代码行。这里采用多行形式是为了显示正常。) 内容来自dedecms


清单5. response 变量的值 dedecms.com

  织梦好,好织梦

  织梦内容管理系统

<ratings><show><title>Alias</title><rating>6.5</rating>

织梦好,好织梦

</show><show><title>Lost</title><rating>14.2</rating></show><show>

本文来自织梦

<title>Six Degrees</title><rating>9.1</rating></show></ratings> 织梦内容管理系统

  织梦内容管理系统

这里,要注意的最重要的地方就是XML 是作为整体运行的。在大多数情况下,服务器不会使用空格和回车来格式化XML,而是将一切串联在一起,就像您在 清单5 中看到的那样。当然,您的应用程序不会过于在意空格,所以这算不上什么问题,但确实会使代码阅读起来较为困难。

本文来自织梦

在这里,您可以使用JavaScript split 函数来拆分此数据,并通过基本的字符串操作来获得元素的名称和值。毫无疑问,这是个令人头疼的过程,它无视于您花费了大量时间来阅读前几期文章中DOM(Document Object Model)相关内容这一事实。因此,我要强调,您应该牢记:利用responseText,可以轻松使用和输出服务器的XML 响应,但我不会为您展示太多的代码,在能够使用DOM 时,您不应选择这种方法来获得XML 数据,下面您会看到这一点。

织梦内容管理系统

将XML 当成XML 本文来自织梦

尽管可以 将服务器的XML 格式的响应视同为其他任何文本响应来处理,但这样做没有很好的理由。首先,如果您一直忠实地阅读这个系列,那么您已经学会了如何使用DOM 这种对JavaScript 友好的API 来操纵XML。还有更好的事情,JavaScript 和XMLHttpRequest 对象提供了一个属性,它能完美地获取服务器的XML 响应,并且是以DOM Document 对象的形式来获取它。 织梦好,好织梦

清单6 给出了一个实例。这段代码与 清单4 类似,但没有使用responseText 属性,回调函数使用的是responseXML 属性。该属性在XMLHttpRequest 上可用,它以DOM 文档的格式返回服务器的响应。 内容来自dedecms


清单6. 将XML 当作XML 内容来自dedecms

 

本文来自织梦

  内容来自dedecms

function updatePage() { 织梦内容管理系统

if (request.readyState == 4) { copyright dedecms

if (request.status == 200) {

copyright dedecms

var xmlDoc = request.responseXML;

织梦内容管理系统

 

copyright dedecms

// work with xmlDoc using the DOM

内容来自dedecms

}

内容来自dedecms

}

织梦好,好织梦

} copyright dedecms

 

dedecms.com

现在您有了一个DOM Document,可以像处理其他任何XML 一样处理它。例如,随后可能要获取所有show 元素,如 清单7 所示。 织梦好,好织梦


清单7. 获取所有show 元素

dedecms.com

 

内容来自dedecms

  dedecms.com

function updatePage() {

本文来自织梦

if (request.readyState == 4) { copyright dedecms

if (request.status == 200) {

copyright dedecms

var xmlDoc = request.responseXML; 织梦内容管理系统

  织梦好,好织梦

var showElements = xmlDoc.getElementsByTagName("show"); 本文来自织梦

}

织梦好,好织梦

}

copyright dedecms

}

dedecms.com

 

织梦好,好织梦

如果您熟悉DOM,从这儿开始,看起来就应该有几分熟悉了。您可以使用您所了解的全部DOM 方法,轻松操纵从服务器处接收到的XML。

内容来自dedecms

当然,您也可以混用普通的JavaScript 代码。例如,可以遍历所有show 元素,如 清单8 所示。 织梦内容管理系统


清单8. 遍历所有show 元素 本文来自织梦

 

本文来自织梦

 

织梦内容管理系统

function updatePage() { copyright dedecms

if (request.readyState == 4) {

copyright dedecms

if (request.status == 200) { dedecms.com

var xmlDoc = request.responseXML; 内容来自dedecms

 

内容来自dedecms

var showElements = xmlDoc.getElementsByTagName("show");

织梦好,好织梦

for (var x=0; x<showElements.length; x++) {

copyright dedecms

// We know that the first child of show is title, and the second is rating

内容来自dedecms

var title = showElements[x].childNodes[0].value; 本文来自织梦

var rating = showElements[x].childNodes[1].value; copyright dedecms

 

织梦好,好织梦

// Now do whatever you want with the show title and ratings 织梦好,好织梦

} dedecms.com

}

本文来自织梦

} 织梦好,好织梦

} copyright dedecms

 

内容来自dedecms

通过这段非常简单的代码,您正是将XML 响应作为XML 而不是无格式的纯文本进行了处理,还使用了一点DOM 和简单的JavaScript 来处理服务器响应。更重要的是,您使用了标准化的格式—— XML,而不是以逗号分隔的值或以竖线分隔的名称/值对。换句话说,您将XML 用在了最适合它的地方,避免了在不适合的地方使用它(比如说向服务器发送请求时)。

织梦内容管理系统

服务器端的XML:一个简单的示例

内容来自dedecms

我不会谈太多有关如何在服务器上生成XML 的内容,但花点儿时间看一个简单的示例是值得的,我没有给出过多的注释,以便您自行思考如何应对这样的场景。清单9 展示了一个简单的PHP 脚本,假设有一个异步客户机发出了请求,该脚本将输出XML 来应答此请求。 dedecms.com

这是一种强力(brute force)的方法,PHP 脚本实际上是手动生成XML 输出。您可以找到许多工具包和API,用于PHP 和其他众多允许您生成XML 响应的服务器端语言。无论您的情况如何,这都至少能让您了解生成XML 并以之应答请求的服务器端脚本看上去是什么样子。 copyright dedecms


清单9. 返回XML 的PHP 脚本 本文来自织梦

  织梦内容管理系统

 

织梦好,好织梦

<?php 织梦内容管理系统

 

内容来自dedecms

// Connect to a MySQL database 内容来自dedecms

$conn = @mysql_connect("mysql.myhost.com", "username", "secret-password");

织梦内容管理系统

if (!conn)

copyright dedecms

die("Error connecting to database: " . mysql_error()); 本文来自织梦

 

copyright dedecms

if (!mysql_select_db("television", $conn)) dedecms.com

die("Error selecting TV database: " . mysql_error());

内容来自dedecms

  dedecms.com

// Get ratings for all TV shows in database

内容来自dedecms

$select = 'SELECT title, rating'; copyright dedecms

$from = ' FROM ratings';

copyright dedecms

$queryResult = @mysql_query($select . $from);

dedecms.com

if (!$queryResult) 织梦内容管理系统

die("Error retrieving ratings for TV shows.');

织梦内容管理系统

  织梦好,好织梦

// Let the client know we're sending back XML copyright dedecms

header("Content-Type: text/xml"); dedecms.com

echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>";

copyright dedecms

echo "<ratings>";

copyright dedecms

 

织梦好,好织梦

while ($row = mysql_fetch_array($queryResult)) { 内容来自dedecms

$title = $row['title']; 本文来自织梦

$rating = $row['rating']; dedecms.com

 

本文来自织梦

echo "<show>

织梦好,好织梦

echo "<title>" . $title . "</title>";

dedecms.com

echo "<rating>" . $rating . "</rating>"; 本文来自织梦

echo "</show>";

copyright dedecms

}

本文来自织梦

 

内容来自dedecms

echo "</ratings>";

本文来自织梦

  本文来自织梦

mysql_close($conn); copyright dedecms

  copyright dedecms

?>

本文来自织梦

 

织梦内容管理系统

您应能够使用您偏爱的服务器端语言以类似的方式输出XML。IBM developerWorks 上有许多文章可以帮助您了解如何使用您喜爱的服务器端语言生成XML 文档.

dedecms.com

 

内容来自dedecms

解释XML 的其他可选方法

dedecms.com

除将XML 作为无格式文本处理或使用DOM 处理之外,还有一种非常流行的选择很重要,值得一提。那就是JSON(JavaScript Object Notation),这是一种绑定在JavaScript 内的自由文本格式。这篇文章中没有足够的空间介绍JSON,在后续文章中将探讨相关内容;只要提起XML 和Ajax 应用程序,您就很可能会听到有人谈论JSON,因此现在我将告诉您,您的工作伙伴们在谈论的究竟是什么。 织梦内容管理系统

大体上,可以用JSON 做的事,用DOM 都可以完成,反之亦然;选择主要取决于偏好,当然也要为特定的应用程序选择正确的方法。就现在而言,您应坚持使用DOM,在接收服务器响应的过程中熟悉DOM。我将占用几期文章的篇幅、用大量的时间去探讨JSON,之后您就可以随意选择在下一个应用程序中使用那种技术了。请继续关注本系列:后续文章中将介绍关于XML 的更多内容。 dedecms.com

  dedecms.com

结束语

本文来自织梦

从本系列上一篇文章开篇起,我几乎一直在谈论XML,但对于XML 在Ajax 应用模式中的贡献而言,我触及的依然仅仅是表面。在下一期文章中,您将更详细地了解那些您将希望 发送XML 的特殊场景(还会看到那些需要接收XML 的场景)。具体来说,您会在Ajax 交互的角度上观察Web 服务—— 包括专有Web 服务和Google 那样的API。 dedecms.com

简而言之,最重要的任务就是思考对于您的应用程序,XML 在什么时候才是有意义的。在很多情况下,如果您的应用程序工作良好,XML 只不过是又一个让您头疼的技术时髦词汇,您应该克制住仅仅为了宣称应用程序中有XML 而尝试它的冲动。

本文来自织梦

如果您处于这样一个环境中:服务器向您发送的数据非常有限,或者采用的是奇怪的逗号分隔、竖线分隔的格式,那么XML 可能会给您带来真正的收益。考虑处理或更改您的服务器端组件,以使它们用更为标准化的方式—— 使用XML —— 来返回响应,而不是使用那些健壮性比XML 差的专用格式。 内容来自dedecms

最重要的是,要认识到,您对Ajax 相关技术了解的越多,就必须越谨慎地制定决策。编写那些Web 2.0 应用程序确实很有趣(在后续文章中,您将重返用户界面,看看可以在这里做些什么很酷的东西),但要注意,确保您不是为了向朋友炫耀而在一个可以正常工作的Web 页面上滥用这些技术。我确信,您能编写出优秀的应用程序,那么就动手去做吧。完成后,再回来阅读下一期文章,学习关于XML 的更多知识。

织梦内容管理系统