掌握 Dojo 工具包（ 2）：使用 Dojo 框架开发 Ajax 应用

Ajax 的兴起改变了传统的 B/S 结构应用程序中以页面为单位的交互模式，Ajax 引入的局部刷新机制带来了更好的用户体验，促使浏览器中的页面开始向应用程序发展，Google Mail, Google Reader 是在这种趋势下诞生的典型应用。 Dojo 提供了基于 XmlHttpRequest 的对象的 XHR 框架来支持异步 Ajax 调用，另外 Dojo.io 包中提供了两种浏览器与服务器交互的方式：iframe 隐藏框架和 script 动态脚本，他们是对 XHR 框架的有益补充，本文将对这些技术进行介绍。

XmlHttpRequest 对象的思考

在传统的以页面为单位的浏览器和服务器交互模式中，每一次服务器请求都会导致整个页面的重新加载，即使需要更新的仅仅是页面的一小部分（比如显示一个登录错误信息）。 Ajax 技术的出现给页面带来了一些变化，其中最直观的莫过于站点的页面上出现越来越多的“ loading …”，“正在加载中……”等提示信息，有些忽如一夜春风来，loading 加载处处开的意思。“ loading …”或者“正在加载中……”表示浏览器正在与服务器之间进行交互，交互完成之后，将对页面进行局部刷新，这种交互模式虽然简单却极大的提高了 Web 应用的用户体验。实现这种模式的核心就是 XmlHttpRequest（后文简称 XHR）对象。

XHR 对象促使越来越多“单一页面”的 Web 应用的诞生。使用 XHR 对象可以发送异步 HTTP 请求。因为是异步，在浏览器和服务器交互的过程中，仍然可以操作页面。当页面中有多个进行异步调用的 XHR 对象时，事情有了质的变化，每一个 XHR 对象都可以独立于服务器进行通信，浏览器中的页面仿佛是一个多线程的应用程序。这种多线程异步调用的特性给 Web 应用的开发带来了很大的影响，越来越多像 Google Mail 这种“单一页面”的应用涌现出来，而且大受欢迎。之所以能做到“单一页面”是因为有很多的 XHR 对象默默地在背后服务，我们可以通过启用 firebug 来查看每次在 Google Mail 页面上的操作“生产”了多少个 XHR 对象。

Ajax 资源中心

请访问 Ajax 资源中心，这是有关 Ajax 编程模型信息的一站式中心，包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。

使用 XHR 对象的另一个好处是可以减少服务器返回的数据量，进而提升系统的性能。在原有的 B/S 交互模式中，服务器返回的是粗粒度的 HTML 页面；使用 XHR 对象之后，服务器返回的是细粒度的数据，如 HTML，JSON，XML 等，请注意这里返回的是数据而不是页面，也就是说只返回需要更新的内容，而不返回已经在页面上显示的其他内容，所以每次从服务器返回的数据量比原来要少。采用 AJAX 技术的 Web 应用在初次加载时花费的时间比较长，但是加载完成之后，其性能比原来的 Web 应用要好很多。

这里介绍了一些 XmlHttpRequest 对象给 Web 开发带来的变化，这些变化是 Ajax 技术能够流行的重要原因，认识这些变化可以帮助开发人员设计、开发高效的 Web 应用。本文并不打算介绍 XmlHttpRequest 的属性、方法，很多文章在这方面已经做得很好。

XHR 框架

XmlHttpRequest 对象是 Dojo 中的 XHR 框架的基础，目前主流浏览器都已经支持此对象，但是不同浏览器上实现方式却不一样，IE5、IE6 采用 ActiveX 对象的方式，Firefox 和 Safari 都实现为一个内部对象，所以创建 XHR 对象之前需要先测试浏览器的类型，清单 1 展示了最简单的创建 XHR 对象的代码。

清单 1

function createXHR(){ 
    if (window.XMLHttpRequest) { // Non IE 
        return new XMLHttpRequest(); 
    } 
    else if (window.ActiveXObject) { // IE 
        return new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
}

或许是认识到 XHR 对象的重要性，微软在 IE7 中已经把它实现为一个窗口对象的属性。但是判断浏览器类型的代码依然不能消除，因为 IE5, IE6 仍然有大量的使用者。

XHR 对象创建方式不一致是 Dojo 的 XHR 框架诞生的一个原因，更重要的原因是原始 XHR 对象还不够强大，有些方面不能满足开发的需要：首先 XHR 对象支持的返回类型有限，原始 XHR 对象只有 responseText 和 responseXML 两个属性代表返回的数据，重要的数据交换格式 JSON 就不被支持；其次不能设置 HTTP Request 的超时时间，设置超时时间可以让客户端脚本控制请求存在的时间，而不是被动的等待服务器端的返回。

基于这些问题，Dojo 组织提供了一组函数来支持各种 HTTP 请求，包括 xhrGet，rawXhrPost，xhrPut，rawXhrPut，xhrPut，xhrDelete，这几个函数与 HTTP 协议中的四种请求是一一对应的，HTTP 四种请求是：Get（读取），Post（更新），Put（创建），Delete（删除）。 Dojo 组织的发起者 Alex Russell 把这些跟 XHR 对象相关的函数放在一起称为 XHR 框架。下面我们来看看 Dojo 是如何创建 XHR 对象的。清单 2 是 Dojo 1.1 中创建 XHR 对象的代码片段。

清单 2

本文转自IBM Developerworks中国

      请点击此处查看全文