五种常见 Ajax 模式（一）

ljx1619

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

最近访客更多访客>>

woodding2008

PeterLee9901

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ajax

Ajax 设计模式应用服务器 JavaScript 浏览器

Asynchronous JavaScript + XML（Ajax）无疑是 2006 年最热门的技术术语，且有望在 2007 得到进一步发展。但是对您的应用程序来说它究竟有什么意义呢？Ajax 应用程序中哪一种常见架构模式应用最广泛呢？本文将介绍五种常见 Ajax 设计模式，可以使用它们作为工作的基础。

的确，Ajax 是 Web 2.0 热门术语，所有人都希望将其应用于自己的站点。但是它对我们究竟有什么意义？工程师该如何在架构的层面上将其集成到自己的站点中？在这篇文章中，我将介绍 Ajax 的基本知识，并展示一些已经成为 Web 2.0 开发最佳实践的 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 页面来更新页面。

模式 1. 替换 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.html
                
HTML encoded content goes here.

在 Firefox 中加载页面后，可以看到图 1 所示的结果。

图 1. 替换了 <div> 标记的页面

现在回到清单 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 的原因。