什么是 AJAX 隅津？
Ajax 的全稱是 Asynchronous JavaScript And XML（異步 JavaScript 和 xml）
通俗理解：在網(wǎng)頁中利用 XMLHttpRequest 對(duì)象和服務(wù)器進(jìn)行數(shù)據(jù)交互的方式所禀，就是Ajax。
突出的特點(diǎn)：當(dāng)前網(wǎng)頁沒有刷新仿耽、沒有跳轉(zhuǎn)。
通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換各薇，AJAX 可以使網(wǎng)頁實(shí)現(xiàn)異步更新项贺。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下，對(duì)網(wǎng)頁的某部分進(jìn)行更新峭判。
傳統(tǒng)的網(wǎng)頁（不使用 AJAX）如果需要更新內(nèi)容开缎，必需重載整個(gè)網(wǎng)頁面。
既然ajax有這么多好處林螃，我們要怎樣使用ajax呢奕删？代碼說話
原聲AJAX
-所有現(xiàn)代瀏覽器均支持 XMLHttpRequest 對(duì)象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后臺(tái)與服務(wù)器交換數(shù)據(jù)疗认。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下完残，對(duì)網(wǎng)頁的某部分進(jìn)行更新。原聲請(qǐng)求分為POST和GET兩種方式横漏，GET的參數(shù)是通過url谨设？后以鍵值對(duì)的形式傳送給服務(wù)器的，POST是通過XMLHttpRequest中send方法傳遞過去的缎浇，與 POST 相比扎拣，GET 更簡單也更快，并且在大部分情況下都能用华畏。
然而鹏秋，在以下情況中，請(qǐng)使用 POST 請(qǐng)求：
無法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫）
向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）
發(fā)送包含未知字符的用戶輸入時(shí)亡笑，POST 比 GET 更穩(wěn)定也更可靠
POST請(qǐng)求方式：
//首先創(chuàng)建一個(gè)XMLHttpRequest對(duì)象
let xhr = new XMLHttpRequest();
//open向服務(wù)器發(fā)送請(qǐng)求
xhr.open('POST', url);
//告知服務(wù)器post請(qǐng)求報(bào)文的格式
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//發(fā)送請(qǐng)求
xhr.send(fd);
//判斷相應(yīng)是否成功侣夷，并將服務(wù)器響應(yīng)數(shù)據(jù)賦值
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
let res = JSON.parse(xhr.responseText);
if (res.status !== 200) return alert(res.message);
console.log(res);
}
}
GET請(qǐng)求方式：
//首先創(chuàng)建一個(gè)XMLHttpRequest對(duì)象
let xhr = new XMLHttpRequest();
//open向服務(wù)器發(fā)送請(qǐng)求
xhr.open('GET', url?'key:value');
//發(fā)送請(qǐng)求
xhr.send();
//判斷相應(yīng)是否成功，并將服務(wù)器響應(yīng)數(shù)據(jù)賦值
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
let res = JSON.parse(xhr.responseText);
if (res.status !== 200) return alert(res.message);
console.log(res);
}
}
jQuery中的AJAX
由于XMLHttpRequest對(duì)象用法比較復(fù)雜
jQuery中為我們封裝了XMLHttpRequest對(duì)象提供了一系列的Ajax相關(guān)的函數(shù)
jQuery中發(fā)起 Ajax 請(qǐng)求最常用的三個(gè)方法如下：
-
$.get()get方式請(qǐng)求仑乌，用于獲取數(shù)據(jù) -
$.post()post方式請(qǐng)求百拓，用于提交數(shù)據(jù) -
$.ajax()比較綜合，既可以獲取數(shù)據(jù)晰甚，又可以提交數(shù)據(jù)
$.get()
$.get(url,[data],[callback])
$.post()
$.post(url,[data],[callback])
$.ajax()
$ajax的基本語法
Axios
Axios 是專注于網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求的庫衙传。
相比于原生的 XMLHttpRequest 對(duì)象，axios 簡單易用厕九。
相比于 jQuery蓖捶，axios 更加輕量化，只專注于網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求扁远。
axios.get
axios.get('url', { params: { /參數(shù)/ } }).then(callback)
// 請(qǐng)求的 URL 地址
var url = ''
// 請(qǐng)求的參數(shù)對(duì)象
var paramsObj = { name: 'zs', age: 20 }
// 調(diào)用 axios.get() 發(fā)起 GET 請(qǐng)求
axios.get(url, { params: paramsObj }).then(function(res) {
// res.data 是服務(wù)器返回的數(shù)據(jù)
var result = res.data
console.log(res)
})
axios.post
axios.post('url', { /參數(shù)/ }).then(callback)
// 請(qǐng)求的 URL 地址
var url = ''
// 要提交到服務(wù)器的數(shù)據(jù)
var dataObj = { location: '北京', address: '順義' }
// 調(diào)用 axios.post() 發(fā)起 POST 請(qǐng)求
axios.post(url, dataObj).then(function(res) {
// res.data 是服務(wù)器返回的數(shù)據(jù)
var result = res.data
console.log(result)
})
axios
axios 也提供了類似于 jQuery 中 $.ajax() 的函數(shù)俊鱼，語法如下：
axios({
method: '請(qǐng)求類型',
url: '請(qǐng)求的URL地址',
data: { /* POST數(shù)據(jù) */ },
params: { /* GET參數(shù) */ }
}).then(callback)
