- 是對(duì)現(xiàn)有技術(shù)的綜合利用（xhtml+css；dom動(dòng)態(tài)的顯示和交互；xml和json進(jìn)行數(shù)據(jù)交換戴甩；XMLHttpRequest進(jìn)行異步數(shù)據(jù)查詢）
- 本質(zhì)：在HTTP協(xié)議的基礎(chǔ)上嗦哆，以異步的方式谤祖，通過(guò)XMLHttpRequest對(duì)象與服務(wù)器進(jìn)行通信。
- 作用：實(shí)現(xiàn)頁(yè)面數(shù)據(jù)的局部刷新老速。
image
異步：
定義：某段程序的執(zhí)行不阻塞其他程序的執(zhí)行粥喜，程序的執(zhí)行順序不依賴于程序本身的書(shū)寫(xiě)順序。
優(yōu)勢(shì)：不阻塞其他程序的執(zhí)行橘券，從而提升整體執(zhí)行效率额湘。
劣勢(shì)：如果存在多個(gè)異步程序，無(wú)法判斷它們的執(zhí)行先后順序旁舰。
- 使用異步對(duì)象發(fā)送get請(qǐng)求
document.querySelector("#username").onblur = function(){
// 1.獲取用戶數(shù)據(jù)
var name = this.value;
// 2锋华，讓異步對(duì)象發(fā)送請(qǐng)求
// 2.1 創(chuàng)建異步對(duì)象
var xhr = new XMLHttpRequest();
// 2.2 設(shè)置 請(qǐng)求行 open(請(qǐng)求方式，請(qǐng)求url):
// get請(qǐng)求如果有參數(shù)就需要在url后面拼接參數(shù)箭窜，
// post如果有參數(shù)毯焕，就在請(qǐng)求體中傳遞
xhr.open("get","validate.php?username="+name);
// 2.3 設(shè)置 請(qǐng)求頭 setRequestHeader('key':'value')
// get方式不需要設(shè)置請(qǐng)求頭
// post需要設(shè)置 Content-Type:application/x-www-form-urlencoded
// 2.4 設(shè)置 請(qǐng)求體:發(fā)送請(qǐng)求 send(參數(shù)：key=value&key=value)
// 如果有參數(shù)，post應(yīng)該在這個(gè)位置來(lái)傳遞參數(shù)
// 對(duì)于 get請(qǐng)求不需要在這個(gè)位置來(lái)傳遞參數(shù)
xhr.send(null);
// 響應(yīng)報(bào)文：
// 報(bào)文行：響應(yīng)狀態(tài)碼 響應(yīng)狀態(tài)信息 200 ok
// 報(bào)文頭：服務(wù)器返回給客戶端的一些額外信息
// 報(bào)文體：服務(wù)器返回給客戶端的數(shù)據(jù) responseText:普通字符串 responseXML：符合x(chóng)ml格式的字符串
// xhr.status:可以獲取當(dāng)前服務(wù)器的響應(yīng)狀態(tài) 200 》成功
console.log(xhr.status);
// 一個(gè)真正成功的響應(yīng)應(yīng)該兩個(gè)方面：1.服務(wù)器成功響應(yīng) 2.數(shù)據(jù)已經(jīng)回到客戶端并且可以使用了
// 監(jiān)聽(tīng)異步對(duì)象的響應(yīng)狀態(tài) readystate
// 0:創(chuàng)建了異步對(duì)象磺樱，但是還沒(méi)有真正的去發(fā)送請(qǐng)求
// 1.調(diào)用了send方法纳猫，正在發(fā)送請(qǐng)求
// 2.send方法執(zhí)行完畢了，已經(jīng)收到服務(wù)器的響應(yīng)內(nèi)容--原始內(nèi)容坊罢，還不可以使用
// 3.正在解析數(shù)據(jù)
// 4.響應(yīng)內(nèi)容解析完畢续担，可以使用了
xhr.onreadystatechange = function(){
if(xhr.status == 200 && xhr.readyState == 4){
console.log(xhr.responseText);
console.log("-----------");
document.querySelector(".showmsg").innerHTML = xhr.responseText;;
}
}
};
- 使用異步對(duì)象發(fā)送post請(qǐng)求
document.querySelector("#username").onblur = function(){
// 1.獲取用戶數(shù)據(jù)
var name = this.value;
// 2\. 讓異步對(duì)象發(fā)送post請(qǐng)求
// 2.1 創(chuàng)建異步對(duì)象
var xhr = new XMLHttpRequest();
// 2.2 設(shè)置請(qǐng)求行 open(請(qǐng)求方式擅耽，請(qǐng)求url)
// 1.get 需要在url后面拼接參數(shù)(如果有參數(shù))
// 2.post請(qǐng)求不需要拼接參數(shù)
xhr.open("post","validate.php");
// 2.3 設(shè)置請(qǐng)求頭:setRequestHeader()
// 1.get不需要設(shè)置
// 2.post需要設(shè)置請(qǐng)求頭：Content-Type:application/x-www-form-urlencoded
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// .如果沒(méi)有設(shè)置活孩，參數(shù)無(wú)法正確的傳遞到服務(wù)器(本質(zhì)上說(shuō)，如果沒(méi)有參數(shù)乖仇，也不一定需要設(shè)置憾儒，不會(huì)影響請(qǐng)求的發(fā)送)
// 2.4 設(shè)置請(qǐng)求體 send()
// 1.get的參數(shù)在url拼接了，所以不需要在這個(gè)函數(shù)中設(shè)置
// 2.post的參數(shù)在這個(gè)函數(shù)中設(shè)置(如果有參數(shù))
xhr.send("username="+name);
// 3.讓異步對(duì)象接收服務(wù)器的響應(yīng)數(shù)據(jù)
// 一個(gè)成功的響應(yīng)有兩個(gè)條件：1.服務(wù)器成功響應(yīng)了 2.異步對(duì)象的響應(yīng)狀態(tài)為4(數(shù)據(jù)解析完畢可以使用了)
// 當(dāng)異步對(duì)象的響應(yīng)狀態(tài)發(fā)生改變的時(shí)候乃沙，會(huì)觸發(fā)一個(gè)事件：onreadystatechange
xhr.onreadystatechange = function(){
// 判斷服務(wù)器是否響應(yīng) 判斷異步對(duì)象的響應(yīng)狀態(tài)
if(xhr.status == 200 && xhr.readyState == 4){
document.querySelector(".showmsg").innerHTML = xhr.responseText;
}
}
};
Ajax是對(duì)上述兩種請(qǐng)求的封裝起趾。
jQuery中的Ajax參數(shù)如下。
$.ajax({
type: "method", //請(qǐng)求方式 get post
url: "url", //請(qǐng)求url
data: "data", //請(qǐng)求需要傳遞的參數(shù)
dataType: "dataType", //服務(wù)器返回格式
beforeSend: function (param) {
}, //請(qǐng)求發(fā)起前調(diào)用
success: function (response) {
}, //請(qǐng)求成功之后的回調(diào)
complete: function (param) {
}, //響應(yīng)完成時(shí)調(diào)用（包括成功或失斁濉）
timeout: 1500 // 請(qǐng)求超時(shí)
});
