XMLHttpRequest level2

lowett 發布于2019-08-20 12:18 / 2711人閱讀

摘要：使用此事件就沒必要再通過檢查來確認響應完成了。不過事件只是表示接收到服務器的響應，還需要通過來判斷響應是否成功。

HTML5 更新了很多API，XMLHttpRequest 就是其中一個。level 2 的XMLHttpRequest 更加強大了。

新建對象

var xhr = new XMLHttpRequst()
和之前一樣

屬性

先看老幾樣屬性
onreadystatechange 同步ajax不可用此事件回調，abort() 也不會觸發此事件，open() 之前設置
readyState 只讀
responseText 只讀
responseXML
responseURL
status
statusText

新屬性
responseType 設置響應類型，可以是 arraybuffer / blob / document / json / text ，默認是 text
response 響應內容
timeout 超時毫秒數，同步請求不可用。默認是0，永不超時。在 open() 和 send() 之間設置，超時會觸發 xhr 的 timeout 事件
upload 只讀，ajax 上傳對象，后面詳細講
withCredentials Boolean，是否允許跨域響應設置cookie，默認是 false

方法

abort() 觸發 abort 事件

getAllResponseHeaders() 返回所有響應頭部組成的字符串

getResponseHeader(key)

open(method, url)

overrideMimeType(mimetype) 重寫響應類型，如果需要的話，在 send() 之前調用

send() 可以發送 FormData / Blob / Buffer / String / Document，不發送數據的話，建議使用 xhr.send(null)

setRequestHeader(key, value) 設置請求頭，在 open() 和 send() 之間調用。如果沒有設置 Accept，則默認是 */*

事件

loadstart send() 之后觸發，只觸發一次
progress 進度事件，會不斷被觸發

xhr.addEventListener("progress", ev => {
  if (ev.lengthComputable) {
    console.log(ev.loaded / ev.total);
  }
});

ev.lengthComputable 長度可計算
ev.loaded 接收的字節數
ev.total 總字節數

// 可以使用 "onprogress" in xhr 判斷瀏覽器是否支持 progress 事件

load 響應完成時觸發。使用此事件就沒必要再通過檢查 xhr.readyState === 4 來確認響應完成了。不過 load 事件只是表示接收到服務器的響應，還需要通過 xhr.status 來判斷響應是否成功。
error
abort xhr.abort() 觸發
timeout 設置 xhr.timeout 之后，響應超時時觸發

upload

xhr.upload 是 ajax 上傳對象
xhr.upload 也有以下事件
progress
load
error
abort
xhr.upload.onprogress 和 xhr.onprogress 使用差不多，只是一個針對文件上傳過程，一個針對從服務器獲取響應的過程

FormData

表單數據類型

var form = new FormData();
form.append("username", "xiaoming");

或者
var form = new FormData(document.getElementsByTagName("form")[0]);

// 使用 FormData，不用設置請求的 Content-Type，xhr 能夠自動識別并設置
// 如果不使用 FormData，發送表單需要先設置 Content-Type 為 `application/x-www-form-urlencoded`, 如果表單中有文件需要上傳，則 Content-Type 為 `multipart/form-data`
xhr.send(form);

// 如果只是上傳文件，可以直接使用 `xhr.send(file)`

綜上所述，使用 ajax 時，步驟如下：

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {}; level2 幾乎可以不用了

xhr.open();

xhr 的相關設置，比如事件監聽，請求頭設置，響應頭改寫等

xhr.send();

GPU云服務器云服務器 level2 XMLHttpRequest level2數據 XMLHttpRequest介紹

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/80896.html

聊聊Ajax那些事

摘要：年初，許多事件使得被大眾所接受。這使得應用程序更為迅捷地響應用戶交互，并避免了在網絡上發送那些沒有改變的信息，減少用戶等待時間，帶來非常好的用戶體驗。調用方法后立即觸發，若未被調用則不會觸發此事件。了解Ajax的起源、概念及特點起源該技術在1998年前后得到了應用。允許客戶端腳本發送HTTP請求（XMLHTTP）的第一個組件由Outlook Web Access小組寫成。該組...

v1 2019-08-29 11:08 評論0 收藏0
聊聊Ajax那些事

摘要：年初，許多事件使得被大眾所接受。這使得應用程序更為迅捷地響應用戶交互，并避免了在網絡上發送那些沒有改變的信息，減少用戶等待時間，帶來非常好的用戶體驗。調用方法后立即觸發，若未被調用則不會觸發此事件。了解Ajax的起源、概念及特點起源該技術在1998年前后得到了應用。允許客戶端腳本發送HTTP請求（XMLHTTP）的第一個組件由Outlook Web Access小組寫成。該組...

xzavier 2019-08-01 15:38 評論0 收藏0
聊聊Ajax那些事

摘要：年初，許多事件使得被大眾所接受。這使得應用程序更為迅捷地響應用戶交互，并避免了在網絡上發送那些沒有改變的信息，減少用戶等待時間，帶來非常好的用戶體驗。調用方法后立即觸發，若未被調用則不會觸發此事件。了解Ajax的起源、概念及特點起源該技術在1998年前后得到了應用。允許客戶端腳本發送HTTP請求（XMLHTTP）的第一個組件由Outlook Web Access小組寫成。該組...

BigTomato 2019-08-20 10:23 評論0 收藏0
前端面試之htm5新特性

摘要：今天來談談前端面試中基本上每次一面的時候都會被問到的一個問題，那就是的新特性。新表單元素元素，表示電話號碼。和通過設置和特性，可以將輸入框的數值輸入范圍限定在最低值和最高值之間。一旦為某輸入型控件設置了特性，那么此項必填，否則無法提交表單。今天來談談前端面試中基本上每次一面的時候都會被問到的一個問題，那就是html5的新特性。這個是學習前端必須掌握的基礎知識。新增的元素 html5...

teren 2019-08-01 17:07 評論0 收藏0