Ajax 和 XML: 五种常见 Ajax 模式

FengShen_Xia · 发表于 2013-1-23 02:55:50

　本文介绍了五种常见 Ajax 设计模式。它们在使用 HTML、XML 和 JavaScript 代码从服务器获取数据方面有所不同。我先介绍最简单的模式，它将使用来自服务器的新 HTML 页面来更新页面。

      模式１：替换 HTML 片段
      最常见的 Ajax 任务也许就是向服务器请求更新的 HTML 并使用它更新部分页面。可能需要周期性地完成这一任务 —— 比如，更新股市报价。也可能要按需更新 —— 比如，对搜索请求进行响应。

　　清单1 中的代码从服务器请求一个页面然后将内容放入页面主体的 <div> 标记中。
清单 1. Pat1_replace_div.html<html><script>var req = null;function processReqChange() {  if (req.readyState == 4 && req.status == 200 ) { var dobj = document.getElementById( 'htmlDiv' ); dobj.innerHTML = req.responseText;  }}function loadUrl( url ) {  if(window.XMLHttpRequest) { try { req = new XMLHttpRequest(); } catch(e) { req = false; }  } else if(window.ActiveXObject) { try { req = new ActiveXObject('Msxml2.XMLHTTP'); } catch(e) { try { req = new ActiveXObject('Microsoft.XMLHTTP'); } catch(e) { req = false; }  } }  if(req) { req.onreadystatechange = processReqChange; req.open('GET', url, true); req.send('');  }}var url = window.location.toString();url = url.replace( /pat1_replace_div.html/, 'pat1_content.html' );loadUrl( url );</script><body>Dynamic content is shown between here:<br/><div id="htmlDiv" style="border:1px solid black;padding:10px;"></div>And here.<br/></body></html> 清单2 展示了代码请求的内容。
清单 2. Pat1_content.htmlHTML encoded content goes here. 在 Firefox 中加载页面后，可以看到图 1 所示的结果。
　

    　现在回到清单1 中的代码，来观察一些内容。第一个要注意的是 loadUrl() 函数，它从服务器请求一个 URL。该函数使用 XMLHTTPRequest 对象向服务器请求新内容。它还指定了一个回调函数 —— 本例中，是 processReqChange —— 当浏览器收到内容时将调用它。
processReqChange 函数将查看对象以确定请求是否完成。如果是的话，该函数将页面 <div> 标记的 innerHTML 设置为响应的文本。
      将 <div> 标记作为一个动态内容的占位符，这是 Ajax 代码的主要组成部分。这些标记没有可见的表示形式（除非添加边框，像我这样做），但它们很好地标记了内容的放置位置。工程师还使用 <span> 标记用于可代替的片段，稍后我将对其进行演示。<div> 和 <span> 标记的不同之处是前者加入了一个断行符（如一个段落），而后者使用边线勾画出一节内联文本。
      暂时回到 processReqChange 函数，该函数对 status 和 readyState 的值进行检查非常重要。有些浏览器可能只在请求完成时才调用这个函数，而也有些浏览器会不断回调该函数从而告诉代码请求依然在运行。

　　选项卡式显示变体
　　该模式的另一种变体就是创建一个选项卡样式的显示。清单3 展示了一个简单的选项卡式 Ajax 界面。

清单 3. Pat1_tabs.html<html><script>var req = null;function processReqChange() {  if (req.readyState == 4 && req.status == 200 ) { var dobj = document.getElementById( 'tabDiv' ); dobj.innerHTML = req.responseText;  }}function loadUrl( tab ) {  var url = window.location.toString();  url = url.replace( /pat1_tabs.html/, tab );  ...}function tab1() { loadUrl( 'pat1_tab1_content.html' ); }function tab2() { loadUrl( 'pat1_tab2_content.html' ); }tab1();</script><body><a href="javascript: void tab1();">Tab 1<a> <a href="javascript: void tab2();">Tab 2<a><div id="tabDiv" style="border:1px solid black;padding:10px;"></div></body></html>
清单4 显示了第一个选项卡的内容。

清单 4. Pat1_tab1_content.html
　Tab 1 content

清单 5 显示了第二个选项卡的内容。

清单 5. Pat1_tab2_content.html
　Tab 2 content

当我在自己的浏览器上显示该页面时，我看到了第一个选项卡，如图 2 所示

图 2. 第一个选项卡的内容

然后单击第二个选项卡的链接。浏览器检索第二个选项卡的内容然后将它显示在选项卡区域，如图 3 所示。

图 3. 第二个选项卡的内容

　　这是该设计模式的最典型用法 —— 从用户那里获得请求并使用新的内容更新部分显示，本例演示了创建选项卡显示的技巧。应用程序端的价值就是您可以为用户下载非常轻量级的页面，用户可以根据自己的需求访问这些内容。
　　在 Ajax 出现之前，最常见的技术是将所有的选项卡都放在页面上，然后根据需要显示或隐藏它们。这就是说即使从来不查看第二个选项卡，也会为其创建 HTML，既浪费服务器时间又浪费带宽。使用这种新的 Ajax 方法，只有当用户请求第二个选项卡时才会为其创建 HTML。

read more 变体
　该模式的另一个变化就是 Read more 链接，如图 4 所示。

图 4. 我的博客登录处的 Read more 链接

　

假如想希望阅读更多关于我遛狗的经历，可以单击 Read more 链接，使该链接替换为完整的故事，如图 5 所示。

图 5. 单击 Read more 链接后显示的页面

　　这样做的好处是顾客可以在无需刷新页面的情况下获得更多内容。

清单 6 显示了该页的代码。

清单 6. Pat1_readmore.html
<html><script>var req = null;function processReqChange() { if (req.readyState == 4 && req.status == 200 ) { var dobj = document.getElementById( "moreSpan" ); dobj.innerHTML = req.responseText; }}function loadUrl( url ) { ... }function getMore(){ var url = window.location.toString(); url = url.replace( /pat1_readmore.html/, 'pat1_readmore_content.html' ); loadUrl( url );}</script><body><h1>Walking the dog</h1>I took my dog for a walk today. <span id="moreSpan"><a href="javascript: void getMore()">Read more...</a></span></body></html>
清单 7 显示了 “read more” 部分的内容。

清单 7. Pat1_readmore_content.html

It was a nice day out. Warm and sunny. My dog liked getting out for a stretch.

　　　这些代码演示的是 <span> 标记的用法，而非 <div> 标记。所使用的方法取决于用户界面（UI）的需求。但是正如您所看到的那样，无论哪种方法使用起来都很简单。
　　为页面获取新的 HTML 只是其中一件事情，如果您希望 JavaScript 代码在页面中使用数据执行一些更智能化的任务该怎么办呢？如何使用结构化的方式将数据发送到浏览器呢？毫无疑问，这正是使用 XML 的原因。

<div class="blog_content">模式 2. 读取 XML 数据
出于某些原因，Ajax 已成为 XML 的同义词，尽管 XML 不是绝对必要的。从上面几个例子可以看出，您完全可以返回简单的文本甚至是 HTML 片段 —— 或者 Extensible HTML（XHTML）—— 代码。但是发送 XML 自有其优势所在。
清单 8 显示的 Ajax 代码首先向服务器请求图书记录，然后将数据显示在页面内的表格中。

<div class="dp-highlighter"><div class="bar"><div class="tools">Html代码

		自动登录	找回密码
密码			立即注册