axios和ajax的區(qū)別：1、axios是一個(gè)基于Promise的HTTP庫(kù)，而ajax是對(duì)原生XHR的封裝；2、ajax技術(shù)實(shí)現(xiàn)了局部數(shù)據(jù)的刷新，而axios實(shí)現(xiàn)了對(duì)ajax的封裝。

本文操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。

axios和ajax的區(qū)別是什么?

axios和ajax的區(qū)別及優(yōu)缺點(diǎn):

ajax：

1、什么是ajax

　　Ajax是對(duì)原生XHR的封裝，為了達(dá)到我們跨越的目的，增添了對(duì)JSONP的支持。

　　異步的javascript和xml，ajax不是一門新技術(shù)，而是多種技術(shù)的組合，用于快速的創(chuàng)建動(dòng)態(tài)頁(yè)面，能夠?qū)崿F(xiàn)無(wú)刷新更新數(shù)據(jù)從而提高用戶體驗(yàn)。

2、ajax的原理？

　　由客戶端請(qǐng)求ajax引擎，再由ajax引擎請(qǐng)求服務(wù)器，服務(wù)器作出一系列響應(yīng)之后返回給ajax引擎，由ajax引擎決定將這個(gè)結(jié)果寫入到客戶端的什么位置。實(shí)現(xiàn)頁(yè)面無(wú)刷新更新數(shù)據(jù)。

3、核心對(duì)象？

　　XMLHttpReques

4、ajax優(yōu)缺點(diǎn)？

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

　　　　1、　無(wú)刷新更新數(shù)據(jù)

　　　　2、異步與服務(wù)器通信

　　　　3、前端和后端負(fù)載平衡

　　　　4、基于標(biāo)準(zhǔn)被廣泛支持

　　　　5、界面與應(yīng)用分離

　　缺點(diǎn)：

　　　　1、ajax不能使用Back和history功能，即對(duì)瀏覽器機(jī)制的破壞。

　　　　2、安全問(wèn)題 ajax暴露了與服務(wù)器交互的細(xì)節(jié)

　　　　3、對(duì)收索引擎的支持比較弱

　　　　4、破壞程序的異常處理機(jī)制

　　　　5、違背URL和資源定位的初衷

　　　　6、ajax不能很好的支持移動(dòng)設(shè)備

　　　　7、太多客戶端代碼造成開(kāi)發(fā)上的成本

5、Ajax適用場(chǎng)景
　　<1>.表單驅(qū)動(dòng)的交互
　　<2>.深層次的樹(shù)的導(dǎo)航
　　<3>.快速的用戶與用戶間的交流響應(yīng)
　　<4>.類似投票、yes/no等無(wú)關(guān)痛癢的場(chǎng)景
　　<5>.對(duì)數(shù)據(jù)進(jìn)行過(guò)濾和操縱相關(guān)數(shù)據(jù)的場(chǎng)景
　　<6>.普通的文本輸入提示和自動(dòng)完成的場(chǎng)景
6、Ajax不適用場(chǎng)景
　　<1>.部分簡(jiǎn)單的表單
　　<2>.搜索
　　<3>.基本的導(dǎo)航
　　<4>.替換大量的文本
　　<5>.對(duì)呈現(xiàn)的操縱

7、代碼

$.ajax({   type: 'POST',   url: url,   data: data,   dataType: dataType,   success: function () {},   error: function () {} });

8、ajax請(qǐng)求的五個(gè)步驟

　　1. 創(chuàng)建XMLHttpRequest異步對(duì)象

　　2. 設(shè)置回調(diào)函數(shù)

　　3. 使用open方法與服務(wù)器建立連接

　　4. 向服務(wù)器發(fā)送數(shù)據(jù)

　　5. 在回調(diào)函數(shù)中針對(duì)不同的響應(yīng)狀態(tài)進(jìn)行處理

axios：

1、axios是什么

Axios 是一個(gè)基于 Promise 的 HTTP 庫(kù)，可以用在瀏覽器和 node.js 中。

2、axios有那些特性？

　　1、在瀏覽器中創(chuàng)建 XMLHttpRequests

　　2、在node.js則創(chuàng)建http請(qǐng)求

　　3、支持Promise API

　　4、支持?jǐn)r截請(qǐng)求和響應(yīng)

　　5、轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)

　　6、取消請(qǐng)求

　　7、自動(dòng)轉(zhuǎn)換成JSON數(shù)據(jù)格式

　　8、客戶端支持防御XSRF

3、執(zhí)行g(shù)et請(qǐng)求，有兩種方式

// 第一種方式  將參數(shù)直接寫在url中axios.get('/getMainInfo?id=123') .then((res) => {   console.log(res) }) .catch((err) => {   console.log(err) })// 第二種方式  將參數(shù)直接寫在params中axios.get('/getMainInfo', {  params: {     id: 123   } }) .then((res) => {   console.log(res) }) .catch((err) => {   console.log(err) })

4、執(zhí)行post請(qǐng)求，注意執(zhí)行post請(qǐng)求的入?yún)ⅲ恍枰獙懺趐arams字段中，這個(gè)地方要注意與get請(qǐng)求的第二種方式進(jìn)行區(qū)別。

axios.post('/getMainInfo', {   id: 123}) .then((res) => {   console.log(res) }) .catch((err) => {   console.log(err) })

axios和ajax的區(qū)別：

axios是通過(guò)Promise實(shí)現(xiàn)對(duì)ajax技術(shù)的一種封裝，就像jquery對(duì)ajax的封裝一樣，簡(jiǎn)單來(lái)說(shuō)就是ajax技術(shù)實(shí)現(xiàn)了局部數(shù)據(jù)的刷新，axios實(shí)現(xiàn)了對(duì)ajax的封裝，axios有的ajax都有，ajax有的axios不一定有，總結(jié)一句話就是axios是ajax，ajax不止axios。

注： 傳統(tǒng)Ajax 指的是 XMLHttpRequest（XHR），
　　axios和jQuer ajax都是對(duì)Ajax的封裝

推薦學(xué)習(xí)：《ajax視頻教程》