ajax XMLHttpRequest · 前端

>[danger]* XMLHttpRequest不好用,所以各個框架都要將其封裝.規范制定者也知道不好用,所以就出了個[Fetch](https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API)API來代替XMLHttpRequest >* 由于Fetch API目前的[瀏覽器兼容性](https://caniuse.com/#search=fetch)不行,所以現在還不被考慮使用,但是它真的很好用 ## **屬性** ### **父類XMLHttpRequestEventTarget的屬性：** **onabort** 當請求失敗時調用該方法，接受 abort 對象作為參數。IE10 **onerror** 當請求發生錯誤時調用該方法，接受 error 對象作為參數。IE10 **onload** 當一個 HTTP 請求正確加載出內容后返回時調用，接受 load 對象作為參數。IE9 **onloadstart** 當一個 HTTP 請求開始加載數據時調用，接受 loadstart 對象作為參數。IE10 **onprogress** 間歇調用該方法用來獲取請求過程中的信息，接受 progress 對象作為參數。IE10 **ontimeout** 當超時時調用，接受 timeout 對象作為參數；只有設置了 XMLHttpRequest 對象的 timeout 屬性時，才可能發生超時事件。IE8 **XMLHttpRequestEventTarget.onloadend** 當內容加載完成，不管失敗與否，都會調用該方法，接受 loadend 對象作為參數。IE10 ### **自身XMLHttpRequest的屬性** **onreadystatechange** 當 readyState 屬性發生變化時，調用的 EventHandler。【IE5】 **readyState** 只讀,返回一個無符號短整型（unsigned short）數字，代表請求的狀態碼。【IE7】 | 值 | 狀態 | 描述 | | --- | --- |--- | | 0 | UNSENT | XMLHttpRequest 代理已被創建，但尚未調用 open() 方法 | | 1 | OPENED | open() 方法已經被觸發。在這個狀態中，可以通過 setRequestHeader() 方法來設置請求的頭部，可以調用 send() 方法來發起請求 | | 2 | HEADERS\_RECEIVED | send() 方法已經被調用，響應頭也已經被接收 | | 3 | LOADING | 響應體部分正在被接收。如果 responseType 屬性是“text”或空字符串， responseText 將會在載入的過程中擁有部分響應數據 | | 4 | DONE | 請求操作已經完成。這意味著數據傳輸已經徹底完成或失敗 | >[danger]在IE中，狀態有著不同的名稱，并不是 `UNSENT`，`OPENED`，`HEADERS_RECEIVED`，`LOADING` 和 `DONE` , 而是 `READYSTATE_UNINITIALIZED`(0)，`READYSTATE_LOADING`(1) ，`READYSTATE_LOADED`(2) ，`READYSTATE_INTERACTIVE`(3)` 和 READYSTATE_COMPLETE`(4) 。 **response** 只讀,返回一個 ArrayBuffer、Blob、Document，或 DOMString，具體是哪種類型取決于 XMLHttpRequest.responseType 的值。其中包含整個響應實體（response entity body）。【IE10】 **responseText** 只讀,返回一個 DOMString，該 DOMString 包含對請求的響應，如果請求未成功或尚未發送，則返回 null。【IE5 IE10之前只有請求完成才來接受的到】 **responseType** 一個用于定義響應類型的枚舉值（enumerated value）。【IE10】 **responseURL** 只讀,返回經過序列化（serialized）的響應 URL，如果該 URL 為空，則返回空字符串。【IE不支持】 **responseXML** 只讀,返回一個 Document，其中包含該請求的響應，如果請求未成功、尚未發送或時不能被解析為 XML 或 HTML，則返回 null。【任何版本IE都支持？】 **status** 只讀,返回一個無符號短整型（unsigned short）數字，代表請求的響應狀態。【IE7】ie5/6用ActiveXObject()代替 **statusText** 只讀,返回一個 DOMString，其中包含 HTTP 服務器返回的響應狀態。與 XMLHTTPRequest.status 不同的是，它包含完整的響應狀態文本（例如，"200 OK"）。【IE7】ie5/6用ActiveXObject()代替 **timeout** 一個無符號長整型（unsigned long）數字，表示該請求的最大請求時間（毫秒），若超出該時間，請求會自動終止。【IE10】 **ontimeout** 當請求超時調用的 EventHandler。 **upload** 只讀,XMLHttpRequestUpload，代表上傳進度。【IE10】 **withCredentials** 一個布爾值，用來指定跨域 Access-Control 請求是否應當帶有授權信息，如 cookie 或授權 header 頭。非標準屬性【10】 **channel** 只讀,一個 nsIChannel，對象在執行請求時使用的通道。 **mozAnon** 只讀,一個布爾值，如果為真，請求將在沒有 cookie 和身份驗證 header 頭的情況下發送。 **mozSystem** 只讀,一個布爾值，如果為真，則在請求時不會強制執行同源策略。 XMLHttpRequest.mozBackgroundRequest 一個布爾值，它指示對象是否是后臺服務器端的請求。 ## **方法** **XMLHttpRequest.abort()** 如果請求已被發出，則立刻中止請求。 XMLHttpRequest.getAllResponseHeaders() 以字符串的形式返回所有用 CRLF 分隔的響應頭，如果沒有收到響應，則返回 null。【IE5】 **XMLHttpRequest.getResponseHeader()** 返回包含指定響應頭的字符串，如果響應尚未收到或響應中不存在該報頭，則返回 null。【IE5】 **XMLHttpRequest.<span style="color:blue">open</span>()** 初始化一個請求。該方法只能在 JavaScript 代碼中使用，若要在 native code 中初始化請求，請使用 openRequest()。【IE5】 **XMLHttpRequest.overrideMimeType()** 覆寫由服務器返回的 MIME 類型。【IE11】 **XMLHttpRequest.<span style="color:blue">send</span>()** 發送請求。如果請求是異步的（默認），那么該方法將在請求發送后立即返回。【IE5】 **XMLHttpRequest.setRequestHeader()** 設置 HTTP 請求頭的值。必須在 open() 之后、send() 之前調用 setRequestHeader() 方法。【IE5】 ## **事件** **abort** 當 request 被停止時觸發，例如當程序調用 XMLHttpRequest.abort() 時。也可以使用 onabort 屬性。【IE5】 **error** 當 request 遭遇錯誤時觸發。也可以使用 onerror 屬性【IE 10】 **load** XMLHttpRequest請求成功完成時觸發。也可以使用 onload 屬性.【IE9】 **loadend** 當請求結束時觸發, 無論請求成功 ( load) 還是失敗 (abort 或 error)。也可以使用 onloadend 屬性。【IE10】 **loadstart** 接收到響應數據時觸發。也可以使用 onloadstart 屬性。【IE10】 **progress** 當請求接收到更多數據時，周期性地觸發。也可以使用 onprogress 屬性【IE10】 **timeout** 在預設時間內沒有接收到響應時觸發。也可以使用 ontimeout 屬性。【IE8】 ~~~javascript var method = 'GET'; var url = 'https://developer.mozilla.org/'; var xmlhttp = new XMLHttpRequest(); xmlhttp.open(method, url, true); xmlhttp.onabort = function () { console.log('請求被中止'); }; // 請求出錯回調函數 xmlhttp.onerror = function () { console.log("An error occurred during the transaction"); }; // 請求成功回調函數 xmlhttp.onload = function () { // 處理取回的數據(在 xmlhttp.response 中找到) }; // 請求開始回調函數 xmlhttp.onloadstart = function () { console.log("Download underway"); }; /* 也可以這樣監聽： xhr.addEventListener('loadstart', e => { _s.beforeSend(xhr); }); */ xmlhttp.onprogress = function (event) { event.loaded;//?已傳輸的數據量 event.total;//總共的數據量 }; // 請求超時 xhr.timeout = 10; // 設置超時時間,0表示永不超時 xmlhttp.ontimeout= function () { console.log(""); }; // 請求結束 xmlhttp.onloadend= function () { console.log(""); }; // 設置期望的返回數據類型 'json' 'text' 'document' ... xhr.responseType = ''; // 設置請求頭 xhr.setRequestHeader('', ''); xmlhttp.send(); xmlhttp.abort(); // 這將會調用我們上面定義的 onabort 回調函數 ~~~ ``` var xhr=new XMLHttpRequest(); xhr.open("GET","https://api.apiopen.top/getJoke"); xhr.send(); //綁定事件，處理響應結果 xhr.onreadystatechange=function(){ if(xhr.readyState==4){ if(xhr.status>=200 && xhr.status<300){ console.log(xhr.response) console.log(xhr.responseText) console.log(xhr.responseXML) } } } ``` ``` var url="www.baidu.com"; var xmlhttp=null; if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest(); }else if (window.ActiveXObject){ // code for IE5 and IE6 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } if (xmlhttp!=null){ xmlhttp.onreadystatechange=state_Change; xmlhttp.open("GET",url,true); xmlhttp.send(null); }else{ alert("瀏覽器不支持XMLHTTP."); } function state_Change() { if (xmlhttp.readyState==4){ // 4 = "loaded" if (xmlhttp.status==200){// 200 = OK // ...our code here... }else{ alert("Problem retrieving XML data"); } } } ``` 以上搞懂了我們就來仿照jquery封裝ajax [https://www.jianshu.com/p/918c63045bc3/](https://www.jianshu.com/p/918c63045bc3/)