神马文学网Ajax 和 XML: 五种常见 Ajax 模式
来源：百度文库 编辑：神马文学网 时间：2024/04/28 06:57:23
的确，Ajax 是 Web 2.0 热门术语，所有人都希望将其应用于自己的站点。但是它对我们究竟有什么意义？工程师该如何在架构的层面上将其集成到自己的站点中？在这篇文章中，我将介绍 Ajax 的基本知识，并展示一些已经成为 Web 2.0 开发最佳实践的 Ajax 设计模式。
请访问Ajax 技术资源中心，这是有关 Ajax 编程模型信息的一站式中心，包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。
首先，Ajax 仅仅是一个涉及一组技术的术语，包括 Dynamic HTML（DHTML）和 XMLHTTPRequest 对象。DHTML 由三个元素组合而成，它们分别是超文本标记语言（Hypertext Markup Language，HTML）、JavaScript 代码和级联样式表（Cascading Style Sheet，CSS）。在 Web 页面使用 JavaScript 代码，可以动态地改变页面，包括添加、删除或更改页面内容。这就是 DHTML 的动态 部分。JavaScript 代码使用 XMLHTTPRequest 对象在加载页面后向服务器请求数据。
这两种元素的组合 —— 从服务器动态请求数据然后使用这些数据更改页面 —— 就是 Ajax 的本质，也是 Web 2.0 站点的动态特性。
但这并没有真正告诉您如何实际应用这些特性以及如何在站点中使用它们。因此，需要一组简单的设计模式。 如果您对这个术语感到陌生，本文推介了一本非常优秀的同名书籍（参见参考资料）。这本书针对工程师经常面对的任务提供了一组实现模式。它不仅提供了设计系统的最佳实践，还介绍了工程师谈论代码时用到的术语。
本文介绍了五种常见 Ajax 设计模式。它们在使用 HTML、XML 和 JavaScript 代码从服务器获取数据方面有所不同。我先介绍最简单的模式，它将使用来自服务器的新 HTML 页面来更新页面。
最常见的 Ajax 任务也许就是向服务器请求更新的 HTML 并使用它更新部分页面。可能需要周期性地完成这一任务 —— 比如，更新股市报价。也可能要按需更新 —— 比如，对搜索请求进行响应。
清单 1 中的代码从服务器请求一个页面然后将内容放入页面主体的
请访问Ajax 技术资源中心，这是有关 Ajax 编程模型信息的一站式中心，包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。
首先，Ajax 仅仅是一个涉及一组技术的术语，包括 Dynamic HTML（DHTML）和 XMLHTTPRequest 对象。DHTML 由三个元素组合而成，它们分别是超文本标记语言（Hypertext Markup Language，HTML）、JavaScript 代码和级联样式表（Cascading Style Sheet，CSS）。在 Web 页面使用 JavaScript 代码，可以动态地改变页面，包括添加、删除或更改页面内容。这就是 DHTML 的动态 部分。JavaScript 代码使用 XMLHTTPRequest 对象在加载页面后向服务器请求数据。
这两种元素的组合 —— 从服务器动态请求数据然后使用这些数据更改页面 —— 就是 Ajax 的本质，也是 Web 2.0 站点的动态特性。
但这并没有真正告诉您如何实际应用这些特性以及如何在站点中使用它们。因此，需要一组简单的设计模式。 如果您对这个术语感到陌生，本文推介了一本非常优秀的同名书籍（参见参考资料）。这本书针对工程师经常面对的任务提供了一组实现模式。它不仅提供了设计系统的最佳实践，还介绍了工程师谈论代码时用到的术语。
本文介绍了五种常见 Ajax 设计模式。它们在使用 HTML、XML 和 JavaScript 代码从服务器获取数据方面有所不同。我先介绍最简单的模式，它将使用来自服务器的新 HTML 页面来更新页面。
最常见的 Ajax 任务也许就是向服务器请求更新的 HTML 并使用它更新部分页面。可能需要周期性地完成这一任务 —— 比如，更新股市报价。也可能要按需更新 —— 比如，对搜索请求进行响应。
清单 1 中的代码从服务器请求一个页面然后将内容放入页面主体的
标记中。
Dynamic content is shown between here:
And here.
清单 2 展示了代码请求的内容。
HTML encoded content goes here.
要查看真实环境的演示，请查看这个在线版本pat1_replace_div.html.
在 Firefox 中加载页面后，可以看到图 1 所示的结果。
现在回到清单 1 中的代码，来观察一些内容。第一个要注意的是 loadUrl() 函数，它从服务器请求一个 URL。该函数使用 XMLHTTPRequest 对象向服务器请求新内容。它还指定了一个回调函数 —— 本例中，是 processReqChange —— 当浏览器收到内容时将调用它。
processReqChange 函数将查看对象以确定请求是否完成。如果是的话，该函数将页面
Dynamic content is shown between here:
清单 2 展示了代码请求的内容。
HTML encoded content goes here.
要查看真实环境的演示，请查看这个在线版本pat1_replace_div.html
在 Firefox 中加载页面后，可以看到图 1 所示的结果。
现在回到清单 1 中的代码，来观察一些内容。第一个要注意的是 loadUrl() 函数，它从服务器请求一个 URL。该函数使用 XMLHTTPRequest 对象向服务器请求新内容。它还指定了一个回调函数 —— 本例中，是 processReqChange —— 当浏览器收到内容时将调用它。
processReqChange 函数将查看对象以确定请求是否完成。如果是的话，该函数将页面
标记的 innerHTML 设置为响应的文本。
将
将
标记作为一个动态内容的占位符，这是 Ajax 代码的主要组成部分。这些标记没有可见的表示形式（除非添加边框，像我这样做），但它们很好地标记了内容的放置位置。工程师还使用 标记用于可代替的片段，稍后我将对其进行演示。
和 标记的不同之处是前者加入了一个断行符（如一个段落），而后者使用边线勾画出一节内联文本。
暂时回到 processReqChange 函数，该函数对 status 和 readyState 的值进行检查非常重要。有些浏览器可能只在请求完成时才调用这个函数，而也有些浏览器会不断回调该函数从而告诉代码请求依然在运行。
该模式的另一种变体就是创建一个选项卡样式的显示。清单 3 展示了一个简单的选项卡式 Ajax 界面。
Tab 1 Tab 2
清单 4 显示了第一个选项卡的内容。
Tab 1 content
清单 5 显示了第二个选项卡的内容。
Tab 2 content
要查看真实环境的演示，请查看在线版本pat1_tabs.html.
当我在自己的浏览器上显示该页面时，我看到了第一个选项卡，如图 2 所示。
然后单击第二个选项卡的链接。浏览器检索第二个选项卡的内容然后将它显示在选项卡区域，如图 3 所示。
这是该设计模式的最典型用法 —— 从用户那里获得请求并使用新的内容更新部分显示，本例演示了创建选项卡显示的技巧。应用程序端的价值就是您可以为用户下载非常轻量级的页面，用户可以根据自己的需求访问这些内容。
在 Ajax 出现之前，最常见的技术是将所有的选项卡都放在页面上，然后根据需要显示或隐藏它们。这就是说即使从来不查看第二个选项卡，也会为其创建 HTML，既浪费服务器时间又浪费带宽。使用这种新的 Ajax 方法，只有当用户请求第二个选项卡时才会为其创建 HTML。
要查看真实环境的演示，请查看在线版本pat1_readmore.html.
该模式的另一个变化就是 Read more 链接，如图 4 所示。
假如想希望阅读更多关于我遛狗的经历，可以单击 Read more 链接，使该链接替换为完整的故事，如图 5 所示。
这样做的好处是顾客可以在无需刷新页面的情况下获得更多内容。
清单 6 显示了该页的代码。
清单 7 显示了 “read more” 部分的内容。
It was a nice day out. Warm and sunny. My dog liked getting out for a stretch.
这些代码演示的是 标记的用法，而非
暂时回到 processReqChange 函数，该函数对 status 和 readyState 的值进行检查非常重要。有些浏览器可能只在请求完成时才调用这个函数，而也有些浏览器会不断回调该函数从而告诉代码请求依然在运行。
该模式的另一种变体就是创建一个选项卡样式的显示。清单 3 展示了一个简单的选项卡式 Ajax 界面。
Tab 1 Tab 2
清单 4 显示了第一个选项卡的内容。
Tab 1 content
清单 5 显示了第二个选项卡的内容。
Tab 2 content
要查看真实环境的演示，请查看在线版本pat1_tabs.html
当我在自己的浏览器上显示该页面时，我看到了第一个选项卡，如图 2 所示。
然后单击第二个选项卡的链接。浏览器检索第二个选项卡的内容然后将它显示在选项卡区域，如图 3 所示。
这是该设计模式的最典型用法 —— 从用户那里获得请求并使用新的内容更新部分显示，本例演示了创建选项卡显示的技巧。应用程序端的价值就是您可以为用户下载非常轻量级的页面，用户可以根据自己的需求访问这些内容。
在 Ajax 出现之前，最常见的技术是将所有的选项卡都放在页面上，然后根据需要显示或隐藏它们。这就是说即使从来不查看第二个选项卡，也会为其创建 HTML，既浪费服务器时间又浪费带宽。使用这种新的 Ajax 方法，只有当用户请求第二个选项卡时才会为其创建 HTML。
要查看真实环境的演示，请查看在线版本pat1_readmore.html
该模式的另一个变化就是 Read more 链接，如图 4 所示。
假如想希望阅读更多关于我遛狗的经历，可以单击 Read more 链接，使该链接替换为完整的故事，如图 5 所示。
这样做的好处是顾客可以在无需刷新页面的情况下获得更多内容。
清单 6 显示了该页的代码。
Walking the dog
I took my dog for a walk today. Read more...清单 7 显示了 “read more” 部分的内容。
It was a nice day out. Warm and sunny. My dog liked getting out for a stretch.
这些代码演示的是 标记的用法，而非
标记。所使用的方法取决于用户界面（UI）的需求。但是正如您所看到的那样，无论哪种方法使用起来都很简单。
为页面获取新的 HTML 只是其中一件事情，如果您希望 JavaScript 代码在页面中使用数据执行一些更智能化的任务该怎么办呢？如何使用结构化的方式将数据发送到浏览器呢？毫无疑问，这正是使用 XML 的原因。
回页首
出于某些原因，Ajax 已成为 XML 的同义词，尽管 XML 不是绝对必要的。从上面几个例子可以看出，您完全可以返回简单的文本甚至是 HTML 片段 —— 或者 Extensible HTML（XHTML）—— 代码。但是发送 XML 自有其优势所在。
清单 8 显示的 Ajax 代码首先向服务器请求图书记录，然后将数据显示在页面内的表格中。
清单 9 显示了该页面的数据。
Jack Herrington Code Generation in Action Jack Herrington Podcasting Hacks Jack Herrington PHP Hacks
要查看真实环境的演示，请查看在线版本pat2_xml.html.
在浏览器中加载页面时，我看到了如图 6 所示的结果。
此页面和上一个模式中显示的页面之间最大的区别就是 processReqChange 函数，这里没有使用 responseText，而是 responseXML，这是一个 XML 文档对象模型（Document Object Model，DOM），该模型只有在来自服务器的响应是正确编码的 XML 时才是可用的。
通过使用 responseXML，我请求了 XML 文档的 标记的列表。然后分别从中获取 和 <author> 元素。接下来，为每本书向表中添加一行，再为每行添加包含作者和题目数据的单元格。<br>这是 XML 数据的最基本应用。更复杂的 JavaScript 代码可以执行客户端排序或根据返回的数据进行搜索。<br>遗憾的是，传递 XML 数据的缺点是需要浏览器多花费一些时间来解析整个 XML 文档。同样，JavaScript 代码在 XML 中查找数据也很复杂（参见清单 8）。一个替代办法是从服务器请求 JavaScript 代码。<br><img style='max-width:300px;' id="img19" src="http://mobiimg.360doc.com/imgComp.php?fi=0%7cnull%7c9889%7c502169_13%7cgif&s=300_0" /><br><img style='max-width:300px;' id="img20" src="http://mobiimg.360doc.com/imgComp.php?fi=0%7cnull%7c9889%7c502169_1%7cgif&s=300_0" /><br><img style='max-width:300px;' id="img21" src="http://mobiimg.360doc.com/imgComp.php?fi=0%7cnull%7c9889%7c502169_1%7cgif&s=300_0" /><br><img style='max-width:300px;' id="img22" src="http://mobiimg.360doc.com/imgComp.php?fi=0%7cnull%7c9889%7c502169_16%7cgif&s=300_0" /><br>回页首<br>从服务器请求 JavaScript 数据这种技术通常用于 JavaScript Object Notation（JSON）这种良好的代码。返回 JavaScript 数据的优点就是能够使浏览器高效地解析并创建使用起来更加简单的 JavaScript 数据结构。<br>让我们将清单 8 中从服务器读取 XML 的代码修改为从服务器读取 JavaScript 数据的代码。新代码如清单 10 所示。<br><html><head><script> var req = null; function processReqChange() { if (req.readyState == 4 && req.status == 200 ) { var dtable = document.getElementById( ‘dataBody‘ ); var books = eval( req.responseText ); for( var b in books ) { var elTr = dtable.insertRow( -1 ); var elAuthorTd = elTr.insertCell( -1 ); elAuthorTd.innerHTML = books[b].author; var elTitleTd = elTr.insertCell( -1 ); elTitleTd.innerHTML = books[b].title; } } } ...<br>所有的 HTML 代码保持不变。processReqChange 函数仅仅更改为读取 eval 从而从服务器返回 JavaScript 数据。该函数随后使用 eval 的 JavaScript 对象作为数据源，后者又将其添加到表中。<br>清单 11 显示了来自服务器的 JavaScript 数据。<br>[ { author: ‘Jack Herrington‘, title: ‘Code Generation in Action‘ }, { author: ‘Jack Herrington‘, title: ‘Podcasting Hacks‘ }, { author: ‘Jack Herrington‘, title: ‘PHP Hacks‘ } ]<br><img style='max-width:300px;' id="img23" src="http://mobiimg.360doc.com/imgComp.php?fi=0%7cnull%7c9889%7c502169_1%7cgif&s=300_0" /><br>要查看真实环境的演示，请查看在线版本pat3_js.html<img style='max-width:300px;' id="img24" src="http://mobiimg.360doc.com/imgComp.php?fi=0%7cnull%7c9889%7c502169_1%7cgif&s=300_0" />.<br>为什么众多 Ajax 应用程序工程师更喜欢使用 JavaScript 代码而不是 XML 来对数据编码？答案很明显。JavaScript 代码更容易读取和管理，并且也更容易被浏览器处理。<br>收集和显示所有的数据之后，即可看到 Ajax 的重点就是显示当前数据 —— 当前 最重要的部分。那么，如何保证总是能够从服务器获得最新的数据呢？<br><img style='max-width:300px;' id="img25" src="http://mobiimg.360doc.com/imgComp.php?fi=0%7cnull%7c9889%7c502169_13%7cgif&s=300_0" /><br><img style='max-width:300px;' id="img26" src="http://mobiimg.360doc.com/imgComp.php?fi=0%7cnull%7c9889%7c502169_1%7cgif&s=300_0" /><br><img style='max-width:300px;' id="img27" src="http://mobiimg.360doc.com/imgComp.php?fi=0%7cnull%7c9889%7c502169_1%7cgif&s=300_0" /><br><img style='max-width:300px;' id="img28" src="http://mobiimg.360doc.com/imgComp.php?fi=0%7cnull%7c9889%7c502169_16%7cgif&s=300_0" /><br>回页首<br>浏览器会尝试化 Web 流量，所以如果您对同一个 URL 请求两次，很可能还不如重新请求一次页面，您的浏览器将仅仅使用浏览器缓存中存储的页面。所以，Ajax 应用程序中另一个常见模式是使用 URL 中的随机元素来保证浏览器不会返回一个缓存的结果。<br>我最喜欢的技巧就是向 URL 添加当前时间的数字值。清单 12 展示了这一技巧。<br><html> <script> ... function loadUrl( url ) { url = url + "?t="+((new Date()).valueOf()); ... } ...<br><img style='max-width:300px;' id="img29" src="http://mobiimg.360doc.com/imgComp.php?fi=0%7cnull%7c9889%7c502169_1%7cgif&s=300_0" /><br>要查看真实环境的演示，请查看在线版本pat4_cache.html<img style='max-width:300px;' id="img30" src="http://mobiimg.360doc.com/imgComp.php?fi=0%7cnull%7c9889%7c502169_1%7cgif&s=300_0" />.<br>代码取自清单 1，对 URL 字符串执行了一些额外的 JavaScript 文本操作。我将 URL 连接到一个新的参数 t，它具有一个时间值。服务器是否能识别这个值实际上并不重要。这只不过是用来确保浏览器忽视其基于 URL 的页面缓存。<br><img style='max-width:300px;' id="img31" src="http://mobiimg.360doc.com/imgComp.php?fi=0%7cnull%7c9889%7c502169_13%7cgif&s=300_0" /><br><img style='max-width:300px;' id="img32" src="http://mobiimg.360doc.com/imgComp.php?fi=0%7cnull%7c9889%7c502169_1%7cgif&s=300_0" /><br><img style='max-width:300px;' id="img33" src="http://mobiimg.360doc.com/imgComp.php?fi=0%7cnull%7c9889%7c502169_1%7cgif&s=300_0" /><br><img style='max-width:300px;' id="img34" src="http://mobiimg.360doc.com/imgComp.php?fi=0%7cnull%7c9889%7c502169_16%7cgif&s=300_0" /><br>回页首<br>最后要演示的这个模式是第一个模式的高级版本：包含来自服务器内容的 <div> 标记的替代物。Web 应用程序中的一个常见问题是在响应用户输入时，必须更新显示页面中的一些区域。举例来说，在一个股票报价应用程序中，显示页面的一部分可能会展示最近的报价，而另一部分则显示最近报价的列表。<br>为更新显示页面中的多个区域，我使用了服务器的 XML 响应，它包含每个部分的数据。然后，使用一个正则表达式将响应分解为单个部分。清单 13 显示了这种技巧。<br><html> <head> <script> var req = null; function processReqChange() { if (req.readyState == 4 && req.status == 200 ) { var one = req.responseText.match( /\<one\>(.*?)\<\/one\>/ ); document.getElementById( ‘divOne‘ ).innerHTML = one[1]; var two = req.responseText.match( /\<two\>(.*?)\<\/two\>/ ); document.getElementById( ‘divTwo‘ ).innerHTML = two[1]; } } function loadXMLDoc( url ) { ... } var url = window.location.toString(); url = url.replace( /pat5_multi_segment.html/, ‘pat5_data.xml‘ ); loadXMLDoc( url ); </script> </head> <body> This is the content for segment one:<br/> <div id="divOne" style="border:1px solid black;padding:10px;"> </div> And segment two:<br/> <div id="divTwo" style="border:1px solid black;padding:10px;"> </div> </body> </html><br>清单 14 展示了来自服务器的数据。<br><segments> <one>Content for segment one</one> <two>Content for segment <b>two</b></two> </segments><br><img style='max-width:300px;' id="img35" src="http://mobiimg.360doc.com/imgComp.php?fi=0%7cnull%7c9889%7c502169_1%7cgif&s=300_0" /><br>要查看真实环境的演示，请查看在线版本pat5_multi_segment.html<img style='max-width:300px;' id="img36" src="http://mobiimg.360doc.com/imgComp.php?fi=0%7cnull%7c9889%7c502169_1%7cgif&s=300_0" />.<br>在浏览器中加载这段代码时，将看到图 7 所示的结果。<br><img style='max-width:300px;' id="img37" src="http://mobiimg.360doc.com/imgComp.php?fi=0%7cnull%7c9889%7c502169_38%7cjpg&s=300_0" /><br>在页面代码中，我还可以使用 XML 响应，因为服务器返回的是有效的 XML。但是使用正则表达式比从 XML 代码中分解单独部分更加简单。<br><img style='max-width:300px;' id="img38" src="http://mobiimg.360doc.com/imgComp.php?fi=0%7cnull%7c9889%7c502169_13%7cgif&s=300_0" /><br><img style='max-width:300px;' id="img39" src="http://mobiimg.360doc.com/imgComp.php?fi=0%7cnull%7c9889%7c502169_1%7cgif&s=300_0" /><br><img style='max-width:300px;' id="img40" src="http://mobiimg.360doc.com/imgComp.php?fi=0%7cnull%7c9889%7c502169_1%7cgif&s=300_0" /><br><img style='max-width:300px;' id="img41" src="http://mobiimg.360doc.com/imgComp.php?fi=0%7cnull%7c9889%7c502169_16%7cgif&s=300_0" /><br>回页首<br><img style='max-width:300px;' id="img42" src="http://mobiimg.360doc.com/imgComp.php?fi=0%7cnull%7c9889%7c502169_1%7cgif&s=300_0" /><br><img style='max-width:300px;' id="img43" src="http://mobiimg.360doc.com/imgComp.php?fi=0%7cnull%7c9889%7c502169_1%7cgif&s=300_0" /><br><img style='max-width:300px;' id="img44" src="http://mobiimg.360doc.com/imgComp.php?fi=0%7cnull%7c9889%7c502169_45%7cgif&s=300_0" /> 提交到 Digg <br><img style='max-width:300px;' id="img45" src="http://mobiimg.360doc.com/imgComp.php?fi=0%7cnull%7c9889%7c502169_1%7cgif&s=300_0" /><br><img style='max-width:300px;' id="img46" src="http://mobiimg.360doc.com/imgComp.php?fi=0%7cnull%7c9889%7c502169_47%7cgif&s=300_0" />发布到 del.icio.us<br><img style='max-width:300px;' id="img47" src="http://mobiimg.360doc.com/imgComp.php?fi=0%7cnull%7c9889%7c502169_1%7cgif&s=300_0" /><br><img style='max-width:300px;' id="img48" src="http://mobiimg.360doc.com/imgComp.php?fi=0%7cnull%7c9889%7c502169_8%7cgif&s=300_0" />提交到 Slashdot！<br><img style='max-width:300px;' id="img49" src="http://mobiimg.360doc.com/imgComp.php?fi=0%7cnull%7c9889%7c502169_1%7cgif&s=300_0" /><br>Ajax 的功能之强大与之被误解和误用的程度相当。本文中演示的模式为在 Web 应用程序中使用 Ajax 提供了一个不错的起点。除了使用这里提供的代码，我还建议您关注以下 Web 2.0 革命带来的某些出色的 Ajax 和 Web UI 库。其中最主要的是 Prototype.js 库，它提供了向浏览器发送以及从浏览器获取数据的简便方法，以及浏览器间兼容的方法更新 Web 页面内容。使用这些库的价值在于工程师可以在广泛的浏览器和平台上专注地维护和测试它们，这样可省去大量的工作和麻烦。<br>无论从哪方面说，就像本文中的模式演示的那样，Ajax 可以为您的应用程序添加动态行为。<br><img style='max-width:300px;' id="img50" src="http://mobiimg.360doc.com/imgComp.php?fi=0%7cnull%7c9889%7c502169_13%7cgif&s=300_0" /><br><img style='max-width:300px;' id="img51" src="http://mobiimg.360doc.com/imgComp.php?fi=0%7cnull%7c9889%7c502169_1%7cgif&s=300_0" /><br><img style='max-width:300px;' id="img52" src="http://mobiimg.360doc.com/imgComp.php?fi=0%7cnull%7c9889%7c502169_1%7cgif&s=300_0" /><br><img style='max-width:300px;' id="img53" src="http://mobiimg.360doc.com/imgComp.php?fi=0%7cnull%7c9889%7c502169_16%7cgif&s=300_0" /><br>回页首<br>描述 名字 大小 下载方法<br>本文的样例 Ajax 模式文件 x-ajaxxml2_ajax_patterns.zip 7KBHTTP<br><img style='max-width:300px;' id="img54" src="http://mobiimg.360doc.com/imgComp.php?fi=0%7cnull%7c9889%7c502169_1%7cgif&s=300_0" /><br><img style='max-width:300px;' id="img55" src="http://mobiimg.360doc.com/imgComp.php?fi=0%7cnull%7c9889%7c502169_56%7cgif&s=300_0" />关于下载方法的信息</div>
<div class="list-group">
<a href="/article/143949" class="list-group-item">Ajax 和 XML: 五种常见 Ajax 模式</a>
<a href="/article/143950" class="list-group-item">Ajax 和 XML: 五个很酷的 Ajax 小部件</a>
<a href="/article/85659" class="list-group-item">Ajax+java(servlet)+xml</a>
<a href="/article/89797" class="list-group-item">Ajax：拥抱JSON，让XML走开</a>
<a href="/article/146804" class="list-group-item">Ajax：拥抱JSON，让XML走开</a>
<a href="/article/179652" class="list-group-item">Ajax 基础和例子</a>
<a href="/article/393426" class="list-group-item">Ajax 基础和例子</a>
<a href="/article/83523" class="list-group-item">掌握 Ajax，第 7 部分: 在请求和响应中使用 XML</a>
<a href="/article/143981" class="list-group-item">掌握 Ajax，第 8 部分: 在请求和响应中使用 XML</a>
<a href="/article/173463" class="list-group-item">在Java2平台企业版中应用异步JavaScript技术和XML（AJAX）</a>
<a href="/article/143948" class="list-group-item">XML 问题: Ajax 权衡：XML 的多种风格</a>
<a href="/article/111240" class="list-group-item">《Ajax模式与最佳实践》试读感想</a>
<a href="/article/19060" class="list-group-item">按耐不住的我和AJAX</a>
<a href="/article/32102" class="list-group-item">Ajax 中的高级请求和响应(1)</a>
<a href="/article/55529" class="list-group-item">AJAX：如何处理书签和后退按钮</a>
<a href="/article/72549" class="list-group-item">AJAX开发者的最新工具和技术</a>
<a href="/article/143955" class="list-group-item">Ajax 和 REST，第 1 部分</a>
<a href="/article/143979" class="list-group-item">Ajax 和 REST，第 2 部分</a>
<a href="/article/210591" class="list-group-item">Ajax 和 REST，第 1 部分</a>
<a href="/article/210604" class="list-group-item">Ajax 和 REST，第 2 部分</a>
<a href="/article/244907" class="list-group-item">21个css和Ajax表格</a>
<a href="/article/774489" class="list-group-item">AJAX：如何处理书签和后退按钮</a>
<a href="/article/2653230" class="list-group-item">ScriptManager和UpdatePanel用法 (ajax) - BlueWorl...</a>
<a href="/article/229" class="list-group-item">王建硕: ajax</a>
</div>
</div>
</div>
</div>
</div>
</div>
<footer id="footer" class="footer hidden-print">
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">相关问题</div>
<div class="panel-body">
<a class="btn btn-default" href="/article/2355452" title="生活中的经典感人语句.">生活中的经典感人语句.</a>
<a class="btn btn-default" href="/article/2355453" title="【怎样找到有效的歌曲链接地址】">【怎样找到有效的歌曲链接地址】</a>
<a class="btn btn-default" href="/article/2355454" title="很美很美的配乐朗诵">很美很美的配乐朗诵</a>
<a class="btn btn-default" href="/article/2355455" title="中文的凤凰刷机">中文的凤凰刷机</a>
<a class="btn btn-default" href="/article/2355456" title="生意禁忌">生意禁忌</a>
<a class="btn btn-default" href="/article/2355457" title="献给所有曾经为爱执着过的人">献给所有曾经为爱执着过的人</a>
<a class="btn btn-default" href="/article/2355458" title="贵州警察出差间隙KTV消遣 开房后遭遇敲诈勒索">贵州警察出差间隙KTV消遣 开房后遭遇敲诈勒索</a>
<a class="btn btn-default" href="/article/2355459" title="黄金分割 太神奇了！ 太有学问了！">黄金分割 太神奇了！ 太有学问了！</a>
<a class="btn btn-default" href="/article/2355460" title="怎么知道自己身体是酸性还是碱性.........">怎么知道自己身体是酸性还是碱性.........</a>
<a class="btn btn-default" href="/article/2355461" title="神奇的止咳方法.">神奇的止咳方法.</a>
<a class="btn btn-default" href="/article/2355462" title="六招延缓身体衰老：排队时踮脚尖预防体力衰退_">六招延缓身体衰老：排队时踮脚尖预防体力衰退_</a>
<a class="btn btn-default" href="/article/2355463" title="揭秘黑龙江双城市某初中收取高额学费利益链">揭秘黑龙江双城市某初中收取高额学费利益链</a>
<a class="btn btn-default" href="/article/2355464" title="潮发智多星 让你轻松拥有超美发型(组图)">潮发智多星 让你轻松拥有超美发型(组图)</a>
<a class="btn btn-default" href="/article/2355465" title="60句简短的话，每句话都可以品半辈子">60句简短的话，每句话都可以品半辈子</a>
<a class="btn btn-default" href="/article/2355466" title="我好好活着 就是爱您">我好好活着 就是爱您</a>
<a class="btn btn-default" href="/article/2355467" title="狐周刊第十四期">狐周刊第十四期</a>
<a class="btn btn-default" href="/article/2355468" title="早班车：40万份伊战密件曝光 美国要求媒体不发消息">早班车：40万份伊战密件曝光 美国要求媒体不发消息</a>
<a class="btn btn-default" href="/article/2355469" title="经典：什么是舍，什么是得?">经典：什么是舍，什么是得?</a>
<a class="btn btn-default" href="/article/2355470" title="四代机真的快了：林左鸣国庆期间到成飞慰问内幕揭秘">四代机真的快了：林左鸣国庆期间到成飞慰问内幕揭秘</a>
<a class="btn btn-default" href="/article/2355471" title="口服精油真能喝出美容吗？">口服精油真能喝出美容吗？</a>
<a class="btn btn-default" href="/article/2355472" title="偶尔出轨 就一辈子都是坏女人吗">偶尔出轨 就一辈子都是坏女人吗</a>
<a class="btn btn-default" href="/article/2355473" title="经典：不气歌/消气歌大全">经典：不气歌/消气歌大全</a>
<a class="btn btn-default" href="/article/2355474" title="探访六国街头报摊 城市报摊如何管理？(图)">探访六国街头报摊 城市报摊如何管理？(图)</a>
<a class="btn btn-default" href="/article/2355475" title="特搜部 – 一个令日本贪官闻风丧胆的部门(转萨苏的新浪博客)">特搜部 – 一个令日本贪官闻风丧胆的部门(转萨苏的新浪博客)</a>
<a class="btn btn-default" href="/article/2355476" title="太极图的不传之密1">太极图的不传之密1</a>
<a class="btn btn-default" href="/article/2355477" title="一位多年程序员的经验谈">一位多年程序员的经验谈</a>
<a class="btn btn-default" href="/article/2355478" title="油画般 风景摄影作品">油画般 风景摄影作品</a>
<a class="btn btn-default" href="/article/2355479" title="人心管理gh">人心管理gh</a>
<a class="btn btn-default" href="/article/2355480" title="【怎样在帖子里添加背景音乐】">【怎样在帖子里添加背景音乐】</a>
<a class="btn btn-default" href="/article/2355481" title="不气歌/消气歌大全111">不气歌/消气歌大全111</a>
<a class="btn btn-default" href="/article/2355482" title="李氏对联鉴赏">李氏对联鉴赏</a>
</div>
</div></div>
<div class="copy-right">
<p>神马文学网，客观、专业、权威的知识性互动百科全书。</p></div>
</footer>
</body>
</html>
为页面获取新的 HTML 只是其中一件事情，如果您希望 JavaScript 代码在页面中使用数据执行一些更智能化的任务该怎么办呢？如何使用结构化的方式将数据发送到浏览器呢？毫无疑问，这正是使用 XML 的原因。
回页首
出于某些原因，Ajax 已成为 XML 的同义词，尽管 XML 不是绝对必要的。从上面几个例子可以看出，您完全可以返回简单的文本甚至是 HTML 片段 —— 或者 Extensible HTML（XHTML）—— 代码。但是发送 XML 自有其优势所在。
清单 8 显示的 Ajax 代码首先向服务器请求图书记录，然后将数据显示在页面内的表格中。
| Author | Title |
|---|
清单 9 显示了该页面的数据。
要查看真实环境的演示，请查看在线版本pat2_xml.html
在浏览器中加载页面时，我看到了如图 6 所示的结果。
此页面和上一个模式中显示的页面之间最大的区别就是 processReqChange 函数，这里没有使用 responseText，而是 responseXML，这是一个 XML 文档对象模型（Document Object Model，DOM），该模型只有在来自服务器的响应是正确编码的 XML 时才是可用的。
通过使用 responseXML，我请求了 XML 文档的