原生JS封裝AJAX

今天咱們來講說利用原生JS封裝AJAX.

jquery框架的AJAX方法確實很好用,但有時候咱們寫的頁面須要引入多個JS插件,不必定哪一個插件就會和jquery發生衝突,致使jquery用不了了.或者頁面比較簡單,不須要加劇瀏覽器的負擔,這時咱們本身封裝一個AJAX就是一個很好的辦法.

//將數據轉換成 a=1&b=2格式;
function json2url(json){
   var arr = [];
   //加隨機數防止緩存;
   json.t = Math.random();
   for(var name in json){
      arr.push(name+'='+json[name]);
   }
   return arr.join('&');
}

function ajax(json){
   //1.建立一個ajax對象;
   if(window.XMLHttpRequest){
      var oAjax = new XMLHttpRequest();
   }else{
      var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
   }

   //考慮默認值:
   if(!json.url){
      alert('請輸入合理的請求地址!');
      return;
   }
   json.type = json.type || 'get';
   json.time = json.time || 5000;
   json.data = json.data || {};

   //判斷用戶傳遞的是get仍是post請求:
   switch (json.type.toLowerCase()){
      case 'get':
         //2.打開請求；
         oAjax.open('get',json.url+'?'+json2url(json.data),true);
         //3.發送數據:
         oAjax.send();
         break;
      case 'post':
         //打開請求;
         oAjax.open('post',json.url,true);
         //設置請求頭;
         oAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
         //發送數據;
         oAjax.send(json2url(json.data));
   }
   //4.獲取響應數據
   oAjax.onreadystatechange = function() {
      if (oAjax.readyState == 4) {
         if (oAjax.status >= 200 && oAjax.status < 300 || oAjax.status == 304) {
            //若是外邊傳遞了成功的回調函數，那麼就執行,
            json.success && json.success(oAjax.responseText);
         } else {
            //若是外邊傳遞了失敗的回調函數，那麼就執行,
            json.error && json.error(oAjax.status);
         }
         clearTimeout(timer);//規定時間內取到數據後清除定時器;
      }
   };
   var timer;
   timer = setTimeout(function(){//設置網絡響應超時;
      alert('網絡響應超時,請稍後再試');
      oAjax.onreadystatechange = null;//網絡超時後清除事件;
   },json.time);
};

實際的運用:

 <script src="ajax3.js"></script>
    <script>
        window.onload = function(){
            var oBtn = document.getElementById('btn');

            oBtn.onclick = function(){
                ajax({
                    url:'post.php',
                    data:{
                        a:1,
                        b:2
                    },
                    type:'post',
                    success:function(res){
                        alert(res);
                    },
                    error:function(s){
                        alert(s);
                    }
                });
            }
        }
    </script>

但願對你有幫助,咱們明天見!

 

 

堅持!堅持!堅持!堅持!堅持!堅持!