AJAX
Asynchronous JavaScript And XML
異步的JavaScript和XML
作用
數(shù)據(jù)交換:
通過(guò)Ajax可以給服務(wù)器發(fā)送請(qǐng)求,服務(wù)器將數(shù)據(jù)直接響應(yīng)回給瀏覽器.
異步交互:
可以在不重新加載整個(gè)頁(yè)面的情況下,與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁(yè)的技術(shù).
同步和異步
同步發(fā)送請(qǐng)求:
瀏覽器發(fā)送請(qǐng)求給服務(wù)器,服務(wù)器處理請(qǐng)求的過(guò)程中,頁(yè)面不能做其他操作,直到服務(wù)器響應(yīng)結(jié)束.
異步發(fā)送請(qǐng)求:
瀏覽器頁(yè)面發(fā)送請(qǐng)求給服務(wù)器,在服務(wù)器處理請(qǐng)求的過(guò)程中,還可以做其他的操作.
原生異步請(qǐng)求代碼
1,創(chuàng)建XMLHttpRequest
var xmlHttpRequest = new XMLHttpRequest();
2,發(fā)送異步請(qǐng)求
xmlHttpRequest.open('Get','url');
xmlHttpRequest.send();
3,獲取服務(wù)響應(yīng)數(shù)據(jù)
xmlHttpRequest.onreadystatechange = function(){}
Axios
AJAX框架,對(duì)原生AJAX進(jìn)行了封裝
1,引入axios文件
<script src="axios文件路徑">
2,發(fā)起axios請(qǐng)求
//axios的get請(qǐng)求
axios({
method:"get",
url:""
}).then((result)) => {
console.log(result.data);
}
//axios的post請(qǐng)求
axios({
method:"post",
url:""
data:"鍵=值"
}).then((result)) => {
console.log(result.data);
}
method屬性:設(shè)置請(qǐng)求方式
url屬性:書(shū)寫(xiě)請(qǐng)求的資源路徑,get請(qǐng)求需要把參數(shù)拼在url之后
data屬性:post請(qǐng)求時(shí)作為請(qǐng)求體發(fā)送數(shù)據(jù)文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-861045.html
then()傳遞一個(gè)匿名函數(shù),在成功響應(yīng)后調(diào)用,回復(fù)的result代表對(duì)響應(yīng)數(shù)據(jù)封裝的對(duì)象,通過(guò)result.data可以獲取實(shí)際數(shù)據(jù)文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-861045.html
axios的簡(jiǎn)化
get
axios.get("url").then((result) => {
console.log(result.data);
});
post
axios.post("url","鍵=值").then((result) => {
console.log(result.data);
});
到了這里，關(guān)于Ajax和axios基礎(chǔ)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
