關(guān)于ajax2的簡介和入門

由于老版本的ajax存在以下問題,從而導(dǎo)致了ajax2的出現(xiàn)

  • 只支持文本數(shù)據(jù)的傳送,無法用來讀取和上傳二進(jìn)制文件。
  • 傳送和接收數(shù)據(jù)時(shí),沒有進(jìn)度信息,只能提示有沒有完成。
  • 受到"同域限制"(Same Origin Policy),只能向同一域名的服務(wù)器請求數(shù)據(jù)。

ajax2的新特性有以下幾個(gè)

  • 可以設(shè)置HTTP請求的時(shí)限。
  • 可以使用FormData對象管理表單數(shù)據(jù)。
  • 可以上傳文件。
  • 可以請求不同域名下的數(shù)據(jù)(跨域請求)。
  • 可以獲取服務(wù)器端的二進(jìn)制數(shù)據(jù)。
  • 可以獲得數(shù)據(jù)傳輸?shù)倪M(jìn)度信息。

下面是利用H5的FromData,ajax異步傳輸文件和表單的代碼示例

var oMyForm = new FormData();

oMyForm.append("username", "Groucho");
oMyForm.append("accountnum", 123456); 
// 數(shù)字123456被立即轉(zhuǎn)換成字符串"123456"

 
// fileInputElement中已經(jīng)包含了用戶所選擇的文件
oMyForm.append("userfile", fileInputElement.files[0]); 

var oFileBody = "<a id="a"><b id="b">hey!</b></a>"; 
// Blob對象包含的文件內(nèi)容

var oBlob = new Blob([oFileBody], { type: "text/xml"});
 
oMyForm.append("webmasterfile", oBlob);
 
var oReq = new XMLHttpRequest();

oReq.open("POST", "[http://foo.com/submitform.php](http://foo.com/submitform.php)");

oReq.send(oMyForm);

新版本的ajax還增加了progress事件,還有其他與之相關(guān)的五個(gè)事件,可以查看進(jìn)度信息,請求時(shí)限

progress事件:正在傳輸事件。
load事件:傳輸成功完成。
abort事件:傳輸被用戶取消。
error事件:傳輸中出現(xiàn)錯(cuò)誤。
loadstart事件:傳輸開始。
loadEnd事件:傳輸結(jié)束,但是不知道成功還是失敗。

注意:下載的progress事件屬于XMLHttpRequest對象,上傳的progress事件屬于XMLHttpRequest.upload對象。

關(guān)于ajax的JQ用法和其他詳細(xì)用法見附錄。

附錄:
XMLHttpRequest Level 2 使用指南
通過jQuery Ajax使用FormData對象上傳文件
Web 前沿——HTML5 Form Data 對象的使用

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容