Dojo入门：增强的Ajax功能

迷南。 2023-06-01 05:46 15阅读 0赞

随着Web技术的发展，RIA似乎已经成了主流，Ajax也随之成了不可或缺的部分。Ajax是异步的javascript和Xml，虽然现在很多交互的数据格式都不再严格的采用XML，但这种异步的操作却越来越流行了。目前主流的JS工具包都包含了Ajax的功能，dojo也有自己的Ajax框架XHR。

## XHR框架 ##

XHR框架是dojo对ajax支持的一组方法，允许想服务器端发出get、post、put、delete请求，这些方法包括：

*  xhrGet
 *  xhrPost
 *  xhrPut
 *  xhrDelete

所有这些函数都遵守相同的语法：接受一个属性配置对象作为参数。在这些对象中您可以定义您想要发出的 Ajax 请求的各个方面。再一次说明，这些选项在所有 XHR 函数中都是一样的。

比较常用的选项：

*  url：这是 HTTP 请求的 URL。它必须和发出这一请求的页面有同样的域和端口组合。
 *  handleAs：允许您定义响应的处理格式，默认是 text，但是，json、javascript、xml、还有一些其他选项也可用。在本节后面您将看到一个创建 Ajax 请求的示例，使用一个处理 JSON 响应格式的回调函数。
 *  form：<form> 元素的一个引用或者字符串 ID 表示。form 中每个字段的值将被同请求一起作为请求体发送。
 *  content：一个对象，包含您想要传递给请求体中资源的参数。如果两者都提供，这个对象将与从 form 属性中获取的值混合在一起。
 *  load：当 Ajax 请求返回一个成功响应消息时，执行此函数。响应数据和请求对象作为参数被传递到这个函数。
 *  error：如果 Ajax 请求出现问题，该函数将被调用。如果在 Ajax 请求中定义的 URL 无效、请求超时或者发生其他 HTTP 错误，这将会出现。错误消息和请求对象被作为参数传递。
 *  handle：该函数允许您将加载和错误回调函数合并到一个函数中（如果您确实不关心请求结果是成功或是出现错误，这将非常有用）。

这几种类型的请求对于构建一个REST风格的框架很有用，用xhrGet查看数据，xhrPost修改数据，xhrPut创建数据，xhrDelete删除数据，每一种类型的请求对应一种服务器端具体的操作。

## 使用iframe进行文件上传 ##

XHR对于普通的Web请求具有很强的可操作性，但是对于像异步的上传文件等操作显得比较棘手，不过没关系，dojo已经为我们想到了这些。

dojo通过使用iframe的方式实现了这种高级的数据传输。笔者曾经使用jquery实现过一个通过iframe异步上传文件的程序，其原理是将文件的提交的target设置为iframe，这样在提交时，页面不会刷新，只有当服务器返回时，才会更新iframe中的内容。这种操作会有进度条，但整个页面不会刷新，虽然不是完全的无刷新，但用其实现文件上传绝对的有用。

dojo.io.iframe 是如何工作的呢？除了 XHR 对象之外还有什么方法可以实现表单的异步提交？其实这一切都很简单，dojo.io.iframe 首先会创建一个隐藏的 iframe 并插入到父页面的最后，然后设置此 iframe 的 src 属性为dojo-module-path/resources/blank.html（dojo-module-path 指 dojo 包所在的目录），iframe 页面的 onload 事件的处理函数被设置为父窗体的回调函数。接下来就是在 iframe 页面中发送请求，并接收服务器的响应。当 iframe 接收到服务器的反馈并加载完之后，父窗体的回调函数即被调用。

## JSONP：跨域的数据访问 ##

XHR 框架中的函数功能强大，使用方便。但是 XHR 框架的函数有一问题就是不能跨域访问，浏览器不允许 XHR 对象访问其他域的站点。

JSONP（JSONP Padding）就是为了解决跨域访问而产生的：

*  通过<javascript></javascript>标签访问封装JSON数据的地址
 *  将要返回的数据封装为JSON对象
 *  数据返回给浏览器，并被自动执行

这便是JSONP执行的基本流程，但是想要确定数据是否加载完成并不容易，通常的做法是设置一个回调方法，这个方法的名称被作为请求参数的一部分发送给服务器，服务器在将数据封装完整后，生成回调方法执行的代码，并将这些信息全部返回给客户端，当客户端执行返回数据时，回调方法也会被随之调用。

## 总结 ##

本文介绍了 Dojo 中三种浏览器与服务器交互的方式，这三种方式各有优缺点，但是在使用方式却出奇的一致； xhr 框架的函数，dojo.io.iframe、dojo.io.script 对象的函数使用的 JSON 对象参数也极其相似，而且浅显易懂。 Dojo 设计者的这一良好设计极大的减轻了开发人员的学习负担，作为框架开发人员应该了解这一理念。

下表是对这三种方式从三个方面进行了比较：

<table> 
 <tbody> 
  <tr> 
   <td>&nbsp;</td> 
   <td><strong>支持的 HTTP 请求类型</strong></td> 
   <td><strong>期望的输出</strong></td> 
   <td><strong>跨域访问</strong></td> 
  </tr> 
  <tr> 
   <td><strong>XHR</strong></td> 
   <td>Get, post, delete, put</td> 
   <td>text, json, xml, javascript …</td> 
   <td>N</td> 
  </tr> 
  <tr> 
   <td><strong>iframe</strong></td> 
   <td>Get, post</td> 
   <td>html</td> 
   <td>N</td> 
  </tr> 
  <tr> 
   <td><strong>script</strong></td> 
   <td>Get</td> 
   <td>javascript</td> 
   <td>Y</td> 
  </tr> 
 </tbody> 
</table>

综上所述，使用上述三种方法时需要遵循一条简单的原则：传送文件则 iframe，跨域访问则使用动态脚本，其余则选 XHR 框架。

本文是作者学习过程中的总结，部分内容引用自一下地址：

[http://www.ibm.com/developerworks/cn/web/wa-lo-dojointro2/][http_www.ibm.com_developerworks_cn_web_wa-lo-dojointro2]

[http://www.ibm.com/developerworks/cn/web/wa-ground/][http_www.ibm.com_developerworks_cn_web_wa-ground]

如果认为此文对您有帮助，别忘了支持一下哦！

**声明：**本博客原创文字只代表本人工作中在某一时间内总结的观点或结论，与本人所在单位没有直接利益关系。转载时请在文章页面明显位置给出原文链接。

转载于:https://www.cnblogs.com/Jeely/p/11438200.html

[http_www.ibm.com_developerworks_cn_web_wa-lo-dojointro2]: http://www.ibm.com/developerworks/cn/web/wa-lo-dojointro2/
[http_www.ibm.com_developerworks_cn_web_wa-ground]: http://www.ibm.com/developerworks/cn/web/wa-ground/