一逃默、ajax介紹
ajax:Asynchronous(異步) JavaScript and XML。
ajax的含義：通過js語法實(shí)現(xiàn)的異步網(wǎng)絡(luò)請求技術(shù)摧茴。實(shí)現(xiàn)頁面的局部更新（傳統(tǒng)的form表單請求數(shù)據(jù)a標(biāo)簽請求數(shù)據(jù)等手段）這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下彰导，對網(wǎng)頁的某部分進(jìn)行更新矢腻。傳統(tǒng)的網(wǎng)頁（不使用 AJAX）如果需要更新內(nèi)容鞭衩，必需重載整個(gè)網(wǎng)頁面学搜。
異步：當(dāng)代碼執(zhí)行到耗時(shí)操作時(shí)，先向后執(zhí)行其他代碼醋旦，等耗時(shí)操作處理完畢，再通過回調(diào)函數(shù)來處理耗時(shí)操作的結(jié)果会放。
同步：當(dāng)代碼執(zhí)行到耗時(shí)操作時(shí)饲齐，代碼暫停執(zhí)行，等耗時(shí)代碼執(zhí)行完畢咧最，再繼續(xù)向后執(zhí)行捂人。
二、創(chuàng)建并配置ajax
1矢沿、創(chuàng)建xhr對象
var xhr=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');
2滥搭、請求配置參數(shù)：open()
xhr.open('GET','./data.json',true);
//第一個(gè)參數(shù)：設(shè)置請求方法：GET/POST/PUT...
//第二個(gè)參數(shù)：請求路徑：相對路徑（如果請求的是同一臺服務(wù)器的文件，使用相對路徑'./data.json'）捣鲸、
//絕對路徑（如果請求的是服務(wù)器中的某一個(gè)數(shù)據(jù)接口瑟匆，則需要使用絕對路徑'http://www.baidu.xom/data/json'），
//如果請求參數(shù)是GET則在路徑后面拼接所傳參數(shù)'./data.json?username='+encodeURI('張三')栽惶，
//接口和參數(shù)之間使用“愁溜？”鏈接疾嗅，參數(shù)和參數(shù) 之間使用“&”鏈接，key值和value值之間使用“=”鏈接冕象。
//第三個(gè)參數(shù)：配置請求是否為異步請求代承，默認(rèn)不給值時(shí)為true，表示異步請求渐扮，false為同步請求
3论悴、發(fā)送請求：send()
xhr.send(null);
//如果請求方式是POST，則在這里放所傳遞的參數(shù)
4墓律、設(shè)置請求狀態(tài)：readystatechange事件在每次請求狀態(tài)發(fā)生改變膀估，都會觸發(fā)該事件。
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
//當(dāng)readyState屬性值為4只锻，且status屬性值為200-300之間(一般是200)表示服務(wù)器已經(jīng)把數(shù)據(jù)返回回來玖像。
//從xhr下的responseText屬性中拿到服務(wù)器返回的值
console.log(xhr.responseText);
}
}
如果傳遞的參數(shù)中含有中文需要對中文進(jìn)行轉(zhuǎn)碼，encodeURI()只能對中文進(jìn)行轉(zhuǎn)碼齐饮。
var str=encodeURI('張三');
XHR 對象的 readyState 屬性：
- 0：未初始化捐寥。尚未調(diào)用 open() 方法。
- 1：啟動(dòng)祖驱。已經(jīng)調(diào)用 open() 方法握恳，但尚未調(diào)用 send() 方法。
- 2：發(fā)送捺僻。已經(jīng)調(diào)用 send() 方法乡洼，但尚未接收響應(yīng)。
- 3：接收匕坯。已經(jīng)接收到部分響應(yīng)數(shù)據(jù)束昵。
- 4：完成。已經(jīng)接收到全部響應(yīng)數(shù)據(jù)葛峻，而且已經(jīng)可以在客戶端使用了
XHR對象的屬性：
*responseText: 作為響應(yīng)主體被返回的文本锹雏。
*responseXML: 如果響應(yīng)的內(nèi)容類型是 “text/xml”或”application/xml”，這個(gè)屬性中將保存包含著相應(yīng)數(shù)據(jù)的XML DOM文檔术奖。
- status: 響應(yīng)的HTTP狀態(tài)礁遵。
- statusText: HTTP狀態(tài)的說明。
接受響應(yīng)之后采记，第一步是檢查 status 屬性佣耐，以確定響應(yīng)已經(jīng)成功返回。狀態(tài)碼： - 200 表示成功唧龄。
- 304 表示請求的資源并沒有修改兼砖，可以直接使用瀏覽器中緩存的版本，響應(yīng)也是有效的。
- 500表示服務(wù)器錯(cuò)誤掖鱼。
三然走、請求參數(shù)注意事項(xiàng)
請求服務(wù)器，服務(wù)器會有數(shù)據(jù)緩存戏挡，如果兩次請求一樣芍瑞，第二次會直接使用緩存中的數(shù)據(jù)。
解決方法：在傳遞參數(shù)時(shí)在URL后面添加一個(gè)隨機(jī)數(shù)褐墅，Math.random()拆檬。這種方法也不會對服務(wù)器造成影響。
ajax發(fā)送的get請求妥凳，瀏覽器會首先獲取到請求路徑竟贯，用這個(gè)路徑去匹配緩存中的請求記錄，如果記錄中存在一個(gè)一模一樣的請求路徑逝钥，則把記錄中的緩存的服務(wù)器返回值發(fā)送回來屑那，只有在沒有找到對應(yīng)記錄的情況下，才會向服務(wù)器請求數(shù)據(jù)艘款。
解決get請求緩存問題：在請求的路徑后拼接一個(gè)隨機(jī)數(shù)為接口參數(shù)持际，這樣每次發(fā)起的請求路徑會因?yàn)檫@個(gè)隨機(jī)數(shù)變得不同，瀏覽器在記錄中無法找到這條記錄哗咆，因此就會從服務(wù)器獲取最新的數(shù)據(jù)了蜘欲。
經(jīng)驗(yàn)：密碼中有&或者=會導(dǎo)致密碼失效
四、使用ajax請求xml和json的不同
//1晌柬、創(chuàng)建請求對象
var xhr=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');
//2姥份、配置請求參數(shù)
xhr.open('GET','./data.xml',true);
//xhr.open('GET','./data.json',true);
//3、發(fā)送請求
xhr.send(null);
//4年碘、監(jiān)聽請求狀態(tài)
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
//獲取json格式的數(shù)據(jù)澈歉，通過responseText屬性獲取的，拿到的數(shù)據(jù)時(shí)字符串類型屿衅，
//可以通過parse方法把字符串格式的json數(shù)據(jù)轉(zhuǎn)為對象類型埃难。
console.log(xhr.responseText);
//把json數(shù)據(jù)轉(zhuǎn)為對象類型的數(shù)據(jù)
var obj=JSON.parse(xhr.responseText);
console.log(obj);
//獲取xml格式的數(shù)據(jù)
//如果請求的數(shù)據(jù)時(shí)xml格式“了校可以通過responseXML屬性獲取到該數(shù)據(jù)的DOM結(jié)構(gòu)凯砍，有利于數(shù)據(jù)解析箱硕∷┲瘢可以用節(jié)點(diǎn)獲取數(shù)據(jù)。
console.log(xhr.responseXML);
}
}
