AJAX是什么
AJAX = Async JavaScript And XML
可以說(shuō)用JS發(fā)請(qǐng)求和收響應(yīng)就是AJAX的全部?jī)?nèi)容
AJAX是瀏覽器上的功能
- 瀏覽器可以發(fā)請(qǐng)求，收響應(yīng)
- 瀏覽器在window上加了一個(gè)XMLHttpRequest函數(shù)
- 用這個(gè)構(gòu)造函數(shù)（類）可以構(gòu)造出一個(gè)對(duì)象
JS通過(guò)它來(lái)發(fā)請(qǐng)求和收響應(yīng)
利用AJAX來(lái)加載CSS、JS、HTML、XML、JSON
加載CSS
我們?cè)诩虞dCSS一般的方法為<link rel=stylesheet href="1.css"/>，我們也可以使用AJAX來(lái)進(jìn)行加載。
步驟如下：
創(chuàng)建 HttpRequest 對(duì)象（全稱是 XMLHttpRequest）
調(diào)用對(duì)象的 open 方法
監(jiān)聽對(duì)象的 onload & onerror 事件
調(diào)用對(duì)象的 send 方法（發(fā)送請(qǐng)求）
代碼演示：
getCSS.onclick = () => {
const request = new XMLHttpRequest(); //創(chuàng)建HttpRequest對(duì)象
request.open("GET", "/style.css"); //調(diào)用對(duì)象的open方法
request.onload = () => {
console.log(request.response);
console.log("成功了");
const style = document.createElement("style"); //創(chuàng)建style標(biāo)簽
style.innerHTML = request.response; //填寫style內(nèi)容
document.head.appendChild(style); //插入到head標(biāo)簽里面
}; //監(jiān)聽對(duì)象的onload事件
request.onerror = () => {
console.log("失敗了");
}; //監(jiān)聽對(duì)象的error事件
request.send(); //調(diào)用對(duì)象的send方法
};
加載JS
我們以前使用常規(guī)方法就是引入<script src="2.js"></script>，JS也是可以用AJAX來(lái)進(jìn)行實(shí)現(xiàn)的。
步驟同CSS就不進(jìn)行演示了。
加載HTML
以往我們?cè)谝粋€(gè)html中是不會(huì)加載一個(gè)html的，如果加載也是iframe標(biāo)簽。我們可以通過(guò)AJAX來(lái)對(duì)一個(gè)HTML進(jìn)行一個(gè)輕量級(jí)的請(qǐng)求。
步驟大致與加載CSS相同，具體代碼如下
getHTML.onclick = () => {
const request = new XMLHttpRequest(); //還是創(chuàng)建HTTPRequest對(duì)象
request.open("GET", "/3.html"); //調(diào)用open
request.onload = () => {
const div = document.createElement("div"); //創(chuàng)建一個(gè)div
div.innerHTML = request.response; //在這個(gè)div里面寫上內(nèi)容
document.body.appendChild(div); //放入body里面，以上三行是對(duì)于成功請(qǐng)求的事件進(jìn)行能夠加載的處理（輕量級(jí)請(qǐng)求）
};
request.onerror = () => {}; //onerror不是很好的適配AJAX
request.send();
};
onreadystatechange
可以看到以上兩段代碼都出現(xiàn)了onload和onerror，但是onerror也不會(huì)寫什么內(nèi)容。我們可以用一個(gè)更高級(jí)的API叫做onreadystatechange()其中涉及到一個(gè)屬性叫做readystate，它是用來(lái)表示這個(gè)XMLHttpRequest對(duì)象的一生的
const request = new XMLHttpRequest(); //此時(shí)readyState=0
request.open(); //此時(shí)readyState=1
request.send(); //此時(shí)readyState=2
//響應(yīng)出第一個(gè)字節(jié)此時(shí)readyState=3
//完全下載完畢此時(shí)readyState=4
我們可以利用onreadystatechange()來(lái)對(duì)加載CSS進(jìn)行改寫
getCSS.onclick = () => {
const request = new XMLHttpRequest(); //創(chuàng)建HttpRequest對(duì)象,此時(shí)readystate是0
request.open("GET", "/style.css"); //調(diào)用對(duì)象的open方法，此時(shí)readystate是1
request.onreadystatechange = () => {
console.log(request.readyState);
if (request.readyState === 4) {
//下載完成，但不知道是否成功 成功一般為2xx 失敗可能為4xx 5xx
if (request.status >= 200 && request.status <= 300) {
const style = document.createElement("style"); //創(chuàng)建style標(biāo)簽
style.innerHTML = request.response; //填寫style內(nèi)容
document.head.appendChild(style); //插入到head標(biāo)簽里面
} else {
alert("加載css失敗");
}
}
};
加載XML
步驟如下：
創(chuàng)建 HttpRequest 對(duì)象（全稱是 XMLHttpRequest）
調(diào)用對(duì)象的 open 方法
監(jiān)聽對(duì)象的 onreadystatechange 事件 ——在事件處理函數(shù)里操作 responseXML
調(diào)用對(duì)象的 send 方法（發(fā)送請(qǐng)求）
代碼演示：
//給XML事件一個(gè)監(jiān)聽
getXML.onclick = () => {
const request = new XMLHttpRequest();
request.open("GET", "/4.xml");
request.onreadystatechange = () => {
if (request.readyState === 4 && request.status === 200) {
const dom = request.responseXML; //DOM對(duì)象不止是用于HTMl也用于XML
const text = dom.getElementsByTagName("warning")[0].textContent; //注意要加[0]，否則將會(huì)獲得一個(gè)偽數(shù)組
console.log(text.trim()); //trim一下可以消除回車
}
};
request.send();
};
小結(jié)
解析方法得到 CSS 之后生成 style 標(biāo)簽
得到 JS 之后生成 script 標(biāo)簽
得到 HTML 之后使用 innerHTML 和 DOM API
得到 XML 之后使用 responseXML 和 DOM API
不同類型的數(shù)據(jù)有不同類型的解析辦法
加載JSON
什么是JSON
JavaScript Object Notation
JSON是一門語(yǔ)言，是一門標(biāo)記語(yǔ)言，與HTML、XML、Markdown一樣用來(lái)展示數(shù)據(jù)
JSON支持的數(shù)據(jù)類型：number,bool,string,null,object,array
字符串用雙引號(hào)，沒(méi)有undefined，不支持函數(shù)，不支持變量
加載JSON
創(chuàng)建 HttpRequest 對(duì)象（全稱是 XMLHttpRequest）
調(diào)用對(duì)象的 open 方法
監(jiān)聽對(duì)象的 onreadystatechange 事件 ——在事件處理函數(shù)里使用 JSON.parse
調(diào)用對(duì)象的 send 方法（發(fā)送請(qǐng)求）
代碼演示：
//給JSON事件一個(gè)監(jiān)聽
getJSON.onclick = () => {
const request = new XMLHttpRequest();
request.open("GET", "/5.json");
request.onreadystatechange = () => {
if (request.readyState === 4 && request.status === 200) {
console.log(typeof request.response);
console.log(request.response);
const bool = JSON.parse(request.response); //SON 字符串 => JS 數(shù)據(jù),由于 JSON 只有六種類型，所以轉(zhuǎn)成的數(shù)據(jù)也只有6種
console.log(typeof bool);
console.log(bool);
}
};
request.send();
};
這里用到了JSON.parse，要用try catch 捕獲錯(cuò)誤
let object;
try {
object = JSON.parse(`{'name':'origami'}`);
} catch (error) {
console.log("出錯(cuò)了，錯(cuò)誤詳情是");
console.log(error);
object = { name: "noname" };
}
console.log(object);
