dojo入门5_iframe
前面学习了使用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 接收到服务器的反馈并加载完之后,父窗体的回调函数即被调用。