1. XMLHttpRequest對(duì)象
現(xiàn)代瀏覽器，最開始與服務(wù)器交換數(shù)據(jù)，都是通過XMLHttpRequest對(duì)象。它可以使用JSON、XML、HTML和text文本等格式發(fā)送和接收數(shù)據(jù)。
if (window.XMLHttpRequest) { // model browser
xhr = new XMLHttpRequest()
} else if (window.ActiveXObject) { // IE 6 and older
xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
xhr.open('POST', url, true)
xhr.send(data)
xhr.onreadystatechange = function () {
try {
// 處理響應(yīng)
if (xhr.readyState === 4) {
// 請(qǐng)求正常
if (xhr.status === 200) {
// 處理響應(yīng)
} else {
// 請(qǐng)求遇到一些問題，處理異常
}
} else {
// 還處于未準(zhǔn)備好的狀態(tài)
}
} catch (e) {
// 通信錯(cuò)誤的事件中（例如服務(wù)器宕機(jī)）
alert('Caught Exception: ' + e.description)
}
}
優(yōu)點(diǎn)：
不重新加載頁(yè)面的情況下更新網(wǎng)頁(yè)
在頁(yè)面已加載后從服務(wù)器請(qǐng)求/接收數(shù)據(jù)
在后臺(tái)向服務(wù)器發(fā)送數(shù)據(jù)。
缺點(diǎn)：
使用起來也比較繁瑣，需要設(shè)置很多值。
早期的IE瀏覽器有自己的實(shí)現(xiàn)，這樣需要寫兼容代碼。
2. jQuery ajax
為了更快捷的操作 DOM，并且規(guī)避一些瀏覽器兼容問題，產(chǎn)生了jQuery。它里面的AJAX請(qǐng)求也兼容了各瀏覽器，可以有簡(jiǎn)單易用的方法.post。簡(jiǎn)單點(diǎn)說，就是對(duì)XMLHttpRequest對(duì)象的封裝。
$.ajax({
type: 'POST',
url: url,
data: data,
dataType: dataType,
success: function () {},
error: function () {}
})
優(yōu)點(diǎn)：
對(duì)原生XHR的封裝，做了兼容處理，簡(jiǎn)化了使用。
增加了對(duì)JSONP的支持，可以簡(jiǎn)單處理部分跨域。
缺點(diǎn)：
如果有多個(gè)請(qǐng)求，并且有依賴關(guān)系的話，容易形成回調(diào)地獄。
本身是針對(duì)MVC的編程，不符合現(xiàn)在前端MVVM的浪潮。
ajax是jQuery中的一個(gè)方法。如果只是要使用ajax卻要引入整個(gè)jQuery非常的不合理。
3. fetch
Fetch API提供了一個(gè) JavaScript 接口，用于訪問和操作HTTP管道的部分，例如請(qǐng)求和響應(yīng)。它還提供了一個(gè)全局 fetch() 方法，該方法提供了一種簡(jiǎn)單，合理的方式來跨網(wǎng)絡(luò)異步獲取資源。
fetch 是底層API，代替XHR，可以輕松處理各種格式，非文本化格式?？梢院苋菀椎谋黄渌夹g(shù)使用，例如Service Workers。但是想要很好的使用fetch，需要做一些封裝處理。
fetch('http://example.com/movies.json')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
優(yōu)點(diǎn)：跨域的處理
在配置中，添加mode： 'no-cors'就可以跨域了
fetch('/users.json', {
method: 'post',
mode: 'no-cors',
data: {}
}).then(function() { /* handle response */ });
缺點(diǎn)：
fetch只對(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)求過程繼續(xù)在后臺(tái)運(yùn)行，造成了流量的浪費(fèi)。
fetch沒有辦法原生監(jiān)測(cè)請(qǐng)求的進(jìn)度，而XHR可以。
請(qǐng)注意，fetch規(guī)范與jQuery.ajax()主要有三點(diǎn)不同，牢記：
當(dāng)接收到一個(gè)代表錯(cuò)誤的 HTTP 狀態(tài)碼時(shí)，從 fetch()返回的 Promise 不會(huì)被標(biāo)記為 reject， 即使該 HTTP 響應(yīng)的狀態(tài)碼是 404或 500。相反，它會(huì)將 Promise 狀態(tài)標(biāo)記為 resolve （但是會(huì)將 resolve 的返回值的 ok 屬性設(shè)置為 false ），僅當(dāng)網(wǎng)絡(luò)故障時(shí)或請(qǐng)求被阻止時(shí)，才會(huì)標(biāo)記為 reject。
fetch() 不會(huì)接受跨域 cookies；你也不能使用fetch() 建立起跨域會(huì)話。其他網(wǎng)站的Set-Cookie頭部字段將會(huì)被無視。
fetch 不會(huì)發(fā)送 cookies。除非你使用了credentials的 初始化選項(xiàng)。（自2017年8月25日以后，默認(rèn)的credentials策略變更為same-origin。Firefox也在61.0b13版本中，對(duì)默認(rèn)值進(jìn)行修改）
4. axios
axios 是一個(gè)基于 promise 的HTTP庫(kù)，可以用在瀏覽器和 node.js 中。它本質(zhì)也是對(duì)原生 XMLHttpRequest 的封裝，只不過它是 Promise 的實(shí)現(xiàn)版本，符合最新的ES規(guī)范。
// 全局調(diào)用
axios({
method:'get',
url:'https://www.api.com/api/xxx',
field: 123
}) // axios(config)
axios('http://bit.ly/2mTM3nY', {field: 123}) // axios(url[, config])
axios.get('http://bit.ly/2mTM3nY', {field: 123}) // axios.[METHODS](url, config)
// 自定義實(shí)例調(diào)用
const instance = axios.create({
baseURL: 'https://www.api.com/api/xxx'
});
instance({
method:'get',
url:'2mTM3nY',
field: 123
}) // instance(config)
instance.get('2mTM3nY', {field: 123}) // instance.[METHODS](url, config)
//官方的并發(fā)案例:
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(),getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// Both requests are now complete
}));
axios是尤雨溪大神推薦使用的,
優(yōu)點(diǎn)：
從瀏覽器中創(chuàng)建XMLHttpRequests
可在 node.js 中使用
支持 Promise API
提供了并發(fā)請(qǐng)求的接口
攔截請(qǐng)求和響應(yīng)
轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)
取消請(qǐng)求
自動(dòng)轉(zhuǎn)換 JSON 數(shù)據(jù)
客戶端支持防御 XSRF
缺點(diǎn)：
只支持現(xiàn)代瀏覽器.
(網(wǎng)絡(luò)資源整理而來)
