Ajax技術(shù)
核心：XMLHttpRequest 對(duì)象(簡(jiǎn)稱 XHR)
提供了向服務(wù)器發(fā)送請(qǐng)求和解析服務(wù)器響應(yīng)提供了流暢的接口。
能夠以異步方式從服務(wù)器獲取更多的信息。
使用XHR對(duì)象條件：
1、調(diào)用open()方法，這個(gè)方法并不會(huì)真正發(fā)送請(qǐng)求，而只是啟動(dòng)一個(gè)請(qǐng)求以備發(fā)送。
Open（）方法接受三個(gè)參數(shù)：（1）請(qǐng)求類型（get、post）
（2）請(qǐng)求的URL
（3）表示是否異步
Send()方法進(jìn)行發(fā)送請(qǐng)求，接受一個(gè)參數(shù)，作為請(qǐng)求主體發(fā)送的數(shù)據(jù)，如果不需要，則必須填null，執(zhí)行send（）方法之后，請(qǐng)求就會(huì)發(fā)送到服務(wù)器上了。
2、發(fā)送請(qǐng)求的步驟
1）得到XMLHttpRequest對(duì)象
new XMLHttpRequest()
2）準(zhǔn)備請(qǐng)求
xhr.open(請(qǐng)求類型GET/POST,請(qǐng)求的URL,是否異步)；
3）發(fā)送請(qǐng)求?
xhr.send([參數(shù)])
注：如果是GET請(qǐng)求，請(qǐng)求的參數(shù)設(shè)置在url的后面，所以send(null)
? ? ? 如果是POST請(qǐng)求，無參數(shù)設(shè)置為null，有參數(shù)則設(shè)置參數(shù)即可
4）判斷響應(yīng)狀態(tài)，得到后臺(tái)響應(yīng)
Xhr.responserText;
當(dāng)請(qǐng)求發(fā)送到服務(wù)器端，收到響應(yīng)后，響應(yīng)數(shù)據(jù)會(huì)自動(dòng)填充XHR對(duì)象的屬性；
屬性名? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 說明
responseText? ? ? ? ? ? ? ? ? ? ? 作為響應(yīng)主體被返回的文本
responseXML? ? ? ? ? ? ? ? ? ? 如果響應(yīng)主體內(nèi)容類型是"text/xml"或"application/xml"，
則返回包含響應(yīng)數(shù)據(jù)的 XML DOM 文檔
status? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 響應(yīng)的 HTTP 狀態(tài)
statusText? ? ? ? ? ? ? ? ? ? ? ? HTTP 狀態(tài)的說明
注意：接受到響應(yīng)后，第一步檢查status屬性，以確定響應(yīng)已經(jīng)成功返回。一般情況下HTTP狀態(tài)代碼為200作為成功的標(biāo)志。
同步調(diào)用固然簡(jiǎn)單，但使用異步調(diào)用才是我們真正常用的手段。
使用異步調(diào)的時(shí)候，檢測(cè) readyState 屬性,每當(dāng) readyState 屬性改變時(shí)，觸發(fā)readystatechange 事件。
這個(gè)屬性有五個(gè)值：
值 狀態(tài) 說明
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ù)，而且可以使用
封裝Ajax
1、 得到XMLHttpRequest對(duì)象
new XMLHttpRequest()
2、 打開請(qǐng)求
Open(請(qǐng)求類型GET/POST,請(qǐng)求的URL，是否異步)
注：這三個(gè)參數(shù)是由調(diào)用傳遞
判斷如果是POST請(qǐng)求，請(qǐng)求路徑直接設(shè)置即可，如果是GET，需要拼接請(qǐng)求參數(shù)。
3、 發(fā)出請(qǐng)求
xhr.send([參數(shù)])
注：如果是GET，請(qǐng)求的參數(shù)設(shè)置在URL的后面，所以send（null）
如果是POST請(qǐng)求，無參數(shù)設(shè)置為null，有參數(shù)則設(shè)置參數(shù)即可。
4、 判斷響應(yīng)狀態(tài)，得到后臺(tái)響應(yīng)
xhr.responseText;
注：判斷是否是異步請(qǐng)求，如果是同步則直接獲取響應(yīng)數(shù)據(jù)，如果是異步，則需要判斷數(shù)據(jù)是否完全響應(yīng)（readyState==4）,再獲取響應(yīng)的數(shù)據(jù)。
//A用戶
var userA={
type:”GET”,
url: "js/data.json?a=1",
data:{
uname: "zhangsan",
upwd:"123456"
},
async:true,
success:function(result){
console.log(result);
},
error:function(result) {
console.log(result);
}
};
ajax(userA);
// 用戶B
var userB = {
type:"POST",
url:"js/data.json",
data:{
uname:"zhangsan",
upwd:"123456"
},
async:false,
success:function(result){
alert(result);
},
error:function(result) {
console.log(result);
}
};
ajax(userB);
ajax({
type:"POST",
url:"js/data.json",
data:{
uname:"zhangsan",
upwd:"123456"
},
async:false,
success:function(result){
alert(result);
},
error:function(result) {
console.log(result);
}
});
封裝Ajax
Function ajax(obj){
//01得到對(duì)象
var xhr=new new XMLHttpRequest();
//格式化參數(shù)
obj.data=formatParam(obj.data);
//判斷施工是GET請(qǐng)求
if(obj.type.toUpperCase()==”GET”){
//GET請(qǐng)求拼接參數(shù)
obj.url+=( obj.url).indexOf(“?”)>-1?”&”+ obj.data : "?" +obj.data;
}
//02打開請(qǐng)求
xhr.open(obj.type,obj.url,obj.async);
//03發(fā)送請(qǐng)求
if(obj.type.toUpperCase() == "POST"){
//如果是post請(qǐng)求，模擬表達(dá)提交
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//發(fā)送請(qǐng)求
xhr.send(obj.data);
}else{
//是get請(qǐng)求
xhr.send(null);
}
//04判斷響應(yīng)狀態(tài)
//判斷是否是異步請(qǐng)求
if(obj.async){
// 如果是異步請(qǐng)求，需要先知道數(shù)據(jù)是否完全響應(yīng)
// 監(jiān)聽readyState的值的變化
xhr.onreadystatechange = function(){
// 判斷是否完全響應(yīng)，即readyState的值等于4
If(xhr.readyState == 4){
callback();
}
}
}else{
//同步請(qǐng)求
callback();
}
//獲取響應(yīng)結(jié)果
function? callback(){
if(xhr.status==200){
var responseTxt = xhr.responseText;
//調(diào)用成功的回調(diào)函數(shù)；
obj.success(responseTxt);
}else{
//調(diào)用失敗的回調(diào)函數(shù)
obj.error("狀態(tài)碼：" + xhr.status + "，錯(cuò)誤信息：" + xhr.responseText);
}
}
}
/*將對(duì)象形式的參數(shù)轉(zhuǎn)換成字符串*/
function? formatParam(data){
var arr=[];
for(var key in data){
var? str=key+”=”+data[key];
//將數(shù)組追加到數(shù)組中
Arr.push(str);
}
var? params=arr.join(“&”);
return? params;
}
Jquery? 的 ajax
1、 jQuery調(diào)用ajax
格式：$.ajax({});
參數(shù)：
type：請(qǐng)求方式 GET/POST
url：請(qǐng)求地址 url
async：是否異步，默認(rèn)是 true 表示異步
data：發(fā)送到服務(wù)器的數(shù)據(jù)
dataType：預(yù)期服務(wù)器返回的數(shù)據(jù)類型
contentType：設(shè)置請(qǐng)求頭
success：請(qǐng)求成功時(shí)調(diào)用此函數(shù)
error：請(qǐng)求失敗時(shí)調(diào)用此函數(shù)
2、$.get()
這是一個(gè)簡(jiǎn)單的 GET 請(qǐng)求功能以取代復(fù)雜 $.ajax 。
請(qǐng)求成功時(shí)可調(diào)用回調(diào)函數(shù)。如果需要在出錯(cuò)時(shí)執(zhí)行函數(shù)，請(qǐng)使用 $.ajax。
3、$.post()
這是一個(gè)簡(jiǎn)單的 POST 請(qǐng)求功能以取代復(fù)雜 $.ajax 。
請(qǐng)求成功時(shí)可調(diào)用回調(diào)函數(shù)。如果需要在出錯(cuò)時(shí)執(zhí)行函數(shù)，請(qǐng)使用 $.ajax。
4、$.getJSON()
表示請(qǐng)求返回的數(shù)據(jù)類型是 JSON 格式的 ajax 請(qǐng)求
5、 jsonp
遠(yuǎn)程跨域時(shí)，如果有兩個(gè)域名，從其中一個(gè)域名去訪問另一個(gè)域名時(shí)，使用
普通的 ajax 方法是獲取不到數(shù)據(jù)的，那么就可以使用 jsonp 方式發(fā)送請(qǐng)求。
添加屬性：
jsonp:’callback’
dataType:’jsonp’
