自己寫一個ajax


學習ajax一段時間了,現在來總結一下ajax的構建與功能。

ajax的用處是向后台請求數據的,其特點是異步請求數據(無刷新讀取數據),在ajax沒有出現之前,如果填寫一個項目比較多的表單對用戶來說簡直是一個噩夢,如果中間哪一個環節填錯了,則在最終提交的時候出現報錯,然后就是需要重新填寫,經過幾次填寫過后用戶就失去了填寫的欲望了。然后在ajax出現后這一問題得到了很好地解決,每填一個項目則會通過服務器驗證結果並返回結果,在一定程度上提高了效率,並給用戶帶來了更好的體驗。

現在就來講解使用ajax中所存在的一些問題:首先,在IE下面數據更新不及時(緩存引起的),用一個URL只讀取一次,所以需要在每次刷新的時候更改URL,然而在域名的?后的參數並不影響頁面的獲取,而因為URL的不同瀏覽器會重新加載頁面,這樣就解決了頁面的緩存的問題。可以傳url+'?t='+new Date().getTime();或者用Math.random()也是可以的;其次接收的數據格式有問題,這是就需要統一編碼;再次就是ajax讀取任何東西,返回來的都是字符,這時就需要我們自己對數據進行解析。接下來就自己寫一個ajax:

1.創建ajax對象 var oAjax=new XMLHttpRequest() ~高版本瀏覽器或new ActiveXObject('Microsoft.XMLHTTP')~IE

2.建立連接    oAjax.open(方式,地址,異步)

3.發送請求    oAjax.send();

4.接受     onreadystatechange讀取狀態改變時

 oAjax.readyState 狀態碼

0.  ajax對象剛被創建出來(new 了一個ajax對象)

1.  與服務器連接上(open方法剛執行)

2.  發送完成

3.  接收完成(文件頭部)

4. 接收完成(身子),內容請求失敗也會有4

其中http狀態碼:

oAjax.status      200<=n<300或n==304     表示發送成功

oAjax.responseText 返回數據

 encodeURIComponent(str)           字符串作為URI 組件進行編

ajax:

//data 后台要的數據
//options=url,data,type,timeout,success,error
function ajax(options){

options=options||{};
options.data=options.data||{};
options.type=options.type||'get';
options.timeout=options.timeout||0;


//整理data數據
options.data.t=Math.random();//給data創建一個t 鍵
var arr=[];
for(var key in options.data){
arr.push(key+'='+encodeURIComponent(options.data[key]));
}
var str=arr.join('&');

if(window.XMLHttpRequest){//1
var oAjax=new XMLHttpRequest();
}else{
var oAjax=new ActiveXObject('Microsoft.XMLHTTP');
}

if(options.type=='get'){
oAjax.open('get',options.url+'?'+str,true);//2

oAjax.send();//3
}else{//post
oAjax.open('post',options.url,true);

//設定ajax的頭信息
oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

oAjax.send(str);

}

oAjax.onreadystatechange=function(){//4
if(oAjax.readyState==4){
if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){
clearInterval(timer);
options.success && options.success(oAjax.responseText)
}else{
options.error && options.error(oAjax.status);
}
}
};
if(options.timeout){
var timer=setTimeout(function(){
alert('超時了');
oAjax.abort();//終止加載
},options.timeout);
}

}
1.創建ajax函數,因為ajax中的各個參數不定,而且排列位置也不同,所以要用到json做數據,傳入參數options,其中options為可選項,如果傳了就用傳了的數據,沒有傳的話就用默認的參數,其中有發送的方式type和超時時間設定以及data。

2.其中url需要在后面添加一些隨機的變量,所以可以先給data添加一個鍵options.data.t=Math.random();然后對url進行編碼,再對數據進行處理。

3.然后就判斷瀏覽器,對於chrome以及ff都支持window.XMLHttpRequest,而對於IE瀏覽器只支持ActiveXObject('Microsoft.XMLHTTP'),然后判斷其發送的類型,如果為get方式,則需要在url后面加上剛才設置的隨機數,然后就可以發送數據了oAjax.send();然而對於post方式還需要設定ajax的頭信息oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');然后再發送數據

4.對狀態改變時進行判斷oAjax.onreadystatechange當oAjax.readyState==4時表明接收完成此時再判斷狀態碼oAjax.status>=200 && oAjax.status<300 || oAjax.status==304時表明成功了此時進行成功時的回調函數,否則就是失敗了,此時返回狀態碼,告訴用戶。

5.在這中間可以設置一個定時器,當在設定的時間內還沒有獲取成功則表明超時了,此時需要終止加載oAjax.abort(),並且告訴用戶超時了,如果在設置的時間內加載成功了,則清除定時器。

此時ajax就封裝完畢了,調用時就簡單了

ajax({
data:{a:3,b:5},
url:'php/php_get.php',
success:function(str){
alert(str);
}
});



注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
  © 2014-2022 ITdaan.com 联系我们: