Dojo入门:增强的Ajax功能
随着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 设计者的这一良好设计极大的减轻了开发人员的学习负担,作为框架开发人员应该了解这一理念。
下表是对这三种方式从三个方面进行了比较:
支持的 HTTP 请求类型 | 期望的输出 | 跨域访问 | |
XHR | Get, post, delete, put | text, json, xml, javascript … | N |
iframe | Get, post | html | N |
script | Get | javascript | Y |
综上所述,使用上述三种方法时需要遵循一条简单的原则:传送文件则 iframe,跨域访问则使用动态脚本,其余则选 XHR 框架。
本文是作者学习过程中的总结,部分内容引用自一下地址:
如果认为此文对您有帮助,别忘了支持一下哦!
Dojo入门:增强的Ajax功能的更多相关文章
- 模仿JQuery封装ajax功能
需求分析 因为有时候想提高性能,只需要一个ajax函数,不想引入较大的jq文件,尝试过axios,可是get方法不支持多层嵌套的json,post方式后台接收方式似乎要变..也许是我不太会用吧..其实 ...
- Dojo入门:初识Dojo
Dojo的全称是Dojo Toolkit,始创于2004年,是当前各种蓬勃发展的JS工具包中的佼佼者.Dojo 为富互联网应用程序(RIA) 的开发提供了完整的端到端的解决方案,包括核心的 Jav ...
- 14、ASP.NET MVC入门到精通——Ajax
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 Unobtrusive Ajax使用方式(非入侵式) 非入侵式,通俗来讲:就是将嵌入在Html中的JavaScript全部取出来,放在单独的 ...
- sublime text3插件增强侧边栏的功能文件的复制粘贴
快捷键ctrl + shift +p 输入 install package 回车,调出插件搜索器, 在搜索栏中输入 SideBarEnhancements 回车安装插件. 在侧边栏中的各种操作功能增 ...
- ASP.NET MVC5入门2之Ajax实现数据查询
开发环境:VS2013 数据库:SQL Server2008R2 架构:ASP.NET MVC5 开发语言:C# 代码下载链接:http://download.csdn.net/detail/u010 ...
- dojo Datagrid 实现数据删除功能
DataGrid实现数据动态刷新功能见前一个帖子:http://www.cnblogs.com/qq552048250/p/4447103.html 实现数据删除只需要向表格中动态添加按钮,并为按钮的 ...
- dojo入门
1.引入dojo.js dojo的发行包里有4个子目录,要引入的文件是名叫"dojo"的子目录里的dojo.js. 假设你是这样的目录结构: project | +--dojo-l ...
- 使用jQuery Ajax功能的时候需要注意的一个问题
每次jquery的Ajax请求都会创建一个xmlHttprequest对象,理论上讲,长连接(页面需要和服务器保持长连接,而且在连接超时后需要重新请求连接)的请求是一个无限递归,请求数量是非常大的,但 ...
- Struts2 整合jQuery实现Ajax功能(1)
技术领域非常多东西流行,自然有流行的道理.这几天用了jQuery,深感有些人真是聪明绝顶,能将那么多技术融合的如此完美. 首先明白个概念: jQuery是什么:是使用javascript语言开发的,用 ...
随机推荐
- 标准C语言(10)
指针数组的每个存储区是一个指针类型的存储区,字符指针数组包含多个字符类型的指针,每个字符类型指针可以代表一个字符串.字符指针数组可以用来代表多个相关字符串,二维字符数组也可以用来记录多个相关字符串,通 ...
- 《Python基础教程》一点笔记
这本书还是月初的时候翻了翻,看了前十章左右就发现这本书写的比较烂,翻译地就更烂了,讲的内容其实没有抓住重点. 下面是看的时候记得几小段代码: #首字母相同的男生女生 girls = ['alice', ...
- Python中的序列
Python中有四种内建的数据结构,即列表.元组.字典.集合.其中字典和集合我会以后再写,现在先说列表和元组,它们两个和以前提到很多次的字符串, 其实都属于——序列. 一.列表(list): 1. l ...
- Spring如何对私有接口进行注入(转载)
来自:http://didiluck.iteye.com/blog/1779640 Spring 标注@Autowired 如果做到自动装配私有变量而不使用set方法的原理 熟悉jdk的话就知道,方 ...
- Gym - 102040F Path Intersection (树链剖分+线段树)
题意:给出棵树上的k条路径,求这些路径的公共点数量. 将每条路径上的点都打上标记,被标记过k次的点就是公共点了.由于公共点形成的区间是连续的,因此直接在线段树上暴搜即可在$O(logn)$求出一条链上 ...
- springMVC中使用 JSR-303验证器( Validation 接口 )
在pom.xml,添加validator验证器的依赖 <dependency> <groupId>org.hibernate</groupId> <artif ...
- qt5--鼠标操作
#include "mylabel.h" #include <QDebug> #include <QPointF> #include <QPoint& ...
- React native 之 图标库ECharts的使用
github地址:https://github.com/somonus/react-native-echarts 官网:https://www.echartsjs.com/zh/tutorial.ht ...
- Open Cascade:计算体积
TopoDS_Shape shape; ... GProp_GProps System; BRepGProp::LinearProperties(shape, System); BRepGProp:: ...
- 15、Qt 样式表
Qt的样式表类似HTML的层叠式样式表CSS,可以为一个独立的子部件.整个窗口.整个应用程序指定一种外表样式. 样式表功能:1.优化外观.2.实现某些动作,如鼠标在图片上,图片切换. 格式:QWidg ...