服务热线:13616026886

技术文档 欢迎使用技术文档,我们为你提供从新手到专业开发者的所有资源,你也可以通过它日益精进

位置:首页 > 技术文档 > 专题栏目 > WEB2.0新技术 > 查看文档

五种常见 ajax 模式解读

  ajax 应用程序中哪一种常见架构模式应用最广泛呢?本文将介绍五种常见 ajax 设计模式,可以使用它们作为工作的基础……

  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 ―― 当浏览器收到内容时将调用它。

……

扫描关注微信公众号