XMLHttpRequest分析

之前分析面試常被問的跨域問題，另一個(gè)面試難題就是ajax原理相關(guān)的問題了，今天我們就來solve它。

開篇先來介紹一個(gè)之前看過的一篇文章，講的是如何回答面試中的原理題，我們也可以把以下的這種方法運(yùn)用到學(xué)習(xí)前端知識(shí)上面。如果是英文詞匯就先翻譯成中文

一句話描述該技術(shù)的用途

描述該技術(shù)的核心概念或運(yùn)作流程

口述該技術(shù)的代碼書寫思路

該技術(shù)的優(yōu)點(diǎn)

該技術(shù)的缺點(diǎn)

如何彌補(bǔ)缺點(diǎn)

現(xiàn)在我們正式開始了解XMLHTTPRequest對(duì)象，顧名思義：是基于XML的HTTP請(qǐng)求。XMLHttpRequest是一個(gè)瀏覽器接口，使得Javascript可以進(jìn)行HTTP(S)通信。自從瀏覽器提供有了XMLHTTPRequest這個(gè)接口之后，ajax操作就此誕生。

我們?cè)賮碚f說什么是AJAX，AJAX = Asynchronous JavaScript and XML，翻譯為：異步的 JavaScript 和 XML。ajax就是基于瀏覽器提供的XMLHttpRequest對(duì)象來實(shí)現(xiàn)的。這下明白他們的關(guān)系了吧。

傳統(tǒng)的網(wǎng)頁(不使用 AJAX)如果需要更新內(nèi)容，必需重載整個(gè)網(wǎng)頁面。自從有了ajax之后，我們就可以實(shí)現(xiàn)異步的加載網(wǎng)頁。

什么叫異步？

異步，異嘛，不同的意思，這里也就是指不跟瀏覽器加載執(zhí)行網(wǎng)頁代碼的步伐一致，也就是說在一個(gè)網(wǎng)頁中需要用戶操作來觸發(fā)執(zhí)行代碼，而不是整個(gè)網(wǎng)頁代碼一次性執(zhí)行完畢。(這里的用戶操作是指在同一個(gè)網(wǎng)頁下面請(qǐng)求代碼執(zhí)行渲染，而不是讓瀏覽器直接跳轉(zhuǎn)渲染另一個(gè)頁面)

AJAX 工作原理：

這里面都提到了一個(gè)概念XML，那什么是XML呢？

XML 指可擴(kuò)展標(biāo)記語言(eXtensible Markup Language)。

我們?cè)跒g覽器中使用XMLHTTPRequest對(duì)象在服務(wù)器之間通信，傳輸?shù)臄?shù)據(jù)是使用XML的方式，但最終還是會(huì)被轉(zhuǎn)換成json數(shù)據(jù)格式來被我們使用。

我們?cè)賮砜纯碭HR的使用流程：首先我們需要新建一個(gè)XMLHttpRequest實(shí)例

var xhr = new XMLHttpRequest();然后，向遠(yuǎn)程主機(jī)發(fā)出一個(gè)HTTP請(qǐng)求

xhr.open('GET', 'example.php');

xhr.send();接著，就等待遠(yuǎn)程主機(jī)做出回應(yīng)。這時(shí)需要監(jiān)控XMLHttpRequest對(duì)象的狀態(tài)變化，指定回調(diào)函數(shù)

xhr.onreadystatechange = function(){

if ( xhr.readyState == 4 && xhr.status == 200 ) {

alert( xhr.responseText );

} else {

alert( xhr.statusText );

}

};上面的代碼包含了老版本XMLHttpRequest對(duì)象的主要屬性：

* xhr.readyState：XMLHttpRequest對(duì)象的狀態(tài)，等于4表示數(shù)據(jù)已經(jīng)接收完畢。

* xhr.status：服務(wù)器返回的狀態(tài)碼，等于200表示一切正常。

* xhr.responseText：服務(wù)器返回的文本數(shù)據(jù)

* xhr.responseXML：服務(wù)器返回的XML格式的數(shù)據(jù)

* xhr.statusText：服務(wù)器返回的狀態(tài)文本。

老版本的XMLHttpRequest對(duì)象有以下幾個(gè)缺點(diǎn)：* 只支持文本數(shù)據(jù)的傳送，無法用來讀取和上傳二進(jìn)制文件。

* 傳送和接收數(shù)據(jù)時(shí)，沒有進(jìn)度信息，只能提示有沒有完成。

* 受到"同域限制"(Same Origin Policy)，只能向同一域名的服務(wù)器請(qǐng)求數(shù)據(jù)。

以上都是2010年以前使用的出來的過時(shí)的XMLHttpRequest對(duì)象了，現(xiàn)在我們都基本上使用的是HTML5中的新版本XMLHttpRequest對(duì)象。

新版本的功能：

新版本的XMLHttpRequest對(duì)象，針對(duì)老版本的缺點(diǎn)，做出了大幅改進(jìn)。* 可以設(shè)置HTTP請(qǐng)求的時(shí)限。

* 可以使用FormData對(duì)象管理表單數(shù)據(jù)。

* 可以上傳文件。

* 可以請(qǐng)求不同域名下的數(shù)據(jù)(跨域請(qǐng)求)，CORS。

* 可以獲取服務(wù)器端的二進(jìn)制數(shù)據(jù)。

* 可以獲得數(shù)據(jù)傳輸?shù)倪M(jìn)度信息。

1】HTTP請(qǐng)求的時(shí)限

xhr.timeout = 3000;

xhr.ontimeout = function(event){

alert('請(qǐng)求超時(shí)！');

}

上面的語句，將最長等待時(shí)間設(shè)為3000毫秒。過了這個(gè)時(shí)限，就自動(dòng)停止HTTP請(qǐng)求。與之配套的還有一個(gè)timeout事件，用來指定回調(diào)函數(shù)。

2】FormData對(duì)象

ajax操作往往用來傳遞表單數(shù)據(jù)。為了方便表單處理，HTML 5新增了一個(gè)FormData對(duì)象，可以模擬表單。

//首先，新建一個(gè)FormData對(duì)象。var formData = new FormData();

//然后，為它添加表單項(xiàng)。formData.append('username', '張三');

formData.append('id', 123456);

//最后，直接傳送這個(gè)FormData對(duì)象。這與提交網(wǎng)頁表單的效果，完全一樣。xhr.send(formData);

FormData對(duì)象也可以用來獲取網(wǎng)頁表單的值：

var form = document.getElementById('myform');

var formData = new FormData(form);

formData.append('secret', '123456'); // 添加一個(gè)表單項(xiàng)xhr.open('POST', form.action);

xhr.send(formData);

3】上傳文件

新版XMLHttpRequest對(duì)象，不僅可以發(fā)送文本信息，還可以上傳文件。

假定files是一個(gè)"選擇文件"的表單元素(input[type="file"])，我們將它裝入FormData對(duì)象。

var formData = new FormData();

for (var i = 0; i < files.length;i++) {

formData.append('files[]', files[i]);

}

xhr.send(formData);

4】跨域資源共享(CORS)

新版本的XMLHttpRequest對(duì)象，可以向不同域名的服務(wù)器發(fā)出HTTP請(qǐng)求。這叫做"跨域資源共享"(Cross-origin resource sharing，簡稱CORS)。

使用"跨域資源共享"的前提，是瀏覽器必須支持這個(gè)功能，而且服務(wù)器端必須同意這種"跨域"。如果能夠滿足上面的條件，則代碼的寫法與不跨域的請(qǐng)求完全一樣。

跨域之前我們都講過了，這里就不多提了，其他的新XMLHttpRequest對(duì)象的功能，個(gè)人覺得日常開發(fā)中可能遇到很少，就不去總結(jié)了。

總結(jié)

以上是生活随笔為你收集整理的浏览器中xhr选项是做什么用的呢_XHR和AJAX终于搞懂了！！的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。