AJAX原理以及axios、fetch區(qū)別實(shí)例詳解

第AJAX原理以及axios、fetch區(qū)別實(shí)例詳解目錄AJAX原理Promise封裝AjaxJQAjax、Axios、Fetch的核心區(qū)別JQueryAjaxAxiosFetch補(bǔ)充：為什么要用axios總結(jié)

AJAX原理

Ajax的原理簡(jiǎn)單來(lái)說(shuō)是在用戶和服務(wù)器之間加了個(gè)中間層(AJAX引擎)，通過(guò)XmlHttpRequest對(duì)象來(lái)向服務(wù)器發(fā)異步請(qǐng)求，從服務(wù)器獲得數(shù)據(jù)，然后用javascript來(lái)操作DOM而更新頁(yè)面。使用戶操作與服務(wù)器響應(yīng)異步化。Ajax的過(guò)程只涉及JavaScript、XMLHttpRequest和DOM。XMLHttpRequest是ajax的核心機(jī)制

XMLHttpRequest（XHR）對(duì)象用于與服務(wù)器交互。通過(guò)XMLHttpRequest可以在不刷新頁(yè)面的情況下請(qǐng)求特定URL，獲取數(shù)據(jù)。這允許網(wǎng)頁(yè)在不影響用戶操作的情況下，更新頁(yè)面的局部?jī)?nèi)容。XMLHttpRequest可以用于獲取任何類型的數(shù)據(jù)，而不僅僅是XML。甚至支持HTTP以外的協(xié)議（包括file://和FTP），盡管可能受到更多出于安全等原因的限制。

/**1.創(chuàng)建Ajax對(duì)象**/

varxhr=window.XMLHttpRequestnewXMLHttpRequest():newActiveXObject('Microsoft.XMLHTTP');//兼容IE6及以下版本

/**2.配置Ajax請(qǐng)求**/

xhr.open('get',url,true)

/**3.發(fā)送請(qǐng)求**/

xhr.send(null);//嚴(yán)謹(jǐn)寫法

/**4.監(jiān)聽(tīng)請(qǐng)求，接受響應(yīng)**/

xhr.onreadystatechange=function(){

if(xhr.readyState==4){

if(xhr.status==200){

success(xhr.responseText);

}else{

/**false**/

failfail(xhr.status);

}

onreadystatechange：當(dāng)readyState屬性發(fā)生變化時(shí)，調(diào)用的事件處理函數(shù)

readyState：

值狀態(tài)描述0UNSENT代理被創(chuàng)建，但尚未調(diào)用open()方法。1OPENEDopen()方法已經(jīng)被調(diào)用。2HEADERS_RECEIVEDsend()方法已經(jīng)被調(diào)用，并且頭部和狀態(tài)已經(jīng)可獲得。3LOADING下載中；responseText屬性已經(jīng)包含部分?jǐn)?shù)據(jù)。4DONE下載操作已完成。response：返回的包含整個(gè)響應(yīng)實(shí)體

responseText：返回一個(gè)DOMString，該DOMString包含對(duì)請(qǐng)求的響應(yīng)，如果請(qǐng)求未成功或尚未發(fā)送，則返回null。

responseType：一個(gè)用于定義響應(yīng)類型的枚舉值（enumeratedvalue）。

類型解釋空的responseType字符串與默認(rèn)類型text相同。arraybufferresponse是一個(gè)包含二進(jìn)制數(shù)據(jù)的JavaScriptArrayBuffer。blobresponse是一個(gè)包含二進(jìn)制數(shù)據(jù)的Blob對(duì)象。documentresponse是一個(gè)HTMLDocument或XMLDocumentjsonresponse是通過(guò)將接收到的數(shù)據(jù)內(nèi)容解析為JSON的JS對(duì)象textresponse是DOMString對(duì)象中的文本。ms-streamresponse是流式下載的一部分；此響應(yīng)類型僅允許用于下載請(qǐng)求，并且僅受InternetExplorer支持。status：返回一個(gè)無(wú)符號(hào)短整型（unsignedshort）數(shù)字，代表請(qǐng)求的響應(yīng)狀態(tài)。

varxhr=newXMLHttpRequest();

console.log('UNSENT',xhr.status);

xhr.open('GET','/server',true);

console.log('OPENED',xhr.status);

xhr.onprogress=function(){

console.log('LOADING',xhr.status);

xhr.onload=function(){

console.log('DONE',xhr.status);

xhr.send(null);

*輸出如下：

*UNSENT（未發(fā)送）0

*OPENED（已打開(kāi)）0

*LOADING（載入中）200

*DONE（完成）200

*/withCredentials：一個(gè)布爾值，用來(lái)指定跨域Access-Control請(qǐng)求是否應(yīng)當(dāng)帶有授權(quán)信息，如cookie或授權(quán)header頭。xhr.withCredentials=true

upload：代表上傳進(jìn)度

其他更多XMLHttpRequest相關(guān)api

ajax有那些優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：

通過(guò)異步模式，提升了用戶體驗(yàn).優(yōu)化了瀏覽器和服務(wù)器之間的傳輸，減少不必要的數(shù)據(jù)往返，減少了帶寬占用.Ajax在客戶端運(yùn)行，承擔(dān)了一部分本來(lái)由服務(wù)器承擔(dān)的工作，減少了大用戶量下的服務(wù)器負(fù)載。Ajax可以實(shí)現(xiàn)動(dòng)態(tài)不刷新（局部刷新）缺點(diǎn)：

安全問(wèn)題AJAX暴露了與服務(wù)器交互的細(xì)節(jié)。對(duì)搜索引擎的支持比較弱。不容易調(diào)試。

Promise封裝Ajax

promise封裝實(shí)現(xiàn)：

//promise封裝實(shí)現(xiàn)：

functiongetJSON(url){

//創(chuàng)建一個(gè)promise對(duì)象

letpromise=newPromise(function(resolve,reject){

letxhr=newXMLHttpRequest();

//新建一個(gè)http請(qǐng)求

xhr.open("GET",url,true);

//設(shè)置狀態(tài)的監(jiān)聽(tīng)函數(shù)

xhr.onreadystatechange=function(){

if(this.readyState!==4)return;

//當(dāng)請(qǐng)求成功或失敗時(shí)，改變promise的狀態(tài)

if(this.status===200){

resolve(this.response);

}else{

reject(newError(this.statusText));

//設(shè)置錯(cuò)誤監(jiān)聽(tīng)函數(shù)

xhr.onerror=function(){

reject(newError(this.statusText));

//設(shè)置響應(yīng)的數(shù)據(jù)類型

xhr.responseType="json";

//設(shè)置請(qǐng)求頭信息

xhr.setRequestHeader("Accept","application/json");

//發(fā)送http請(qǐng)求

xhr.send(null);

returnpromise;

}

JQAjax、Axios、Fetch的核心區(qū)別

JQueryAjax

Ajax前后端數(shù)據(jù)通信「同源、跨域」

//用戶登錄-登錄成功-獲取用戶信息

/*回調(diào)地獄*/

$.ajax({

url:':8888/user/login',

method:'post',

data:Qs.stringify({

account:,

password:md5('1234567890')

success(result){

if(result.code===0){

//登錄成功

$.ajax({

url:':8888/user/list',

method:'get',

success(result){

console.log(result);

});

優(yōu)缺點(diǎn)：

本身是針對(duì)MVC的編程,不符合現(xiàn)在前端MVVM的浪潮基于原生的XHR開(kāi)發(fā)，XHR本身的架構(gòu)不清晰，已經(jīng)有了fetch的替代方案JQuery整個(gè)項(xiàng)目太大，單純使用ajax卻要引入整個(gè)JQuery非常的不合理（采取個(gè)性化打包的方案又不能享受CDN服務(wù)）

Axios

Axios也是對(duì)ajax的封裝，基于Promise管理請(qǐng)求，解決回調(diào)地獄問(wèn)題

axios({

method:'post',

url:'/user/login',

data:{

username:'name',

password:'password'

.then(function(response){

console.log(response);

.catch(function(error){

console.log(error);

//或使用asyncawait

(asyncfunction(){

letresult1=awaitaxios.post('/user/login',{

username:'name',

password:'password'

letresult2=awaitaxios.get('/user/list');

console.log(result1,result2);

})();

優(yōu)缺點(diǎn)：

從瀏覽器中創(chuàng)建XMLHttpRequest從node.js發(fā)出http請(qǐng)求支持PromiseAPI攔截請(qǐng)求和響應(yīng)轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)取消請(qǐng)求自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)客戶端支持防止CSRF/XSRF

Fetch

Fetch是ES6新增的通信方法，不是ajax，但是他本身實(shí)現(xiàn)數(shù)據(jù)通信，就是基于promise管理的

try{

letresponse=awaitfetch(url,options);

letdata=response.json();

console.log(data);

}catch(e){

console.log("Oops,error",e);

}

示例：

(asyncfunction(){

letresult=awaitfetch(':8888/user/login',{

method:'post',

headers:{

'Content-Type':'application/x-www-form-urlencoded'

body:Qs.stringify({

name:'name',

password:'password'

letdata=result.json();

console.log(data)

letresult2=awaitfetch(':8888/user/list').then(response={

returnresponse.json();

console.log(result2);

})();

優(yōu)缺點(diǎn)：

fetcht只對(duì)網(wǎng)絡(luò)請(qǐng)求報(bào)錯(cuò)，對(duì)400，500都當(dāng)做成功的請(qǐng)求，需要封裝去處理fetch默認(rèn)不會(huì)帶cookie，需要添加配置項(xiàng)fetch不支持abort，不支持超時(shí)控制，使用setTimeout及Promise.reject的實(shí)現(xiàn)的超時(shí)控制并不能阻止請(qǐng)求過(guò)程繼續(xù)在后臺(tái)運(yùn)行，造成了量的浪費(fèi)fetch沒(méi)有辦法原生監(jiān)測(cè)請(qǐng)求的進(jìn)度，而XHR可以

補(bǔ)充