jquery中axios和ajax的區(qū)別：1、axios是通過(guò)promise實(shí)現(xiàn)對(duì)ajax技術(shù)的一種封裝，而jquery將請(qǐng)求技術(shù)進(jìn)行了封裝變成了ajax；2、axios是一個(gè)基于Promise的HTTP庫(kù)，而ajax是對(duì)原生XHR的封裝。

本教程操作環(huán)境：windows10系統(tǒng)、jquery3.6.0版本、Dell G3電腦。

jquery中axios和ajax有什么區(qū)別

axios和ajax的區(qū)別：

axios是一個(gè)基于Promise的HTTP庫(kù)，而ajax是對(duì)原生XHR的封裝；

ajax技術(shù)實(shí)現(xiàn)了局部數(shù)據(jù)的刷新，而axios實(shí)現(xiàn)了對(duì)ajax的封裝。

axios是通過(guò)promise實(shí)現(xiàn)對(duì)ajax技術(shù)的一種封裝，就像JQuery實(shí)現(xiàn)ajax封裝一樣。

簡(jiǎn)單來(lái)說(shuō)就是：ajax技術(shù)實(shí)現(xiàn)了網(wǎng)頁(yè)的局部數(shù)據(jù)刷新，axios實(shí)現(xiàn)了對(duì)ajax的封裝。也就是說(shuō)，jQuery 將請(qǐng)求技術(shù)進(jìn)行了封裝 變成了 ajax , 而通過(guò) promise 又把 ajax 進(jìn)行封裝就成了 axios。axios是ajax,ajax不止axios。

有了ajax,為什么還要使用axios？

在現(xiàn)在的前端 mvvm 模式下 axios 更適合于數(shù)據(jù)請(qǐng)求。

擴(kuò)展知識(shí)：

ajax定義

簡(jiǎn)短地說(shuō)，在不重載整個(gè)網(wǎng)頁(yè)的情況下，AJAX 通過(guò)后臺(tái)加載數(shù)據(jù)，并在網(wǎng)頁(yè)上進(jìn)行顯示

jQuery為我們將原生ajax進(jìn)行了封裝，現(xiàn)在我們只需要一行簡(jiǎn)單的代碼，就可以實(shí)現(xiàn) AJAX 功能。

1.底層接口

    $.ajax({       url:'',    //請(qǐng)求地址       method:'',  //請(qǐng)求方式       data:{},     //傳參  無(wú)參可不寫       success:function(res){         //請(qǐng)求成功的回調(diào)函數(shù)       },       error:function(err){         //請(qǐng)求失敗的回調(diào)函數(shù)       }，     })

2.快捷方式

    $.get(url,data,function(res){})     $.post(url,data,function(res){})

axios請(qǐng)求的使用

Axios 是一個(gè)基于 promise (Promise 是異步編程的一種解決方案)的 HTTP 庫(kù)，可以用在瀏覽器和 node.js 中

jQuery ajax：

本身是針對(duì)MVC的編程,不符合現(xiàn)在前端MVVM

基于原生的XHR開發(fā)，XHR本身的架構(gòu)不清晰，已經(jīng)有了fetch的替代方案

JQuery整個(gè)項(xiàng)目太大，單純使用ajax卻要引入整個(gè)JQuery非常的不合理（采取個(gè)性化打包的方案又不能享受CDN服務(wù)）

axios的原生使用：

axios({       url:'http://47.93.206.13:8002/user/login',       // baseURL:'http://47.93.206.13:8002',       method:'post',       // params:    用于get請(qǐng)求       data:{    //用于post請(qǐng)求         username:'admin1',         password:'123321'          }     }).then((res) => {       console.log(res);     })

axios快捷方法：

/ 引入 let axios=require('axios')//到當(dāng)前node_modules找，找不到再往上找 // 封裝寫法 axios.get('http://47.107.65.238:8888/index/article/pageQuery?page=1&pageSize=10')   .then(function (response) {     console.log(response);   })

視頻教程推薦：jQuery視頻教程