ajax模式:五种常见 Ajax 模式解读

来源: 发布时间:星期四, 2008年6月19日浏览:314次评论:0

　　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>标记中。

参考：[http://www.crazycoder.cn/]

　　清单 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>

本文关键词：

参考：[http://www.crazycoder.cn/]

标签：什么是ajax ajax教程 ajax开发模式 ajax模式

下载文章的 PDF文档电子版离线看

我顶

读者评论

发表评论

昵称：
内容：

专注于互联网--专注于架构

首页 »Ajax教程 » ajax模式:五种常见 Ajax 模式解读 »正文

ajax模式:五种常见 Ajax 模式解读

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

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