jquery中axios和ajax的區(qū)別:1、axios是通過promise實(shí)現(xiàn)對ajax技術(shù)的一種封裝,而jquery將請求技術(shù)進(jìn)行了封裝變成了ajax;2、axios是一個(gè)基于Promise的HTTP庫,而ajax是對原生XHR的封裝。
本教程操作環(huán)境:windows10系統(tǒng)、jquery3.6.0版本、Dell G3電腦。
jquery中axios和ajax有什么區(qū)別
axios和ajax的區(qū)別:
axios是一個(gè)基于Promise的HTTP庫,而ajax是對原生XHR的封裝;
ajax技術(shù)實(shí)現(xiàn)了局部數(shù)據(jù)的刷新,而axios實(shí)現(xiàn)了對ajax的封裝。
axios是通過promise實(shí)現(xiàn)對ajax技術(shù)的一種封裝,就像JQuery實(shí)現(xiàn)ajax封裝一樣。
簡單來說就是:ajax技術(shù)實(shí)現(xiàn)了網(wǎng)頁的局部數(shù)據(jù)刷新,axios實(shí)現(xiàn)了對ajax的封裝。也就是說,jQuery 將請求技術(shù)進(jìn)行了封裝 變成了 ajax , 而通過 promise 又把 ajax 進(jìn)行封裝就成了 axios。axios是ajax,ajax不止axios。
有了ajax,為什么還要使用axios?
在現(xiàn)在的前端 mvvm 模式下 axios 更適合于數(shù)據(jù)請求。
擴(kuò)展知識(shí):
ajax定義
簡短地說,在不重載整個(gè)網(wǎng)頁的情況下,AJAX 通過后臺(tái)加載數(shù)據(jù),并在網(wǎng)頁上進(jìn)行顯示
jQuery為我們將原生ajax進(jìn)行了封裝,現(xiàn)在我們只需要一行簡單的代碼,就可以實(shí)現(xiàn) AJAX 功能。
1.底層接口
$.ajax({ url:'', //請求地址 method:'', //請求方式 data:{}, //傳參 無參可不寫 success:function(res){ //請求成功的回調(diào)函數(shù) }, error:function(err){ //請求失敗的回調(diào)函數(shù) }, })
2.快捷方式
$.get(url,data,function(res){}) $.post(url,data,function(res){})
axios請求的使用
Axios 是一個(gè)基于 promise (Promise 是異步編程的一種解決方案)的 HTTP 庫,可以用在瀏覽器和 node.js 中
jQuery ajax:
本身是針對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請求 data:{ //用于post請求 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視頻教程