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 框架。

 

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

http://www.ibm.com/developerworks/cn/web/wa-lo-dojointro2/

http://www.ibm.com/developerworks/cn/web/wa-ground/

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

作者:齐飞

来源:http://youring2.cnblogs.com/

声明:本博客原创文字只代表本人工作中在某一时间内总结的观点或结论,与本人所在单位没有直接利益关系。非商业,未授权,贴子请以现状保留,转载时必须保留此段声明,且在文章页面明显位置给出原文连接。

转载:http://www.cnblogs.com/youring2/archive/2012/06/10/2544418.html

时间: 2024-10-06 00:50:09

Dojo入门:增强的Ajax功能的相关文章

Hello dojo入门

经过了解几种Ajax框架,最后选择了Dojo框架.因为Ext不稳定,GWT觉得太浪费时间. 一:下载Dojo,地址是:http://dojotoolkit.org/downloads 二:做开发,当然要工具库的 API 帮助文档,就在下载地址的其它菜单中. 三:入门程序 Hello Dojo .一个简单的入门,可以增加兴趣与信心,同时,对 Dojo 有了简单的了解. 在 MyEclipse 中新建工程 ToDojo : 在 WebRoot 中新建一个文件夹 dojoroot ,把 Dojo 相关

掌握Dojo工具包,第1部分:Dojo入门简介

伴随 Web 2.0, Ajax 和 RIA 的热潮,各种 Ajax 开发工具包如雨后春笋般蓬勃发展,Dojo 正是这些工具包中的佼佼者.Dojo 为富互联网应用程序(RIA) 的开发提供了完整的端到端的解决方案,包括核心的 JavaScript 库,简单易用的小部件(Widget)系统和一个测试框架,此外,Dojo 的开源开发社区还在不停地为它提供新的功能. Dojo 是一个 JavaScript 实现的开源 DHTML 工具包.它是在几个项目捐助基础上建立起来的(nWidgets,f(m),

Java:在自定义JavaServer Faces组件中包含Ajax功能

异步 JavaScript 和 XML(Asynchronous JavaScript and XML,Ajax)技术能够提高 Web 应用程序 用户界面的响应能力和交互性.受益于其灵活且可拔插的 UI 组件模型,JavaServer Faces 技术已成为 向应用程序添加 Ajax 技术的完美框架.借助 DOJO JavaScript 工具包,组件开发人员能够更加轻松地 添加这项功能.本教程介绍如何借助 DOJO 工具包,将 Ajax 的强大功能添加到 JavaServer Faces 组件

使用ISAPI过滤器增强IIS的功能

作为一个WWW服务器软件,微软公司的Internet Infomation Server(IIS)简单易学,管理方便,得到了广泛的使用.您还可以通过ISAPI过滤器,进行自己定制的处理,来增强IIS的功能.ISAPI过滤器可以定制以下的处理:接收HTTP协议头预处理.发送HTTP协议头预处理.发送生数据预处理.获得生数据预处理.HTTP会话结束信息处理.自定义的安全认证机制.URL映射信息处理.日志记录处理等.灵活利用这些定制处理,您可以完成许多看似难以实现的功能,得到意想不到的效果.但是ISA

jQuery入门[5]-AJAX

jQuery为AJAX提供了非常丰富的支持,参见Ajax 其中最基本当属$ajax(),通过不同的参数,这个方法可以录活支持各种AJAX应用场景.如: $.ajax({ url: "test.html", cache: false, success: function(html){ $("#results").append(html); } }); 完整参数列表参见:options 当然,常用的应该是这些: load()--直接将AJAX请求结果作为jQuery对象

用于增强HTML页面功能的超文本标记

近年来,超文本标识语言(HTML)得到了迅速拓展.为满足更多的需要,它增加了许多扩展功能.设计新颖.吸引人的网页已经越来越依赖java applet(小程序).内嵌脚本.图文框.插件和其它扩展的HTML功能.这些扩展的HTML功能不仅可以对文本作进一步的格式化,而且可以嵌入程序.动画和其它交互式操作元素,将曾经是静态的主页转换成一幅新的美妙绝伦的画面,它可以任主页制作者充分发挥自己的想像力,设计出充满魅力的主页来.下面我就介绍几个用于增强HTML页面功能的超文本标记,这些标记正越来越多地用于网页

JavaScript中的ajax功能的概念和示例详解_javascript技巧

AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML). 个人理解:ajax就是无刷新提交,然后得到返回内容. 对应的不使用ajax时的传统网页如果需要更新内容(或用php做处理时),必须重载整个网页页面. 示例: html代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>

Wind2008 R2中PowerShell 2.0的ISE及增强的远程功能

http://www.aliyun.com/zixun/aggregation/32995.html">在Windows Serve 2008 R2中,一个重要改进就是PowerShell版本升级为2.0.Win 2008 R2包括一系列新的服务器管理界面,这些均建立在PowerShell 2.0之上.它新增了240个cmdlets命令集,新的PowerShell图形用户界面也增添了开发功能,从而用户能更简单创建自己的命令行.而且,PowerShell将能够安装到Windows服务器内核.

阿尔卡特朗讯企业通信面向中小企业推增强版通信功能

法国巴黎,2016年2月18日 - 当今的中小型企业希望借助先进的通信技术来促进业务增长,通过使用智能化办公来提升客户的满意度.阿尔卡特朗讯OpenTouch中小企业版套件的增强版通信功能,可以使业务合作伙伴能为中小型企业提供最简洁的通信工具,从而打造个性化的互联体验. 作为最新推出的合作伙伴价值计划(V4P)的一部分,ALE以阿尔卡特朗讯企业通信为品牌,携手业务合作伙伴一起探索如何更好地为中小型企业服务.OpenTouch中小企业版套件以阿尔卡特朗讯OmniPCX Office RCE R10