dojo.io.iframe異步發送form數據包打賞

今天在使用dojo進行異步請求動作的同時,加入了一個文件上傳,由于不想引入struts等框架,采用了古老的jspsmartupload,結果用xhrPost異步提交時無論如何都沒有反應,鑒于公司限網,只好回家查資料了。搜索一番發現dojo中想異步上傳數據包,有一個專門的方法,就是使用dojo.io.iframe。

這里,順帶提一下dojo的XHR,XHR框架是dojo對ajax支持的一組方法,允許想服務器端發出get、post、put、delete請求,這些方法包括:xhrGet、xhrPost、xhrPut、xhrDelete。具體在前面轉載的文章《用Dojo實現XHR、跨域、及其他Ajax請求》中描述的很清楚,有需要的可以去了解。
這里需要注意,所有這些函數都遵守相同的語法:接受一個屬性配置對象作為參數。在這些對象中您可以定義您想要發出的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刪除數據,每一種類型的請求對應一種服務器端具體的操作。

XHR對于普通的Web請求具有很強的可操作性,但是對于像異步的上傳文件等操作顯得比較棘手,不過沒關系,dojo已經為我們想到了這些。

dojo通過使用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 接收到服務器的反饋并加載完之后,父窗體的回調函數即被調用。

XHR 框架中的函數功能強大,使用方便。但是 XHR 框架的函數有一問題就是不能跨域訪問,瀏覽器不允許 XHR 對象訪問其他域的站點。

JSONP(JSONP Padding)就是為了解決跨域訪問而產生的:
通過<javascript></javascript>標簽訪問封裝JSON數據的地址
將要返回的數據封裝為JSON對象
數據返回給瀏覽器,并被自動執行

這便是JSONP執行的基本流程,但是想要確定數據是否加載完成并不容易,通常的做法是設置一個回調方法,這個方法的名稱被作為請求參數的一部分發送給服務器,服務器在將數據封裝完整后,生成回調方法執行的代碼,并將這些信息全部返回給客戶端,當客戶端執行返回數據時,回調方法也會被隨之調用。

總結下來,傳送文件則iframe,跨域訪問則使用動態腳本,其余則選XHR框架。

轉入正題,給大家整理一個簡單的異步上傳示例:
<script>
dojo.require("dojo.io.iframe");
</script>
首先引入,這里不多做介紹,然后,我們要建一個form表單:
<form?id="form1"?enctype="multipart/form-data"?method="post">
<table?class="style1">
<tr>
<td>
文件名:</td>
<td?align="left">
<input?id="txt_name"?name="txt_name"?type="text"?/></td>
</tr>
<tr>
<td>
文件地址:</td>
<td?align="left">
<input?id="f_img"?name="f_img"?type="file"?/></td>
</tr>
<tr>
<td>
&nbsp;</td>
<td?align="left">
<input?id="btn_submit"?type="submit"?value="submit"?/></td>
</tr>
</table>
</form>
這里要注意的幾點就是,第一行,必須有method="post"和enctype="multipart/form-data",不然為默認使用get請求,最后就是提交這個表單了,請看下面的javascript片斷:

dojo.io.iframe.send({
form:?"form1",
handleAs:?"json",
url:?"ajax.jsp",
handle:?function(response,?args)?{
alert(response.result)
return?response;
}
});

它的語法和dojo.xhrXXX的語法是相同的,但它不支持接受xml格式內容,在服務端返回的內容必須放到一個textarea標簽里,例如:
response.getWriter().write("<html><body><textarea>{result:\"出錯\"}</textarea></body></html>");
然后,我在客戶端接收到返回的值后,進行處理:

var?defer1?=?new?dojo.Deferred();
dojo.io.iframe.send({
form:?"form1",
handleAs:?"json",
url:?"ajax.aspx",
handle:?function(response,?args)?{
if?(response.result?==?"ok")?{
defer1.callback(response)
}?else?{
defer1.errback(new?Error(response.result));
alert(response.result)
}
return?response;
}
});

這里又有一個新的東西了,叫dojo.Deferred,翻譯過來就是“延遲處理”,因為很多時候,你不太可能把所有的代碼都寫在ajax返回方法,這個時候,就可以用到它了,好像jquery1.5之后才出現這個功能,有興趣的可以了解下,這里我就不多說了,大家只需要知道它可以把方法引到外面來就行了,dojo的ajax里返回的也是它,然后我在下面寫新的方法來顯示剛才上傳的圖片:

defer1.addCallback(function(response)?{
var?newNode?=?document.createElement("img");
dojo.attr(newNode,?"src",?response.imgUrl);
dojo.place(newNode,?dojo.query("body")[0],?"last");
return?response;
})

這樣寫,它會在處理完提交后,按順序自動調用這個方法。你只要一直return response;你就可以一直addCallback,有人叫這為"模擬進程"。

dojo.io.iframe異步發送form數據包
文章《dojo.io.iframe異步發送form數據包》二維碼
  • 微信打賞
  • 支付寶打賞

已有20條評論

  1. 浴室私房照

    [強烈鄙視]

    2015-10-05 15:03 回復
  2. 無節操圖片

    路過,留個腳印,網站很棒!

    2015-10-01 10:26 回復
  3. 愛奇趣分享網

    不錯的站點,以后一定常來。

    2015-09-07 14:06 回復
  4. 歪妖內涵網

    秒贊不是偶然,是一種態度!

    2015-08-25 18:36 回復
  5. 最勵志網

    網站不錯,雁過留痕,歡迎互訪!

    2015-08-01 10:20 回復
  6. 剪板機刀片

    學習ing,看著頭疼啊

    2012-12-15 17:05 回復
  7. 鐵水包

    對這些不懂啊,唉我技術不行

    2012-12-06 09:07 回復
  8. 潤初顏

    技術博呀!牛人!

    2012-12-04 08:56 回復
  9. 祛痘印

    這個看著頭疼啊

    2012-12-03 17:20 回復
  10. 籃球比分

    技術活啊

    2012-12-03 15:25 回復
  11. 不亦樂乎

    已經純粹技術流了。你的生活紀實多長時間沒更新了。

    2012-12-02 14:21 回復
  12. 龍貓

    有水平

    2012-11-30 16:19 回復
  13. 籃球比分

    來坐沙發的,看不懂內容

    2012-11-30 14:19 回復

(必填)

(必填)

(可選)

黑龙江22选5开奖