自己如何建立ajax？建立ajax的步驟詳解（附執行個體解析）

本篇文章主要講述了關於如何自己建立一個ajax的案例，現在就讓我們一起來看看這篇文章吧

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

ajax的用處是向後台請求資料的，其特點是非同步請求資料(無重新整理讀取資料)，在ajax沒有出現之前，如果填寫一個項目比較多的表單對使用者來說簡直是一個噩夢，如果中間哪一個環節填錯了，則在最終提交的時候出現報錯，然後就是需要重新填寫，經過幾次填寫過後使用者就失去了填寫的慾望了。然後在ajax出現後這一問題得到了很好地解決，每填一個項目則會通過伺服器驗證結果並返回結果，在一定程度上提高了效率，並給使用者帶來了更好的體驗。（想看更多就到topic.alibabacloud.comAJAX開發手冊欄目中學習）

現在就來講解使用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,errorfunction 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){//1var oAjax=new XMLHttpRequest();}else{var oAjax=new ActiveXObject('Microsoft.XMLHTTP');}if(options.type=='get'){oAjax.open('get',options.url+'?'+str,true);//2oAjax.send();//3}else{//postoAjax.open('post',options.url,true);//設定ajax的頭資訊oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');oAjax.send(str);}oAjax.onreadystatechange=function(){//4if(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);}});

本篇文章到這就結束了（想看更多就到topic.alibabacloud.comAJAX使用手冊欄目中學習），有問題的可以在下方留言提問。