五种常见 Ajax 模式（二）

ljx1619

浏览: 8770 次
性别:
来自: 杭州

最近访客更多访客>>

woodding2008

PeterLee9901

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ajax

Ajax JavaScript 应用服务器浏览器 XML

模式 2. 读取 XML 数据

出于某些原因，Ajax 已成为 XML 的同义词，尽管 XML 不是绝对必要的。从上面几个例子可以看出，您完全可以返回简单的文本甚至是 HTML 片段 —— 或者 Extensible HTML（XHTML）—— 代码。但是发送 XML 自有其优势所在。

清单 8 显示的 Ajax 代码首先向服务器请求图书记录，然后将数据显示在页面内的表格中。

清单 8. Pat2_xml.html
                
<html>
<head>
<script>
var req = null;
function processReqChange() {
  if (req.readyState == 4 && req.status == 200 && req.responseXML ) {
    var dtable = document.getElementById( 'dataBody' );
    var nl = req.responseXML.getElementsByTagName( 'book' );
    for( var i = 0; i < nl.length; i++ ) {
      var nli = nl.item( i );
      var elAuthor = nli.getElementsByTagName( 'author' );
      var author = elAuthor.item(0).firstChild.nodeValue;
      var elTitle = nli.getElementsByTagName( 'title' );
      var title = elTitle.item(0).firstChild.nodeValue;

      var elTr = dtable.insertRow( -1 );

      var elAuthorTd = elTr.insertCell( -1 );
      elAuthorTd.innerHTML = author;

      var elTitleTd = elTr.insertCell( -1 );
      elTitleTd.innerHTML = title;
} } }

function loadXMLDoc( 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( /pat2_xml.html/, 'pat2_xml_data.xml' );
loadXMLDoc( url );
</script>
</head>
<body>
<table cellspacing="0" cellpadding="3" width="100%">
<tbody id="dataBody">
<tr>
  <th width="20%">Author</th>
  <th width="80%">Title</th>
</tr>
</tbody>
</table>
</body>
</html>

清单 9 显示了该页面的数据。

清单 9. Pat2_xml_data.xml
                
<books>
  <book>
    <author>Jack Herrington</author>
    <title>Code Generation in Action</title>
  </book>
  <book>
    <author>Jack Herrington</author>
    <title>Podcasting Hacks</title>
  </book>
  <book>
    <author>Jack Herrington</author>
    <title>PHP Hacks</title>
  </book>
</books>

在浏览器中加载页面时，我看到了如图 6 所示的结果。

图 6. XML 显示页面

此页面和上一个模式中显示的页面之间最大的区别就是 processReqChange 函数，这里没有使用 responseText，而是 responseXML，这是一个 XML 文档对象模型（Document Object Model，DOM），该模型只有在来自服务器的响应是正确编码的 XML 时才是可用的。

通过使用 responseXML，我请求了 XML 文档的 <book> 标记的列表。然后分别从中获取 <title> 和 <author> 元素。接下来，为每本书向表中添加一行，再为每行添加包含作者和题目数据的单元格。

这是 XML 数据的最基本应用。更复杂的 JavaScript 代码可以执行客户端排序或根据返回的数据进行搜索。

遗憾的是，传递 XML 数据的缺点是需要浏览器多花费一些时间来解析整个 XML 文档。同样，JavaScript 代码在 XML 中查找数据也很复杂（参见清单 8）。一个替代办法是从服务器请求 JavaScript 代码。

模式 3. 读取 JavaScript 数据

从服务器请求 JavaScript 数据这种技术通常用于 JavaScript Object Notation（JSON）这种良好的代码。返回 JavaScript 数据的优点就是能够使浏览器高效地解析并创建使用起来更加简单的 JavaScript 数据结构。

让我们将清单 8 中从服务器读取 XML 的代码修改为从服务器读取 JavaScript 数据的代码。新代码如清单 10 所示。

清单 10. Pat3_js.html
                
<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;
} } }

...

所有的 HTML 代码保持不变。processReqChange 函数仅仅更改为读取 eval 从而从服务器返回 JavaScript 数据。该函数随后使用 eval 的 JavaScript 对象作为数据源，后者又将其添加到表中。

清单 11 显示了来自服务器的 JavaScript 数据。

清单 11. Pat3_js_data.js
                
[ { author: 'Jack Herrington', title: 'Code Generation in Action' },
{ author: 'Jack Herrington', title: 'Podcasting Hacks' },
{ author: 'Jack Herrington', title: 'PHP Hacks' }
]

为什么众多 Ajax 应用程序工程师更喜欢使用 JavaScript 代码而不是 XML 来对数据编码？答案很明显。JavaScript 代码更容易读取和管理，并且也更容易被浏览器处理。

收集和显示所有的数据之后，即可看到 Ajax 的重点就是显示当前数据 —— 当前最重要的部分。那么，如何保证总是能够从服务器获得最新的数据呢？

模式 4. 避免浏览器缓存

浏览器会尝试化 Web 流量，所以如果您对同一个 URL 请求两次，很可能还不如重新请求一次页面，您的浏览器将仅仅使用浏览器缓存中存储的页面。所以，Ajax 应用程序中另一个常见模式是使用 URL 中的随机元素来保证浏览器不会返回一个缓存的结果。

我最喜欢的技巧就是向 URL 添加当前时间的数字值。清单 12 展示了这一技巧。

清单 12. Pat4_cache.html
                
<html>
<script>
...

function loadUrl( url ) {
  url = url + "?t="+((new Date()).valueOf());
  ...
}

...

代码取自清单 1，对 URL 字符串执行了一些额外的 JavaScript 文本操作。我将 URL 连接到一个新的参数 t，它具有一个时间值。服务器是否能识别这个值实际上并不重要。这只不过是用来确保浏览器忽视其基于 URL 的页面缓存。

模式 5. 替换多个 HTML 片段

最后要演示的这个模式是第一个模式的高级版本：包含来自服务器内容的 <div> 标记的替代物。Web 应用程序中的一个常见问题是在响应用户输入时，必须更新显示页面中的一些区域。举例来说，在一个股票报价应用程序中，显示页面的一部分可能会展示最近的报价，而另一部分则显示最近报价的列表。

为更新显示页面中的多个区域，我使用了服务器的 XML 响应，它包含每个部分的数据。然后，使用一个正则表达式将响应分解为单个部分。清单 13 显示了这种技巧。

清单 13. Pat5_multi_segment.html
                
<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>

清单 14 展示了来自服务器的数据。

清单 14. Pat5_data.xml
                
<segments>
  <one>Content for segment one</one>
  <two>Content for segment <b>two</b></two>
</segments>

在浏览器中加载这段代码时，将看到图 7 所示的结果。

图 7. 使用服务器的数据更新显示页面中的两部分

在页面代码中，我还可以使用 XML 响应，因为服务器返回的是有效的 XML。但是使用正则表达式比从 XML 代码中分解单独部分更加简单。

结束语

Ajax 的功能之强大与之被误解和误用的程度相当。本文中演示的模式为在 Web 应用程序中使用 Ajax 提供了一个不错的起点。除了使用这里提供的代码，我还建议您关注以下 Web 2.0 革命带来的某些出色的 Ajax 和 Web UI 库。其中最主要的是 Prototype.js 库，它提供了向浏览器发送以及从浏览器获取数据的简便方法，以及浏览器间兼容的方法更新 Web 页面内容。使用这些库的价值在于工程师可以在广泛的浏览器和平台上专注地维护和测试它们，这样可省去大量的工作和麻烦。

无论从哪方面说，就像本文中的模式演示的那样，Ajax 可以为您的应用程序添加动态行为。