AJAX原理以及axios、fetch區(qū)別實(shí)例詳解
ajax原理
- ajax的原理簡單來說是在用戶和服務(wù)器之間加了—個(gè)中間層(ajax引擎)，通過xmlhttprequest對象來向服務(wù)器發(fā)異步請求，從服務(wù)器獲得數(shù)據(jù)，然后用javascript來操作dom而更新頁面。使用戶操作與服務(wù)器響應(yīng)異步化。
- ajax的過程只涉及javascript、xmlhttprequest和dom。xmlhttprequest是ajax的核心機(jī)制
xmlhttprequest（xhr）對象用于與服務(wù)器交互。通過 xmlhttprequest 可以在不刷新頁面的情況下請求特定 url，獲取數(shù)據(jù)。這允許網(wǎng)頁在不影響用戶操作的情況下，更新頁面的局部內(nèi)容。xmlhttprequest 可以用于獲取任何類型的數(shù)據(jù)，而不僅僅是 xml。甚至支持 http以外的協(xié)議（包括 file:// 和 ftp），盡管可能受到更多出于安全等原因的限制。
/** 1. 創(chuàng)建ajax對象 **/
var xhr = window.xmlhttprequest?new xmlhttprequest():new activexobject('microsoft.xmlhttp');// 兼容ie6及以下版本
/** 2. 配置 ajax請求 **/
xhr.open('get', url, true)
/** 3. 發(fā)送請求 **/
xhr.send(null); // 嚴(yán)謹(jǐn)寫法
/** 4. 監(jiān)聽請求，接受響應(yīng) **/
xhr.onreadystatechange = function(){
if(xhr.readystate == 4){
if(xhr.status == 200){
success(xhr.responsetext);
} else {
/** false **/
fail && fail(xhr.status);
}
}
}onreadystatechange：當(dāng) readystate 屬性發(fā)生變化時(shí)，調(diào)用的事件處理函數(shù)
readystate：
值 狀態(tài) 描述 0 unsent 代理被創(chuàng)建，但尚未調(diào)用 open() 方法。 1 opened open() 方法已經(jīng)被調(diào)用。 2 headers_received send() 方法已經(jīng)被調(diào)用，并且頭部和狀態(tài)已經(jīng)可獲得。 3 loading 下載中； responsetext 屬性已經(jīng)包含部分?jǐn)?shù)據(jù)。 4 done 下載操作已完成。 response：返回的包含整個(gè)響應(yīng)實(shí)體
responsetext：返回一個(gè)domstring，該 domstring 包含對請求的響應(yīng)，如果請求未成功或尚未發(fā)送，則返回 null。
responsetype：一個(gè)用于定義響應(yīng)類型的枚舉值（enumerated value）。
類型 解釋 “ ” 空的 responsetype 字符串與默認(rèn)類型 "text" 相同。 "arraybuffer" response 是一個(gè)包含二進(jìn)制數(shù)據(jù)的 javascript arraybuffer。 "blob" response 是一個(gè)包含二進(jìn)制數(shù)據(jù)的 blob 對象。 "document" response 是一個(gè) htmldocument或xmldocument "json" response是通過將接收到的數(shù)據(jù)內(nèi)容解析為json的js對象 "text" response 是 domstring 對象中的文本。 "ms-stream" response是流式下載的一部分；此響應(yīng)類型僅允許用于下載請求，并且僅受 internet explorer 支持。 status：返回一個(gè)無符號短整型（unsigned short）數(shù)字，代表請求的響應(yīng)狀態(tài)。
var xhr = new xmlhttprequest(); 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（已打開） 0 * loading（載入中） 200 * done（完成） 200 */withcredentials：一個(gè)布爾值，用來指定跨域 access-control 請求是否應(yīng)當(dāng)帶有授權(quán)信息，如 cookie 或授權(quán) header 頭。
xhr.withcredentials=trueupload：代表上傳進(jìn)度
ajax 有那些優(yōu)缺點(diǎn)?
優(yōu)點(diǎn)：
- 通過異步模式，提升了用戶體驗(yàn).
- 優(yōu)化了瀏覽器和服務(wù)器之間的傳輸，減少不必要的數(shù)據(jù)往返，減少了帶寬占用.
- ajax在客戶端運(yùn)行，承擔(dān)了一部分本來由服務(wù)器承擔(dān)的工作，減少了大用戶量下的服務(wù)器負(fù)載。
- ajax可以實(shí)現(xiàn)動態(tài)不刷新（局部刷新）
缺點(diǎn)：
- 安全問題 ajax暴露了與服務(wù)器交互的細(xì)節(jié)。
- 對搜索引擎的支持比較弱。
- 不容易調(diào)試。
promise封裝ajax
promise 封裝實(shí)現(xiàn)：
// promise 封裝實(shí)現(xiàn)：
function getjson(url) {
// 創(chuàng)建一個(gè) promise 對象
let promise = new promise(function(resolve, reject) {
let xhr = new xmlhttprequest();
// 新建一個(gè) http 請求
xhr.open("get", url, true);
// 設(shè)置狀態(tài)的監(jiān)聽函數(shù)
xhr.onreadystatechange = function() {
if (this.readystate !== 4) return;
// 當(dāng)請求成功或失敗時(shí)，改變 promise 的狀態(tài)
if (this.status === 200) {
resolve(this.response);
} else {
reject(new error(this.statustext));
}
};
// 設(shè)置錯(cuò)誤監(jiān)聽函數(shù)
xhr.onerror = function() {
reject(new error(this.statustext));
};
// 設(shè)置響應(yīng)的數(shù)據(jù)類型
xhr.responsetype = "json";
// 設(shè)置請求頭信息
xhr.setrequestheader("accept", "application/json");
// 發(fā)送 http 請求
xhr.send(null);
});
return promise;
}jq ajax、axios、fetch的核心區(qū)別
jquery ajax
ajax前后端數(shù)據(jù)通信「同源、跨域」
// 用戶登錄 -> 登錄成功 -> 獲取用戶信息
/* 回調(diào)地獄 */
$.ajax({
url: 'http://127.0.0.1:8888/user/login',
method: 'post',
data: qs.stringify({
account: '18310612838',
password: md5('1234567890')
}),
success(result) {
if (result.code === 0) {
// 登錄成功
$.ajax({
url: 'http://127.0.0.1:8888/user/list',
method: 'get',
success(result) {
console.log(result);
}
});
}
}
});優(yōu)缺點(diǎn)：
- 本身是針對mvc的編程,不符合現(xiàn)在前端mvvm的浪潮
- 基于原生的xhr開發(fā)，xhr本身的架構(gòu)不清晰，已經(jīng)有了fetch的替代方案
- jquery整個(gè)項(xiàng)目太大，單純使用ajax卻要引入整個(gè)jquery非常的不合理（采取個(gè)性化打包的方案又不能享受cdn服務(wù)）
axios
axios也是對ajax的封裝，基于promise管理請求，解決回調(diào)地獄問題
axios({
method: 'post',
url: '/user/login',
data: {
username: 'name',
password: 'password'
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 或使用 async await
(async function () {
let result1 = await axios.post('/user/login', {
username: 'name',
password: 'password'
});
let result2 = await axios.get('/user/list');
console.log(result1, result2);
})(); 優(yōu)缺點(diǎn)：
- 從瀏覽器中創(chuàng)建 xmlhttprequest
- 從 node.js 發(fā)出 http 請求
- 支持 promise api
- 攔截請求和響應(yīng)
- 轉(zhuǎn)換請求和響應(yīng)數(shù)據(jù)
- 取消請求
- 自動轉(zhuǎn)換json數(shù)據(jù)
- 客戶端支持防止csrf/xsrf
fetch
fetch是es6新增的通信方法，不是ajax，但是他本身實(shí)現(xiàn)數(shù)據(jù)通信，就是基于promise管理的
try {
let response = await fetch(url, options);
let data = response.json();
console.log(data);
} catch(e) {
console.log("oops, error", e);
}示例：
(async function () {
let result = await fetch('http://127.0.0.1:8888/user/login', {
method: 'post',
headers: {
'content-type': 'application/x-www-form-urlencoded'
},
body: qs.stringify({
name: 'name',
password: 'password'
})
})
let data = result.json();
console.log(data)
?
let result2 = await fetch('http://127.0.0.1:8888/user/list').then(response => {
return response.json();
});
console.log(result2);
})(); 優(yōu)缺點(diǎn)：
- fetcht只對網(wǎng)絡(luò)請求報(bào)錯(cuò)，對400，500都當(dāng)做成功的請求，需要封裝去處理
- fetch默認(rèn)不會帶cookie，需要添加配置項(xiàng)
- fetch不支持abort，不支持超時(shí)控制，使用settimeout及promise.reject的實(shí)現(xiàn)的超時(shí)控制并不能阻止請求過程繼續(xù)在后臺運(yùn)行，造成了量的浪費(fèi)
- fetch沒有辦法原生監(jiān)測請求的進(jìn)度，而xhr可以
補(bǔ)充：為什么要用axios?
axios 是一個(gè)基于promise 用于瀏覽器和 nodejs 的 http 客戶端，它本身具有以下特征：
- 從瀏覽器中創(chuàng)建 xmlhttprequest
- 從 node.js 發(fā)出 http 請求
- 支持 promise api
- 攔截請求和響應(yīng)
- 轉(zhuǎn)換請求和響應(yīng)數(shù)據(jù)
- 取消請求
- 自動轉(zhuǎn)換json數(shù)據(jù)
- 客戶端支持防止csrf/xsrf
- axios既提供了并發(fā)的封裝，也沒有fetch的各種問題，而且體積也較小，當(dāng)之無愧現(xiàn)在最應(yīng)該選用的請求的方式。
三選一絕必是axios了。其流程圖如下：
總結(jié)
到此這篇關(guān)于ajax原理以及axios、fetch區(qū)別的文章就介紹到這了,更多相關(guān)ajax原理 axios、fetch區(qū)別內(nèi)容請搜索碩編程以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持碩編程！
學(xué)習(xí)AJAX