XMLHttpRequest分析

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

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

一句話描述該技術的用途

描述該技術的核心概念或運作流程

口述該技術的代碼書寫思路

該技術的優點

該技術的缺點

如何彌補缺點

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

我們再來說說什么是AJAX，AJAX = Asynchronous JavaScript and XML，翻譯為：異步的 JavaScript 和 XML。ajax就是基于瀏覽器提供的XMLHttpRequest對象來實現的。這下明白他們的關系了吧。

傳統的網頁(不使用 AJAX)如果需要更新內容，必需重載整個網頁面。自從有了ajax之后，我們就可以實現異步的加載網頁。

什么叫異步？

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

AJAX 工作原理：

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

XML 指可擴展標記語言(eXtensible Markup Language)。

我們在瀏覽器中使用XMLHTTPRequest對象在服務器之間通信，傳輸的數據是使用XML的方式，但最終還是會被轉換成json數據格式來被我們使用。

我們再來看看XHR的使用流程：首先我們需要新建一個XMLHttpRequest實例

var xhr = new XMLHttpRequest();然后，向遠程主機發出一個HTTP請求

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

xhr.send();接著，就等待遠程主機做出回應。這時需要監控XMLHttpRequest對象的狀態變化，指定回調函數

xhr.onreadystatechange = function(){

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

alert( xhr.responseText );

} else {

alert( xhr.statusText );

}

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

* xhr.readyState：XMLHttpRequest對象的狀態，等于4表示數據已經接收完畢。

* xhr.status：服務器返回的狀態碼，等于200表示一切正常。

* xhr.responseText：服務器返回的文本數據

* xhr.responseXML：服務器返回的XML格式的數據

* xhr.statusText：服務器返回的狀態文本。

老版本的XMLHttpRequest對象有以下幾個缺點：* 只支持文本數據的傳送，無法用來讀取和上傳二進制文件。

* 傳送和接收數據時，沒有進度信息，只能提示有沒有完成。

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

以上都是2010年以前使用的出來的過時的XMLHttpRequest對象了，現在我們都基本上使用的是HTML5中的新版本XMLHttpRequest對象。

新版本的功能：

新版本的XMLHttpRequest對象，針對老版本的缺點，做出了大幅改進。* 可以設置HTTP請求的時限。

* 可以使用FormData對象管理表單數據。

* 可以上傳文件。

* 可以請求不同域名下的數據(跨域請求)，CORS。

* 可以獲取服務器端的二進制數據。

* 可以獲得數據傳輸的進度信息。

1】HTTP請求的時限

xhr.timeout = 3000;

xhr.ontimeout = function(event){

alert('請求超時！');

}

上面的語句，將最長等待時間設為3000毫秒。過了這個時限，就自動停止HTTP請求。與之配套的還有一個timeout事件，用來指定回調函數。

2】FormData對象

ajax操作往往用來傳遞表單數據。為了方便表單處理，HTML 5新增了一個FormData對象，可以模擬表單。

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

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

formData.append('id', 123456);

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

FormData對象也可以用來獲取網頁表單的值：

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

var formData = new FormData(form);

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

xhr.send(formData);

3】上傳文件

新版XMLHttpRequest對象，不僅可以發送文本信息，還可以上傳文件。

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

var formData = new FormData();

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

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

}

xhr.send(formData);

4】跨域資源共享(CORS)

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。