摘要：狀態(tài)表示對象的狀態(tài)狀態(tài)描述未初始化。表示成功，表示未找到，表示服務(wù)器內(nèi)部錯誤等。前提是瀏覽器必須支持這個功能，而且服務(wù)器端必須同意這種跨域。事件傳輸成功完成。

關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(零)
關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(一) ----- XMLHttpRequest
關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(二) ----- File
關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(三) ----- FormData
關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(四) ----- FileReader
關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(五) ----- H5拖拽事件
關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(六) ----- 圖片上傳,旋轉(zhuǎn),重繪,預(yù)覽等實(shí)戰(zhàn)(附DEMO)

XMLHttpRequest 對象用于在后臺與服務(wù)器交換數(shù)據(jù)。您能夠：
在不重新加載頁面的情況下更新網(wǎng)頁
在頁面已加載后從服務(wù)器請求/接收數(shù)據(jù)
在后臺向服務(wù)器發(fā)送數(shù)據(jù)
并且所有現(xiàn)代的瀏覽器都支持 XMLHttpRequest 對象。（簡直程序員的夢想ヾ(≧O≦)〃嗷~）

一如既往先看兼容性

因?yàn)樗鞋F(xiàn)代瀏覽器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都內(nèi)建了 XMLHttpRequest 對象。創(chuàng)建 XMLHttpRequest 對象只需要這樣

var xmlhttp=new XMLHttpRequest();

舊的瀏覽器也有辦法拯救!!!

var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); // 括號里面的是ActiveX插件的名字. 

獲取指定的相應(yīng)頭部信息

自定義HTTP頭部信息。需在open()方法之后和send()之前調(diào)用，才能成功發(fā)送請求頭部信息。

向服務(wù)器發(fā)出請求，如果采用異步方式，該方法會立即返回。content可以指定為null表示不發(fā)送數(shù)據(jù)，其內(nèi)容可以是DOM對象，輸入流或字符串。

調(diào)用此方法可取消異步請求，調(diào)用后，XHR對象停止觸發(fā)事件，不允許訪問任何與響應(yīng)相關(guān)的屬性；

可以傳遞一個函數(shù)的名稱，當(dāng) XMLHttpRequest 對象的狀態(tài)發(fā)生改變時，會觸發(fā)此函數(shù)。狀態(tài)從 0 (uninitialized) 到 4 (complete) 進(jìn)行變化. 事件使代碼復(fù)雜化了。但是這是在沒有得到服務(wù)器響應(yīng)的情況下，防止代碼停止的最安全的方法。

表示XMLHttpRequest對象的狀態(tài)：

表示服務(wù)器返回的http狀態(tài)碼。200表示“成功”，404表示“未找到”，500表示“服務(wù)器內(nèi)部錯誤”等。
總的來說有幾部分:

詳情查閱請狠狠地點(diǎn)擊服務(wù)器返回的各種HTTP狀態(tài)碼介紹

服務(wù)器響應(yīng)的文本內(nèi)容.

服務(wù)器響應(yīng)的XML內(nèi)容對應(yīng)的DOM對象.

服務(wù)器返回狀態(tài)的文本信息。

將響應(yīng)信息正文以unsigned byte數(shù)組形式返回(二進(jìn)制數(shù)據(jù)).

以Ado Stream對象(二進(jìn)制流)的形式返回響應(yīng)信息.

從響應(yīng)信息中獲取指定的http頭.

獲取響應(yīng)的所有http頭.

通常用于重寫服務(wù)器響應(yīng)的MIME類型。
Eg，正常情況下XMLHttpRequest只接收文本數(shù)據(jù)，但我們可以重寫MIME為“text/plain; charset=x-user-defined”，以欺騙瀏覽器避免瀏覽器格式化服務(wù)器返回的數(shù)據(jù)，以實(shí)現(xiàn)接收二進(jìn)制數(shù)據(jù)。

下面基本跟來源教程一樣,只是部分寫法有點(diǎn)區(qū)別

var xmlhttp;

function loadXMLDoc(url) {
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest()
    } else if (window.ActiveXObject) {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
    } else {
        xmlhttp = null;
        alert("Your browser does not support XMLHTTP.");
    }

    if (xmlhttp) {
        xmlhttp.onreadystatechange = state_Change;
        xmlhttp.open("GET", url, true);
        xmlhttp.send(null);
    }

    //post
    /*if(xmlhttp) {
        xmlhttp.onreadystatechange = state_Change;
        xmlhttp.open(""POST"", url);
        xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xmlhttp.send(null);
    }*/
}

function state_Change() {
    if (xmlhttp.readyState === 4) { // 4 = "loaded"
        if (xmlhttp.status === 200) { // 200 = OK
            // ...our code here...
        } else {
            alert("Problem retrieving XML data");
        }
    }
}

看著挺強(qiáng)大,實(shí)際還是有挺多缺點(diǎn)的,例如:

只支持文本數(shù)據(jù)的傳送，無法用來讀取和上傳二進(jìn)制文件。

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

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

于是后面就有了新版本.

新版本針對以前的缺點(diǎn)升級的新增功能主要有以下:

可以設(shè)置 HTTP 請求的時限。（部分瀏覽器兼容有問題）

可以使用 FormData 對象管理表單數(shù)據(jù)。（后續(xù)文章會講到）

下載和上載圖像、視頻和音頻等二進(jìn)制文件（無需使用插件）。（其實(shí)整個系列文章都是圍繞這個需求才得出的）

可以請求不同域名下的數(shù)據(jù)（跨域請求）。（前提是瀏覽器必須支持這個功能，而且服務(wù)器端必須同意這種"跨域"。前端代碼的寫法與不跨域的請求完全一樣。）

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

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

設(shè)置ajax請求超時時限，過了這個時限，就自動停止 HTTP 請求。

(默認(rèn)：“text”)在發(fā)送請求前，根據(jù)您的數(shù)據(jù)需要，將xhr.responseType設(shè)置為“text”、“arraybuffer”、“blob”或“document”。（暫時不講）

成功發(fā)送請求后，xhr的響應(yīng)屬性會包含DOMString、ArrayBuffer、Blob 或 Document 形式（具體取決于responseTyp的設(shè)置）的請求數(shù)據(jù)。

傳送數(shù)據(jù)的時候，用來返回進(jìn)度信息。它分成上傳和下載兩種情況：

上傳的progress事件屬于XMLHttpRequest.upload對象

下載的progress事件屬于XMLHttpRequest對象

里面有兩個重要屬性分別是

total:需要傳輸?shù)目傋止?jié)，

loaded:已經(jīng)傳輸?shù)淖止?jié)。

(大家都應(yīng)該猜到這就是實(shí)現(xiàn)進(jìn)度條的東西了)

當(dāng)ajax超過timeout 時限時觸發(fā)的回調(diào)函數(shù)。

傳輸成功完成。

傳輸中出現(xiàn)錯誤。

傳輸開始。

傳輸結(jié)束，但是不知道成功還是失敗。

還以上面的代碼示例修改一下

var xmlhttp;

function loadXMLDoc(url) {
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest()
    } else if (window.ActiveXObject) {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
    } else {
        xmlhttp = null;
        alert("Your browser does not support XMLHTTP.");
    }

    if (xmlhttp) {
        xmlhttp.timeout = 3000;
        xmlhttp.ontimeout = time_Out;
        xmlhttp.onreadystatechange = state_Change;
        xmlhttp.upload.onprogress = load_Change;//未經(jīng)測試
        xmlhttp.open("GET", url, true);
        xmlhttp.send(null);
    }
}

function time_Out() {
    alert("請求超時！");
}

function state_Change() {
    if (xmlhttp.readyState === 4) { // 4 = "loaded"
        if (xmlhttp.status === 200) { // 200 = OK
            // ...our code here...
        } else {
            alert("Problem retrieving XML data");
        }
    }
}

function load_Change(evt) {
    if (evt.lengthComputable) {
        var percentComplete = Math.round(evt.loaded * 100 / evt.total);
        xx.value = percentComplete;
        xx.style.width = percentComplete + "%";
    }
}

實(shí)戰(zhàn)需要后臺代碼配合,詳情查閱請狠狠地點(diǎn)擊關(guān)于XMLHttpRequest 對象

load_Change函數(shù)寫著未經(jīng)測試是需要傳送后臺返回數(shù)據(jù)才能拿到,我暫時沒辦法測試,只是給個思路給你們實(shí)現(xiàn)進(jìn)度條,參考網(wǎng)上其他文章然后加進(jìn)去的,有興趣可以自行搜索,沒興趣就忽略吧,怕誤人子弟就不好了(據(jù)說部分手機(jī)不支持),里面的evt一般是這樣子的

詳情查閱請狠狠地點(diǎn)擊原生js上傳文件 顯示進(jìn)度條

實(shí)話實(shí)說,這章看起來內(nèi)容好少比較簡單,其實(shí)你被誤導(dǎo)了,是我寫的簡單了,實(shí)際有好多東西都沒寫出來,因?yàn)槲乙策€在摸索沒太搞懂,想做出一個完整實(shí)例需要后端配合能力,這是硬傷,我還沒到這水平,就是讓大家知道有這么一個東西,建議大家網(wǎng)上查看其它資料.