摘要：狀態(tài)表示對(duì)象的狀態(tài)狀態(tài)描述未初始化。表示成功，表示未找到，表示服務(wù)器內(nèi)部錯(cuò)誤等。前提是瀏覽器必須支持這個(gè)功能，而且服務(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 對(duì)象用于在后臺(tái)與服務(wù)器交換數(shù)據(jù)。您能夠：
在不重新加載頁(yè)面的情況下更新網(wǎng)頁(yè)
在頁(yè)面已加載后從服務(wù)器請(qǐng)求/接收數(shù)據(jù)
在后臺(tái)向服務(wù)器發(fā)送數(shù)據(jù)
并且所有現(xiàn)代的瀏覽器都支持 XMLHttpRequest 對(duì)象。（簡(jiǎn)直程序員的夢(mèng)想ヾ(≧O≦)〃嗷~）

一如既往先看兼容性

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

var xmlhttp=new XMLHttpRequest();

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

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

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

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

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

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

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

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

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

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

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

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

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

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

以Ado Stream對(duì)象(二進(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ù)。

下面基本跟來(lái)源教程一樣,只是部分寫法有點(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ù)的傳送，無(wú)法用來(lái)讀取和上傳二進(jìn)制文件。

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

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

于是后面就有了新版本.

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

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

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

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

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

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

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

設(shè)置ajax請(qǐng)求超時(shí)時(shí)限，過了這個(gè)時(shí)限，就自動(dòng)停止 HTTP 請(qǐng)求。

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

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

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

上傳的progress事件屬于XMLHttpRequest.upload對(duì)象

下載的progress事件屬于XMLHttpRequest對(duì)象

里面有兩個(gè)重要屬性分別是

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

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

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

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

傳輸成功完成。

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

傳輸開始。

傳輸結(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)測(cè)試
        xmlhttp.open("GET", url, true);
        xmlhttp.send(null);
    }
}

function time_Out() {
    alert("請(qǐng)求超時(shí)！");
}

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)需要后臺(tái)代碼配合,詳情查閱請(qǐng)狠狠地點(diǎn)擊關(guān)于XMLHttpRequest 對(duì)象

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

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

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