原生js封裝ajax代碼

標籤：伺服器   json   ext   tty   indexof   ons   read   調用   參數   

 

1、ajax函數封裝：

 1  /* 2   *author: Ivan 3   *date: 2014.06.01 4   *參數說明： 5   *opts: {‘選擇性參數‘} 6   **method: 請求方式:GET/POST,預設值:‘GET‘; 7   **url:    發送請求的地址, 預設值: 當前頁地址; 8   **data: string,json; 9   **async: 是否非同步:true/false,預設值:true;10   **cache: 是否緩衝：true/false,預設值:true;11   **contentType: HTTP頭資訊，預設值：‘application/x-www-form-urlencoded‘;12   **success: 請求成功後的回呼函數;13   **error: 請求失敗後的回呼函數;14 */
15  function ajax(opts){16      //一.設定預設參數17      var defaults = {    18              method: ‘GET‘,19                 url: ‘‘,20                data: ‘‘,        21               async: true,22               cache: true,23         contentType: ‘application/x-www-form-urlencoded‘,24             success: function (){},25               error: function (){}26          };    27  28      //二.使用者參數覆蓋預設參數    29      for(var key in opts){30          defaults[key] = opts[key];31      }32  33      //三.對資料進行處理34      if(typeof defaults.data === ‘object‘){    //處理 data35          var str = ‘‘;36          var value = ‘‘;37          for(var key in defaults.data){38              value = defaults.data[key];39              if( defaults.data[key].indexOf(‘&‘) !== -1 ) value = defaults.data[key].replace(/&/g, escape(‘&‘));   //對參數中有&進行相容處理40              if( key.indexOf(‘&‘) !== -1 )  key = key.replace(/&/g, escape(‘&‘));   //對參數中有&進行相容處理41              str += key + ‘=‘ + value + ‘&‘;42          }43          defaults.data = str.substring(0, str.length - 1);44      }45  46      defaults.method = defaults.method.toUpperCase();    //處理 method47  48      defaults.cache = defaults.cache ? ‘‘ : ‘&‘ + new Date().getTime() ;//處理 cache49  50      if(defaults.method === ‘GET‘ && (defaults.data || defaults.cache))    defaults.url += ‘?‘ + defaults.data + defaults.cache;    //處理 url    51      52      //四.開始編寫ajax53      //1.建立ajax對象54      var oXhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(‘Microsoft.XMLHTTP‘);55      //2.和伺服器建立聯絡，告訴伺服器你要取什麼檔案56      oXhr.open(defaults.method, defaults.url, defaults.async);57      //3.發送請求58      if(defaults.method === ‘GET‘)    59          oXhr.send(null);60      else{61          oXhr.setRequestHeader("Content-type", defaults.contentType);62          oXhr.send(defaults.data);63      }    64      //4.等待伺服器回應65      oXhr.onreadystatechange = function (){66          if(oXhr.readyState === 4){67              if(oXhr.status === 200)68                 defaults.success.call(oXhr, oXhr.responseText);69              else{70                  defaults.error();71             }72          }73      };74  }

 

2、ajax函數調用：

 1 //調用ajax函數 2  3 ajax({ 4   5  　　url: ‘1.php‘, 6   7  　　data: {name: ‘ivan‘, sex: ‘male‘, age: ‘23‘}, 8   9  　　success: function (data){ alert(‘返回資料是：‘ + data); }10  11  });12  13  ajax({14  15  　　url: ‘1.php‘,16  17  　　data: ‘name=ivan&sex=male&age=23‘,18  19  　　cache: false,20  21  　　success: function (data){ alert(‘返回資料是：‘ + data); }22  23  });

 

轉摘於：http://www.cnblogs.com/Ivangel/p/3825701.html?utm_source=tuicool&utm_medium=referral

感謝原作者

 

原生js封裝ajax代碼