Dojo高级传输层 io 包中的dojo.iframe

在丰富的Dojo框架库中，Dojo Core 提供了一个 io 包，由两个对象组成：dojo.io.iframe 和 dojo.io.script，Dojo 的官方说明把他们描述成“高级传输层（advanced ajax transport layer）”。使用 dojo.io.iframe 同样可以跟服务器交互，但是它的实现思路是有别于 XHR 对象的。dojo.io.iframe 的使用方式、参数与 xhrGet 非常相似。如xhrGet 中的from，url，handleAs，load 等参数在这里也存在，但有一处不同的是 method，method 表示 dojo.io.iframe 将以何种 HTTP Method 来发送请求。

疑问：

dojo.io.iframe 是如何工作的呢？
除了 XHR 对象之外还有什么方法可以实现表单的异步提交？

其实这一切都很简单，dojo.io.iframe 首先会创建一个隐藏的 iframe 并插入到父页面的最后，然后设置此 iframe 的 src 属性为dojo-module-path/resources/blank.html（dojo-module-path 指 dojo 包所在的目录），iframe 页面的 onload 事件的处理函数被设置为父窗体的回调函数。接下来就是在 iframe 页面中发送请求，并接收服务器的响应。当 iframe 接收到服务器的反馈并加载完之后，父窗体的回调函数即被调用。

疑问：

那么dojo.io.iframe有哪些函数呢？

create(fname, onloadstr, uri) 用来在页面中创建 iframe。

参数	类型	描述
fname	String	所创建 iframe 的名字，setSrc 和 doc 函数据此引用创建的 iframe
onloadstr	String	表示 iframe 加载完成后执行的回调函数
uri	String	iframe 请求的资源，当 uri 为空时，将加载dojo-module-path/resources/blank.html

doc(iframeNode) 获取指定的 iframe 页面的 DOM 根节点，有了它可以对 iframe 页面进行任意的操作。

参数	类型	描述
iframeNode	undefined

setSrc(iframe, src, replace) 设置指定的 iframe 的 src 属性，这将导致 iframe 页面重新加载。

参数	类型	描述
iframe	undefined
src	undefined
replace	undefined

dojo.io.iframe 采用了不同的思路实现了“异步”发送请求，但是 dojo.io.iframe 使用并不多，因为当页面中多处需要异步通信时，在页面中创建很多的 iframe 并不是好的注意。在能使用 xhr 框架的地方尽量使用 xhr 框架，唯一值得使用 iframe 的地方是发送文件。

疑问：

来个例子呗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>dojo.iframe笔记 --http://www.cnblogs.com/f-ye</title>
    <!-- import css -->
    <link href="/Dojoroot/dojo/resources/dojo.css" rel="stylesheet" type="text/css" />
    <link href="/Dojoroot/dijit/themes/soria/soria.css" rel="stylesheet" type="text/css" />    
    <!-- import js -->
    <script type="text/javascript" src="/Dojoroot/dojo/dojo.js" data-dojo-config="parseOnLoad: false, async:true"></script>
</head>
<body class="soria"> 
<div>
    <label>教程文件</label>
    <form id="uploadForm" method="post" enctype="multipart/form-data">
        <input id="courseFile" name="courseFile" type="file" />
    </form>
</div>
<div>
    <input type="button" value="上传" onclick="DoUpload()" />
</div>
    <script type="text/javascript">
        require(["dojo/io/iframe"]);
        function DoUpload() {
            dojo.io.iframe.send({
                contentType:"multipart/form-data",
                url: "/teach/upload",
                handleAs: "text",
                load: function (result) { alert(result); },
                error: function (err) { alert(result); },
                form: "uploadForm"
            });
        }
    </script>
</body>
</html>

需要注意的一点是 handleAs 参数，dojo.io.iframe 一般使用 html，因为在 iframe 中存的其实是另一个 HTML 页面。如果 handleAs 设置为其他值，像 json，text 等，则在服务器端须使用 <textarea></textarea> 把要返回的数据包装起来，比如 hellow, world 要被包装成 <textarea>hello,world</textarea>，所以最后存在 iframe 中的是一个文本域（textarea），这个文本域包含了从服务器端返回的数据。这么做的原因很简单，就是为了保持从服务器返回的数据“一成不变”，因为任何字符数据都可以“安全的”放在 HTML 页面的文本域中。想像一下，我们是不是可以在文本域中输入各种字符！ dojo.io.iframe 会对 textarea 包装的数据进行处理：首先把 textarea 标签去掉，然后把数据转换为 handleAs 指定的类型传递给 handle 中设置的回调函数。

疑问：

那服务端怎么写呢？（介绍在MVC3中的写法）

        public ActionResult Upload(FormCollection form)
        {
            var result = "没有文件";
            if (Request.Files.Count > 0)
            {
                var file = Request.Files[0];
                if (file.ContentLength == 0)
                {
                    result = "文件为空";
                }
                else
                {
                    file.SaveAs(Server.MapPath("~/UpLoad/") + file.FileName);
                    result = "成功";
                }
            }
            return Content(String.Format("<textarea>{0}</textarea>", result));
        }

posted @ 2013-03-12 20:58 灰身阅读(928) 评论(0) 编辑收藏举报

刷新页面返回顶部

灰身

Dojo高级传输层 io 包中的dojo.iframe

公告