// 1.創(chuàng)建一個(gè)ajax對象
let xhr = new AMLHttpRequest();// 不兼容IE6及更低版本的瀏覽器（IE6:ActiveXObject）
// 2.打開請求地址（可以理解為一些基礎(chǔ)配置遵倦，但沒有發(fā)送請求）
xhr.open([method], [url], [async], [username], [user password])
// 3.監(jiān)聽AJAX狀態(tài)改變，獲取響應(yīng)信息（獲取響應(yīng)頭信息地啰、獲取響應(yīng)主題信息）
xhr.onreadystatechange=()=>{
if(xhr.readyState === 4 && xhr.status === 200){
let result = xhr.responseText; // 獲取響應(yīng)主體中的內(nèi)容
}
};
// 4. 發(fā)送ajax請求(括號中傳遞的內(nèi)容就是請求主體的內(nèi)容)
xhr.send(null);
第二步中的知識點(diǎn)
xhr.open([method], [url], [async], [username], [user password])
[method]: HTTP請求方式策彤，不管哪一種請求方式栓袖，客戶端都可以傳遞一些信息給服務(wù)器，服務(wù)器也可以返回一些信息給客戶端店诗，GET系列以獲取為主(給的少拿的多)裹刮，POST系列以推送為主(給的多拿的少)
1）GET系列請求方式（獲取）
- get
- delete：從服務(wù)器上刪除某些資源文件
- head：只獲取返回的響應(yīng)頭信息（不要響應(yīng)主體內(nèi)容）
- ...
2）POST系列請求方式（推送）
- post
- put：向服務(wù)器中增加指定的資源文件
- ...
A. 獲取一些動態(tài)展示信息庞瘸，一般使用GET請求捧弃，只需要向服務(wù)器端發(fā)送請求，告訴它需要的數(shù)據(jù)擦囊，服務(wù)器端就會返回需要的數(shù)據(jù)
B. 實(shí)現(xiàn)注冊功能的時(shí)候违霞，需要把客戶輸入的信息發(fā)送給服務(wù)器進(jìn)行存儲，服務(wù)器一般返回成功失敗等狀態(tài)瞬场，一般用POST請求完成
GET系列請求和POST系列下請求的區(qū)別
1买鸽、GET請求傳遞給服務(wù)器的內(nèi)容一般沒有POST請求傳遞的多
原因：GET請求給服務(wù)器傳遞內(nèi)容一般都是基于url地址問號傳遞參數(shù)來實(shí)現(xiàn)，而POST請求是設(shè)置請求主體來實(shí)現(xiàn)贯被，各瀏覽器對URL的長度都有限制眼五，超過限制瀏覽器會自動截取，這樣傳遞的數(shù)據(jù)就會出現(xiàn)缺失
理論上POST通過請求主體傳遞參數(shù)是沒有大小限制的刃榨，真實(shí)項(xiàng)目中為了保證傳輸?shù)乃俾室矔拗拼笮。ɡ缟蟼髻Y料双仍、圖片都會做大小限制）
2枢希、GET請求會出現(xiàn)緩存，POST不會出現(xiàn)
原因：GET通過URL傳參（可能幾次請求一樣）朱沃，POST是設(shè)置請求主體
// 每隔一分鐘重新請求服務(wù)器端的最新數(shù)據(jù)展示在頁面中（頁面中某些數(shù)據(jù)實(shí)時(shí)刷新）
setTimeout(()=>{
$.ajax({
url: 'getUserInfo?id=123',
...
success:result=>{
// 第一次請求數(shù)據(jù)回來苞轿，一分鐘后瀏覽器又發(fā)生一次請求茅诱，但新發(fā)送的請求跟上次一模一樣，
//瀏覽器很有可能會直接獲取上一次的數(shù)據(jù)
}
});
}, 60000);
//=> 解決方案 每次在url末尾追加一個(gè)隨機(jī)數(shù)搬卒，就能保證每次請求的url不一樣
// HTTP相關(guān)里頭有提到
setTimeout(()=>{
$.ajax({
url: 'getUserInfo?id=123&_='+Math.random(),
...
success:result=>{
}
});
}, 60000);
3瑟俭、GET請求沒有POST請求安全（相對安全）
原因：還是因?yàn)镚ET是URL傳參
URL劫持，可以把客戶端傳遞給服務(wù)器的數(shù)據(jù)劫持掉契邀，導(dǎo)致信息泄露
[url]: 請求數(shù)據(jù)的地址（API地址）摆寄，真實(shí)項(xiàng)目中，后臺開發(fā)工程師會編寫一個(gè)API文檔坯门，文檔匯總了獲取數(shù)據(jù)需要用的地址微饥，按照文檔操作即可
[ASYNC]: 異步（SYNC同步），默認(rèn)true古戴，表示異步
[username password]: 一般不用的兩個(gè)參數(shù) 若請求的URL地址所在的服務(wù)器設(shè)定了訪問權(quán)限欠橘，則需要提供用戶名密碼，否則不需要
第三部分細(xì)節(jié)
xhr.onreadystatechange=()=>{
if(xhr.readyState === 4 && xhr.status === 200){
let result = xhr.responseText; // 獲取響應(yīng)主體中的內(nèi)容
}
};
AJAX狀態(tài)碼：描述當(dāng)前AJAX操作的狀態(tài)
xhr.redayState0：UNSEND 未發(fā)送现恼，只要?jiǎng)?chuàng)建AJAX對象肃续，默認(rèn)就是0
1： OPENED 執(zhí)行了xhr.open這個(gè)操作
2：HEADERS_RECEIVED 當(dāng)前AJAX請求已經(jīng)發(fā)送，并且已經(jīng)接收到服務(wù)器端返回的響應(yīng)頭信息
3：LOADING 響應(yīng)主體內(nèi)容正在返回的路上
4：DONE 響應(yīng)主體內(nèi)容已經(jīng)返回到客戶端
HTTP網(wǎng)絡(luò)狀態(tài)碼叉袍，記錄當(dāng)前服務(wù)器返回信息的狀態(tài)
xhr.status200：成功 一個(gè)完整的HTTP事務(wù)完成（以2開頭的狀態(tài)碼一般都是成功）
以3開頭的一般也是成功始锚，只不過服務(wù)器端做了很多特殊的處理
301： Moved Permanently 永久轉(zhuǎn)移(重定向)一般用于域名遷移
302： Moved Temporarily 臨時(shí)轉(zhuǎn)移(新的HTTP版本中307是臨時(shí)重定向)一般用于服務(wù)器的負(fù)載均衡：當(dāng)前服務(wù)器處理不了，把當(dāng)前請求臨時(shí)交給其他服務(wù)器處理
304： Not Modified 從瀏覽器緩存中獲取數(shù)據(jù)把一些不經(jīng)常更新的文件或內(nèi)容緩存到瀏覽器中畦韭，下次可直接從緩存中獲取疼蛾，減輕服務(wù)器壓力，提高頁面加載速度以4開頭的一般都是失敗艺配，且一般都是客戶端的問題（沒拿到數(shù)據(jù)）
400：請求參數(shù)錯(cuò)誤
401：無權(quán)限訪問
404：訪問地址不存在>以5開頭的一般都是失敗察郁，且一般都是服務(wù)器端的問題（沒拿到數(shù)據(jù)）
500：Internal Server Error未知的服務(wù)器錯(cuò)誤
503：Service Unavailable服務(wù)器超載
AJAX中其他常用的屬性和方法
面試題：AJAX中常用的方法有幾個(gè)（AJAX總共支持幾個(gè)方法）？
let xhr = new XMLHttpRequest();
console.dir(xhr);
[屬性]
1转唉、readyState：存儲的是當(dāng)前AJAX狀態(tài)碼（01234）
2皮钠、responseText/responseXML/response：都是用來接收服務(wù)器返回的響應(yīng)主體的內(nèi)容，只是根據(jù)服務(wù)器返回內(nèi)容的格式不一樣赠法，使用不同屬性接收
- responseText最常用麦轰，接收到的結(jié)果是字符串格式（服務(wù)器一般返回的都是JSON格式字符串）
- responseXML偶爾用到，若服務(wù)器端返回XML文檔數(shù)據(jù)砖织，就用這個(gè)屬性接收
3款侵、status：記錄了服務(wù)器端返回的HTTP狀態(tài)碼
4、statusText：對返回狀態(tài)碼的描述（200：ok）
5侧纯、timeout：設(shè)置當(dāng)前AJAX請求的超時(shí)時(shí)間新锈，假設(shè)設(shè)置為3000(ms)，3秒后響應(yīng)主體內(nèi)容還沒返回眶熬，瀏覽器就會強(qiáng)制斷開請求[方法]
1妹笆、abort()：強(qiáng)制中斷請求
2块请、getAllResponseHeaders()：獲取全部響應(yīng)頭信息（結(jié)果是一堆字符串文本）
3、getResponseHeader(key)：獲取指定屬性名的響應(yīng)頭信息拳缠。例如getResponseHeader('date')獲取響應(yīng)頭中存儲的服務(wù)器時(shí)間
4墩新、open()：打開一個(gè)url地址
5、send()：發(fā)送AJAX請求窟坐，參數(shù)客戶端設(shè)置的請求主體
6海渊、setRequestHeader(key,value)：設(shè)置自定義的請求頭信息[事件]
1、onabort: AJAX被中斷請求時(shí)觸發(fā)事件
2狸涌、onreadystatechange: AJAX狀態(tài)碼發(fā)生改變時(shí)觸發(fā)事件
3切省、ontimeout: AJAX請求超時(shí)觸發(fā)事件
let xhr = new XMLHttpRequest();
xhr.open('get', 'temp.json?_='+Math.random(), true);
xhr.setRequestHeader('cookie', 'cache'); //不能是漢字
// 請求頭必須在open之后，send之前設(shè)置
xhr.timeout = 1;
xhr.ontimeout = () => {
console.log("請求超時(shí)");
xhr.abort();
};
xhr.onreadystatechange = () => {
let {readyState:state, status} = xhr;
// 請求成功 以2或3開頭的后面兩位數(shù)字
if(! (/^(2|3)\d{2}$/).test(status)) return;
// 狀態(tài)為2時(shí)就可以獲取頭信息
if(state === 2){
let headAll = xhr.getAllResponseHeaders(),
serverDate = xhr.getResponseHeader("date");
// 時(shí)間是格林尼治時(shí)間差8小時(shí) new Date轉(zhuǎn)化為北京時(shí)間
console.log(headAll, new Date(serverDate));
return;
}
if(state === 4){
let valueText = xhr.responseText, // 獲取的結(jié)果帕胆，一般都是字符串
valueXML = xhr.responseXML; //獲取到XML格式數(shù)據(jù)
console.log(valueText, valueXML);
}
};
xhr.send(null);
AJAX中的同步和異步
AJAX這個(gè)任務(wù)：發(fā)送請求接收到響應(yīng)主體接收完成 這個(gè)事務(wù)才算完成
let xhr = new XMLHttpRequest();
xhr.open('get', 'temp.json', false);
xhr.onreadystatechange = () => {
console.log(xhr.readyState);
// 只輸出4
};
xhr.send(null);
////////分割線//////////
let xhr = new XMLHttpRequest();
xhr.open('get', 'temp.json', false);
xhr.send(null); //=> [同步]開始發(fā)送AJAX請求朝捆，任務(wù)沒有完成之前下面事情做不了，
// 當(dāng)xhr.readyState===4時(shí)懒豹，開始執(zhí)行下面的操作
// 這個(gè)方法已經(jīng)不會被觸發(fā)
xhr.onreadystatechange = () => {
console.log(xhr.readyState);
// 不輸出任何東西 無法獲取響應(yīng)主體的內(nèi)容
};
////////分割線//////////
let xhr = new XMLHttpRequest();
xhr.open('get', 'temp.json'); // 第三個(gè)參數(shù)不寫默認(rèn)true
xhr.onreadystatechange = () => {
console.log(xhr.readyState);
// 2 3 4
};
xhr.send(null);
////////分割線//////////
let xhr = new XMLHttpRequest();
xhr.open('get', 'temp.json');
xhr.send(null);
// => xhr.readyState === 1
xhr.onreadystatechange = () => {
console.log(xhr.readyState);
// 2 3 4
};
////////分割線//////////
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
console.log(xhr.readyState);
//1 2 3 4
};
xhr.open('get', 'temp.json');
xhr.send(null);
////////分割線//////////
let xhr = new XMLHttpRequest();
//xhr.readyState === 0
xhr.onreadystatechange = () => {
console.log(xhr.readyState);
// 1 4
};
xhr.open('get', 'temp.json', false);
// AJAX特殊處理了一件事芙盘，狀態(tài)變?yōu)?會主動執(zhí)行監(jiān)聽方法，然后再send
// xhr.readyState === 1
xhr.send(null);
// xhr.readyState === 4 主任務(wù)隊(duì)列完成
AJAX類庫的封裝
JQ 中的AJAX
$.ajax({
url: 'xxx.json', //=> 請求地址
method: 'get', //=> 請求方式 老版本中method和type一樣
dataType: 'json', //=>只是預(yù)設(shè)獲取結(jié)果的數(shù)據(jù)類型脸秽，不會影響服務(wù)器的返回
// 服務(wù)器返回的都是JSON格式的字符串
cache: false, //=>只對GET系列有作用儒老，默認(rèn)為true，
//手動設(shè)置為false记餐， JQ會在URL的末尾追加一個(gè)隨機(jī)數(shù)來清除緩存
data: null, //=>通過data可以把一些信息傳遞給服務(wù)器
// GET系列請求會把data的內(nèi)容拼接在URL末尾傳遞給服務(wù)器
// POST會把data的內(nèi)容放在請求主體中
// 可以是兩種格式：字符串驮樊、對象，若是字符串片酝，設(shè)置什么就傳遞什么囚衔；
// 若是對象，JQ會設(shè)置成"鍵=值"形式的字符串傳遞給服務(wù)器
async: true, //=>設(shè)置同步或者異步雕沿，默認(rèn)true是異步
success: function(result){
//=> AJAX請求成功觸發(fā)這個(gè)函數(shù)執(zhí)行（readyState=4&&status==2/3開頭的）
//=> result 就是獲取到的結(jié)果
},
error: function(msg){
// =>請求錯(cuò)誤觸發(fā)該函數(shù)
},
complete: function(){
//=> 完成就觸發(fā)练湿，不管對或錯(cuò)
},
});
