国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

XMLHttpRequest level2

lowett / 2705人閱讀

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

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

新建對象

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

屬性

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

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

方法

abort() 觸發(fā) abort 事件

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

getResponseHeader(key)

open(method, url)

overrideMimeType(mimetype) 重寫響應(yīng)類型，如果需要的話，在 send() 之前調(diào)用

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

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

事件

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

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

ev.lengthComputable 長度可計算
ev.loaded 接收的字節(jié)數(shù)
ev.total 總字節(jié)數(shù)

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

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

upload

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

FormData

表單數(shù)據(jù)類型

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

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

// 使用 FormData，不用設(shè)置請求的 Content-Type，xhr 能夠自動識別并設(shè)置
// 如果不使用 FormData，發(fā)送表單需要先設(shè)置 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 的相關(guān)設(shè)置，比如 事件監(jiān)聽，請求頭設(shè)置，響應(yīng)頭改寫等

xhr.send();

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/80896.html

相關(guān)文章

  • 聊聊Ajax那些事

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

    v1 評論0 收藏0

  • 聊聊Ajax那些事

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

    xzavier 評論0 收藏0

  • 聊聊Ajax那些事

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

    BigTomato 評論0 收藏0

  • 前端面試之htm5新特性

    摘要：今天來談?wù)勄岸嗣嬖囍谢旧厦看我幻娴臅r候都會被問到的一個問題，那就是的新特性。新表單元素元素，表示電話號碼。和通過設(shè)置和特性，可以將輸入框的數(shù)值輸入范圍限定在最低值和最高值之間。一旦為某輸入型控件設(shè)置了特性，那么此項必填，否則無法提交表單。 今天來談?wù)勄岸嗣嬖囍谢旧厦看我幻娴臅r候都會被問到的一個問題，那就是html5的新特性。這個是學(xué)習(xí)前端必須掌握的基礎(chǔ)知識。 新增的元素 html5...

    teren 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<