ajax請(qǐng)求數(shù)據(jù)的過(guò)程，實(shí)際是從服務(wù)器上讀取文件抽莱，所以需要服務(wù)器環(huán)境。就類(lèi)似于写半，打開(kāi)瀏覽器岸蜗，輸入地址尉咕，等待服務(wù)器返回?cái)?shù)據(jù)的過(guò)程叠蝇。
1.首先需要?jiǎng)?chuàng)建一個(gè)ajax對(duì)象var oAjax =newXMLHttpRequest();
2.利用ajax對(duì)象的屬性或方法，來(lái)做下一步事情年缎，這里ajax使用open方法悔捶，有三個(gè)參數(shù)
oAjax.open('方法','文件路徑', 是否異步傳輸)，
阻塞=同步单芜，非阻塞=異步蜕该，計(jì)算機(jī)世界的里的同步和現(xiàn)實(shí)世界剛好相反。
oAjax.open('get','aaa.txt',true);
表單數(shù)據(jù)的提交洲鸠，action數(shù)據(jù)提交的地址堂淡，method數(shù)據(jù)提交的方式get或post
get方式馋缅，把數(shù)據(jù)名稱和數(shù)據(jù)值用等號(hào)連接，如果有多個(gè)用&連接绢淀，把數(shù)據(jù)放到url?后面提交到指定頁(yè)面萤悴。
3.發(fā)送請(qǐng)求，Ajax對(duì)象.send();
oAjax.send();
4.接收返回信息
oAjax.onreadystatechange=function () {
//onreadystatechange當(dāng)讀取的準(zhǔn)備狀態(tài)改變時(shí)執(zhí)行方法
if (oAjax.readyState==4) { //內(nèi)容解析完成
if (oAjax.status==200){ //文件讀取成功
}
}
};
Ajax對(duì)象下有readyState值皆的，用來(lái)監(jiān)控請(qǐng)求情況覆履，
0 （未初始化）還未調(diào)用open()方法
1 （載入）已調(diào)用send()方法，正在發(fā)送請(qǐng)求
2 （載入完成）send()完成费薄，已收到全部響應(yīng)內(nèi)容
3 （解析）正在解析響應(yīng)內(nèi)容硝全，比如解析HTTPS發(fā)過(guò)來(lái)的加密內(nèi)容
4 （完成）響應(yīng)內(nèi)容解析完成，可以在客戶端調(diào)用了
Ajax對(duì)象下還有status值楞抡，代表請(qǐng)求狀態(tài)碼伟众，比如200是成功
responseText，表示返回結(jié)果的內(nèi)容
這個(gè)函數(shù)有兩種寫(xiě)法召廷，如下
一般ajax默認(rèn)讀取文件會(huì)緩存赂鲤，所以在服務(wù)器文件更新后，用ajax讀取的文件可能并不會(huì)即使更新柱恤。一般解決辦法是url后面加時(shí)間戳
這里把"1.txt"賦值成一個(gè)url變量数初，var url ="1.txt"+"?t"+new Date().getTime();
window.onload=function () {
var btn = document.getElementById("btn");
btn.onclick=function () {
var req = new XMLHttpRequest();//創(chuàng)建一個(gè)ajax對(duì)象
console.log(req);
let url="https://www.easy-mock.com/mock/5c52a8621c33cd20fb0ad1d3/
zyw/ajax?t"+new Date().getTime();
req.open("get",url,true);//使用ajax對(duì)象的open方法，建立鏈接
req.send();//發(fā)送鏈接
req.onreadystatechange=function () { //執(zhí)行狀態(tài)改變函數(shù)
if (req.readyState==4 && req.status==200){
console.log(req.readyState,req.status);
console.log(req.responseText);//打印接收到的結(jié)果
}
};
}
};
我覺(jué)得完全可以用axios取代ajax
window.onload=function () {
var btn = document.getElementById("btn");
btn.onclick=function () {
let url="https://www.easy-mock.com/mock/5c52a8621c33cd20fb0ad1d3/
zyw/ajax?t"+new Date().getTime();
axios.get(url)
.then(res=>{
console.log(res.data)
})
.catch()
}
};
