一贩绕、ajax是什么?
ajax: asynchronous javascript and xml: 異步的javascript和xml吉捶。
ajax是一種用來(lái)改善用戶體驗(yàn)的技術(shù)斩松，其本質(zhì)是利用瀏覽器內(nèi)置的一種特殊的對(duì)象(XMLHttpRequest)異步(即發(fā)送請(qǐng)求時(shí)变勇，瀏覽器不會(huì)銷毀當(dāng)前頁(yè)面禀苦，用戶可以繼續(xù)在當(dāng)前頁(yè)面做其它的操作)的向服務(wù)器發(fā)送請(qǐng)求,并且利用服務(wù)器返回的數(shù)據(jù)(不再是一個(gè)完整的頁(yè)面站绪，只是部分的數(shù)據(jù)遭铺，一般使用文本或者xml返回)來(lái)部分更新當(dāng)前頁(yè)面。
使用ajax技術(shù)之后恢准，頁(yè)面無(wú)刷新魂挂，并且不打斷用戶的操作。
二馁筐、ajax編程的基本步驟
- 獲取ajax對(duì)象(XmlHttpRequest)
- 使用 XmlHttpRequest向服務(wù)器發(fā)送請(qǐng)求
- 在服務(wù)器端處理請(qǐng)求
- 在監(jiān)聽(tīng)器當(dāng)中涂召，處理服務(wù)器返回的響應(yīng)
其中：ajax對(duì)象的屬性
a. onreadystatechange: 綁訂一個(gè)事件處理函數(shù)(即: 注冊(cè)一個(gè)監(jiān)聽(tīng)器)
當(dāng)ajax對(duì)象的readyState值發(fā)生了改變(比如， 從0-->1)敏沉，就會(huì)產(chǎn)生readystatechange事件果正。
b. responseText: 獲得服務(wù)器返回的文本
c. responseXML: 獲得服務(wù)器返回的XML dom對(duì)象
d. status: 獲得狀態(tài)碼
e. readyState: 返回ajax對(duì)象與服務(wù)器通訊的狀態(tài)。返回值是一個(gè)number類型的值盟迟，不同的值表示不同的含義:
0: (為初始化) --> 對(duì)象已建立秋泳，但是尚未初始化(尚未調(diào)用 open方法)
1: (初始化) --> 對(duì)象已建立，尚未調(diào)用send方法
2: (發(fā)送數(shù)據(jù)) --> send方法已調(diào)用
3: (數(shù)據(jù)傳送中) --> 已接受部分?jǐn)?shù)據(jù)
4: (響應(yīng)結(jié)束) --> 接收了所有的數(shù)據(jù)
三. 選擇POST還是GET
如果請(qǐng)求不改變服務(wù)器狀態(tài)只是取回?cái)?shù)據(jù)則使用GET.GET請(qǐng)求被緩存起來(lái),如果多次提取相同的數(shù)據(jù)可提高性能;只有當(dāng)URL和參數(shù)的長(zhǎng)度大于2048個(gè)字符時(shí)才使用POST提取數(shù)據(jù)在IE下URL過(guò)長(zhǎng)會(huì)導(dǎo)致請(qǐng)求參數(shù)被截?cái)?
完整封裝代碼：
//小工具函數(shù)攒菠，把Json對(duì)象轉(zhuǎn)URL字符串迫皱；
function json2url(json){
json.t = Math.random();
var arr = [];
for(var name in json){
arr.push(name+'='+encodeURIComponent(json[name]));
}
return arr.join('&');
}
//Aja函數(shù)封裝，接收一個(gè)Json對(duì)象
/*
url:服務(wù)器地址
data：數(shù)據(jù)
type：發(fā)送方式辖众，默認(rèn)GET
timeout:超時(shí)時(shí)間卓起，默認(rèn)5s
success:成功回調(diào)函數(shù)
error:失敗回調(diào)函數(shù)
*/
function ajax(json){
var json = json||{};
if(!json.url)return;
json.data = json.data || {};
json.type = json.type || 'get';
json.timeout = json.timeout || 5000;
//獲取Ajax對(duì)象，XMLHttpRequest并沒(méi)有標(biāo)準(zhǔn)化赵辕，要區(qū)分瀏覽器
if(window.XMLHttpRequest){
//非IE瀏覽器
var oAjax = new XMLHttpRequest();
}else{
//IE瀏覽器
var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
}
switch(json.type.toLowerCase()){
case 'get':
oAjax.open('GET',json.url+'?'+json2url(json.data),true);
oAjax.send();
break;
case 'post':
oAjax.open('POST',json.url,true);
//因?yàn)榘凑説ttp協(xié)議的要求既绩，如果發(fā)送的post請(qǐng)求，請(qǐng)求數(shù)據(jù)包里面还惠，應(yīng)該有一個(gè)消息頭 content-type饲握。但是，ajax對(duì)象默認(rèn)沒(méi)有蚕键，所以救欧，需要調(diào)用setRequestHeader方法。
oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
oAjax.send(json2url(json.data));
break;
}
var timer = setTimeout(function(){
oAjax.onreadystatechange=null;
json.error&&json.error('親锣光，網(wǎng)絡(luò)不給力');
},json.timeout);
oAjax.onreadystatechange=function(){
if(oAjax.readyState==4){
clearTimeout(timer);
if(oAjax.status>=200&&oAjax.status<300||oAjax.status==304){
json.success&&json.success(oAjax.responseText);
}else{
json.error&&json.error(oAjax.status);
}
}
};
}
