ajax與axios的使用和對比
ajax
Ajax 即“Asynchronous Javascript And XML”（異步 JavaScript 和 XML），是指一種創建交互式網頁應用的網頁開發技術
Ajax = 異步 JavaScript 和 XML 或者是 HTML（標准通用標記語言的子集）
Ajax 是一種用於創建快速動態網頁的技術
Ajax 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術
通過在后台與服務器進行少量數據交換，Ajax 可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新
傳統的網頁（不使用 Ajax）如果需要更新內容，必須重載整個網頁頁面
參考百度百科
優點：
在頁面無刷新的情況下與服務器通訊維護數據，用戶體驗好
異步通訊方式，不打斷用戶操作，響應能力迅速
把一些請求轉到客戶端，“按需取數據”，最大程度的減少冗余請求和對服務器造成的負擔
基於標准化的並被廣泛支持的技術，不需要下載瀏覽器插件或者小程序
使用：
1. 原生 ajax
ajax 的核心是 JavaScript 對象 XmlHttpRequest
GET 請求方式
//創建 XMLHttpRequest對象
var xhr = new XMLHttpRequest()
//打開要發送請求的地址，get發送請求時參數要放在url中
xhr.open("get","https://me.csdn.net/weixin_45426836?a=1&b=2",true)
//發送請求
xhr.send()
//監聽請求狀態，接收響應數據，onload 等於 xhr.readyState == 4
xhr.onload = function(){
if(xhr.status == 200) {
console.log(xhr.response) //通過xhr的response獲取到響應的響應體
}else {
console.log(error)
}
}
POST 請求方式
//創建 XMLHttpRequest對象
var xhr = new XMLHttpRequest()
//打開要發送請求的地址
xhr.open("post","https://me.csdn.net/weixin_45426836",true)
//設置請求頭
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
//發送請求，post發送請求時參數要放在send中
xhr.send("a=1&b=2")
//監聽請求狀態，接收響應數據，xhr.readyState == 4 等於 onload
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.response) //通過xhr的response獲取到響應的響應體
}else {
console.log(error)
}
}
XMLHttpRequest API 屬性
readyState： xhr的狀態，請求響應過程的當前活動階段
status： 響應的http狀態
statusText： 響應的http狀態的字符串信息說明
responseText： 響應的數據文本
responseXML： 響應的DOM兼容的文檔數據對象
onreadystatechange： 事件，當 xhr.readyState 屬性發生改變觸發
onload： 事件，響應接收完畢觸發
XMLHttpRequest API 方法
open(method, url, async)： 打開要發送請求的地址，參數：請求方式、請求的url地址、請求是否異步的布爾值（默認true）
send(requsetBody)： 發送請求（體）
setRequestHeader(key, value)： 設置請求頭
getResponseHeader(key)： 獲取響應頭
XMLHttpRequest 對象的 readyState 屬性，表示請求響應過程的當前活動階段：
0： 未初始化，創建了XMLHttpRequest對象，但未調用open()方法
1： 啟動，已經調用open()方法，但未調用send()方法
2： 發送，已經調用send()方法，但未接收到響應
3： 接收，已經接收到部分響應數據
4： 完成，已經接收到全部響應數據，並且可以在客戶端使用
2. jquery將ajax封裝成了一個函數 $.ajax()，我們可以直接用這個函數來執行ajax請求
常用參數：
url ： 請求的 URL 地址
type ： 請求方式，默認是 GET，常用的還有 POST
async ： 請求是否異步，默認值是 true，表示異步，false 表示同步
dataType ： 返回的數據類型，常用的是 json 格式
contentType： 請求的數據類型，默認為"application/x-www-form-urlencoded"
data ： 請求的數據參數
success ： 請求成功后的回調函數
error ： 請求失敗后的回調函數
$.ajax({
url: 'https://me.csdn.net/weixin_45426836',
type: 'get',
dataType: 'json',
data: {
//'a': 1,
//'b': 2
},
success: function (data) {
console.log(data)
},
error: function (err) {
console.log(err)
}
})
GET 請求方式 $.get()
$.get("https://me.csdn.net/weixin_45426836", {
//'a': 1,
//'b': 2
},function (data) {
console.log(data)
})
POST 請求方式 $.post()
$.post("https://me.csdn.net/weixin_45426836", {
//'a': 1,
//'b': 2
},function (data) {
console.log(data)
})
axios
axios 是一個基於promise 的 http 庫，可以用於瀏覽器和 nodejs 中
優點：
從瀏覽器中創建 XMLHttpRequests
從 node.js 創建 http 請求
支持 Promise API
攔截請求和響應
轉換請求數據和響應數據
取消請求
自動轉換 JSON 數據
客戶端支持防御 XSRF
使用：
通過向 axios 傳遞相關配置來創建請求
常用參數：
url ： 請求的 URL 地址
method ： 請求方式，默認是 GET，常用的還有 POST
baseURL： baseURL 將自動加在 url 前面，除非 url 是一個絕對 URL
responseType ： 返回的數據類型，常用的是 json 格式
headers： 請求的自定義請求頭
params ： 與請求一起發送的 URL 參數
data ： 請求的數據參數，只適用於 PUT, POST, 和 PATCH
axios({
url: 'https://me.csdn.net/weixin_45426836',
method: 'get',
responseType: 'json',
params: {
//'a': 1,
//'b': 2,
}
}).then(function (data) {
console.log(data)
}).catch(function (err) {
console.log(err)
})
執行 GET 請求
axios.get('https://me.csdn.net/weixin_45426836', {
params: {
//'a': 1,
//'b': 2,
}
}).then(function (data) {
console.log(data)
}).catch(function (err) {
console.log(err)
})
執行 POST 請求
axios.post('https://me.csdn.net/weixin_45426836', {
//'a': 1,
//'b': 2,
}).then(function (data) {
console.log(data)
}).catch(function (err) {
console.log(err)
})
使用 axios.all 處理並發請求
function getOne() {
return axios.get('https://me.csdn.net/weixin_45426836', {
params: {
//'a': 1
}
});
}
function getTwo() {
return axios.get('https://me.csdn.net/weixin_45426836', {
params: {
//'b': 2
}
});
}
axios.all([getOne(), getTwo()])
.then(axios.spread(function (one, two) {
console.log(one)
cosnoel.log(two)
}))
全局 axios 默認值
axios.defaults
// 全局默認的baseURL
axios.defaults.baseURL = 'https://me.csdn.net/weixin_45426836'
axios 攔截器
在請求或響應被 then 或 catch 處理前攔截它們，進行一些操作
// 添加請求攔截器
axios.interceptors.request.use(function (config) {
// 在發送請求之前做些什么
return config;
}, function (error) {
// 對請求錯誤做些什么
return Promise.reject(error);
});
// 添加響應攔截器
axios.interceptors.response.use(function (response) {
// 對響應數據做點什么
return response;
}, function (error) {
// 對響應錯誤做點什么
return Promise.reject(error);
});
ajax 與 axios 的根本區別
axios 是基於promise實現的對 ajax 技術的一種封裝，兩者用法基本一樣，個別參數不同，axios 封裝了一些更簡便的 ajax 操作
axios 是 ajax，但是 ajax 不限於 axios