前面学习了使用dojo的XHR对象去进行ajax交互,而dojo提供了另外的一种并不依靠XHR对象的交互方式,使用io模块的iframe可以完成同样的功能
<html><body>
<script src="../dojo/dojo/dojo.js"
djConfig="parseOnLoad: true"></script>
<script>
dojo.require("dojo.io.iframe" );
function iframeTest(){
dojo.io.iframe.send({
form: dojo.byId('testForm') ,
url: "data.jsp" ,
method: "post" ,
handleAs: "html" ,
load: function(response, ioArgs) {
alert(response);
}
});
}
</script>
<form id="testForm" method="post" >
Name:<input type="text" name="name" size="40" /><br />
Sex:<input type="radio" name="sex" value="m" >
Male<input type="radio" name="sex" value="f"> Female<br />
<input type="button" name="sub" value="submit" onclick="iframeTest()" />
</form>
</body></html>
iframe的send方法的参数仍然是一个json对象,而且参数名跟前面的xhrGet方法参数的json对象参数名很类似,但是注意一点,handleAs属性的值大部分是html,因为iframe中本来就是保存的一个html页面,如果使用的是其他类型,如text,jsong等,则在服务器端必须使用 <textarea></textarea> 把要返回的数据包装起来,比如 hello, world 要被包装成 <textarea>hello,world</textarea>,所以最后存在 iframe 中的是一个文本域(textarea),这个文本域包含了从服务器端返回的数据。这么做的原因很简单,就是为了保持从服务器返回的数据“一成不变”,因为任何字符数据都可以“安全的”放在 HTML 页面的文本域中。想像一下,我们是不是可以在文本域中输入各种字符! dojo.io.iframe 会对 textarea 包装的数据进行处理:首先把 textarea 标签去掉,然后把数据转换为 handleAs 指定的类型传递给 handle中设置的回调函数。
dojo.io.iframe 是如何工作的呢?除了 XHR 对象之外还有什么方法可以实现表单的异步提交?其实这一切都很简单,dojo.io.iframe 首先会创建一个隐藏的 iframe 并插入到父页面的最后,然后设置此 iframe 的 src 属性为dojo-module-path/resources/blank.html(dojo-module-path 指 dojo 包所在的目录),iframe 页面的 onload 事件的处理函数被设置为父窗体的回调函数。接下来就是在 iframe 页面中发送请求,并接收服务器的响应。当 iframe 接收到服务器的反馈并加载完之后,父窗体的回调函数即被调用。
分享到:
相关推荐
实例VS2010代码 dojo_iframe无刷新上传文件demo.rar dojo_iframe无刷新上传文件demo.rar dojo_iframe无刷新上传文件demo.rar dojo_iframe无刷新上传文件demo.rar dojo_iframe无刷新上传文件demo.rar
【Dojo.GUI_v6.zip for pencil】是一款专为Pencil设计的GUI模板资源包,它扩展了Pencil这款优秀的Web原型设计工具的功能和视觉元素。Pencil是一个免费且开源的应用程序,允许用户创建各种交互式原型,适用于网页、...
dojo学习001_20101122.dojo学习文件
DOJO_API_中文参考手册.pdf 看看就知道 看看就知道
### 使用_Dojo_的_Ajax_应用开发进阶教程 #### JavaScript高级特性详解 随着Ajax技术的广泛应用,JavaScript作为客户端脚本语言的核心地位越发凸显。本文深入探讨了JavaScript中的几个重要概念,帮助开发者更好地...
dojo_part001_001_001dojo_part001_001_001dojo_part001_001_001
dojo_part003_003_003dojo_part003_003_003dojo_part003_003_003
5. **dojo/NodeList**: 这是一个类似jQuery的选择器,用于选取DOM节点集合,并提供了丰富的链式操作方法。 6. **dojo/fx**: 包含了一系列的动画效果函数,如dojo/fx/Toggler可以实现元素的显示和隐藏动画,dojo/fx/...
Dojo Mobile是Dojo框架的一个组件,它提供了一套丰富的组件库(称为小部件),这些小部件能够帮助开发者快速构建出类似原生应用的界面和交互效果。Dojo Mobile适合于创建轻量级且高性能的移动Web应用,它封装了许多...
- dojo.io:提供不同IO传输方式,如script、iframe等,用于Ajax调用。 - dojo.dnd:提供拖放功能的辅助API。 - dojo.string:处理字符串,包括修剪、大小写转换、编码、填充等。 - dojo.date:解析日期格式的...
《Dojo入门》这本书主要介绍了Dojo JavaScript库的使用,帮助初学者快速掌握这个强大的前端开发工具。Dojo是一个开源的JavaScript框架,旨在提供一站式的解决方案,包括UI组件、数据管理、动画效果、Ajax交互等功能...
### Dojo Toolkit与Ajax支持详解 #### 一、概述 **Dojo** 是一个功能强大的JavaScript库,旨在简化客户端Web应用程序的开发。它提供了一系列工具和技术来帮助开发者创建高性能、可扩展的应用程序。其中,Dojo对...
5. 数据结构和加密功能:Dojo提供了实用的集合数据结构,如List、Query、Set、Stack、Dictionary等,同时也提供了加密功能API,如Blowfish、MD5、Rijndael、SHA等。 6. 日历和动画:Dojo中的日期处理API让开发者...
Dojo 是一个强大的JavaScript工具库,它为Web开发提供了丰富的功能和组件,包括DOM操作、事件处理、动画效果、模块管理以及数据存储等。本文将通过一系列实例,帮助初学者快速掌握Dojo的核心概念和使用方法。 首先...
用最近的dojo1.2.1制作前端的ajax购书网站,分注册用户购物和非注册用户购物两部分(其实非注册用户只是个噱头),一个页面完成所有必要功能,页面颜色有点难看,管理员部分没有做。后端为servlet+ms sqlserver2k,...