jQuery之ajax實現篇

　　jQuery的ajax方法非常好用，這么好的東西，你想擁有一個屬於自己的ajax么？接下來，我們來自己做一個簡單的ajax吧。

實現功能

由於jq中的ajax方法是用了內置的deferred模塊，是Promise模式的一種實現，而我們這里沒有講過，所以我們就不使用這一模式啦。

我們只定義一個ajax方法，他可以簡單的get，post，jsonp請求就可以啦~~

var ajax = function () {
    
  //  做一些初始化，定義一些私有函數等
 
  return function () {
    // ajax主體代碼
  }
    
}()


ajax({
  url: myUrl,
  type: 'get',
  dataType: 'json',
  timeout: 1000,
  success: function (data, status) {
    console.log(data)
  },
  fail: function (err, status) {
    console.log(err)
  }
})

我們的ajax方法最后實現的功能如上所示，非常類似於jq。那我們還在等什么，開始吧。

整體思路

我們的ajax方法需要傳遞一個對象進去，這個對象中我們可以定義一些我們希望的屬性，我們就必須初始一下各種屬性

//默認請求參數
  var _options = {
    url: null,  // 請求連接
    type: 'GET',  // 請求類型
    data: null,  // post時請求體
    dataType: 'text',  // 返回請求的類型，有text/json兩種
    jsonp: 'callback',  // jsonp請求的標志，一般不改動
    jsonpCallback: 'jsonpCallback',  //jsonp請求的函數名
    async: true,   // 是否異步
    cache: true,   // 是否緩存
    timeout:null,  // 設置請求超時
    contentType: 'application/x-www-form-urlencoded',
    success: null,  // 請求成功回調函數
    fail: null   // 請求失敗回調
  }

以上我們定義了一大串請求有關的數據，接下來我們就開始ajax主體函數的書寫，現在的ajax方法是這樣了

var ajax = function () {

  //默認請求參數
  var _options = {
    url: null,
    type: 'GET',
    data: null,
    dataType: 'text',
    jsonp: 'callback',
    jsonpCallback: 'jsonpCallback',
    async: true,
    cache: true,
    timeout:null,
    contentType: 'application/x-www-form-urlencoded',
    success: null,
    fail: null
  }
  // ...
  return function (options) {
     // ...
  }
}()

我們可以想一下，ajax方法傳遞一個對象進來，我們是不是需要把我們設置的這個對象上的屬性來覆蓋掉初始化_options上面的那些屬性呢，肯定需要。那下面我們先寫一個簡單的繼承，如下：

var ajax = function () {

  //默認請求參數
  var _options = {
    url: null,
    type: 'GET',
    data: null,
    dataType: 'text',
    jsonp: 'callback',
    jsonpCallback: 'jsonpCallback',
    async: true,
    cache: true,
    timeout:null,
    contentType: 'application/x-www-form-urlencoded',
    success: null,
    fail: null
  }
  // 內部使用的繼承方法 var _extend = function(target,options) { if( typeof target !== 'object' || typeof options !== 'object' ) { return; } var copy ,clone, name; for( name in options ) { if(options.hasOwnProperty(name) && !target.hasOwnProperty(name)) { target[name] = options[name]; } } return target; }; // ...
  return function (options) {

    // 沒有傳參或者沒有url，拋出錯誤 if( !options || !options.url ) { throw('參數錯誤！'); } // 繼承操作 options.type = options.type.toUpperCase(); _extend(options,_options);  // ...
  }
}()

這個繼承方法，我們是把初始化的_options繼承到了options，為什么呢？因為我們這個_options對象不在ajax方法內部，我們需要使用它，但我們不能改變他，如果改變了他，下一次使用ajax方法將會崩潰。因此，我們緊緊是把配置的options對象沒有的屬性設置為初始值。

下面，我們就要發送請求了么？等等！好像jsonp請求不是xhr請求啊，他好像是將請求url當做script標簽的src值插入到頁面body中去實現的，哦，對了，我們先把jsonp請求處理一下再開始建立xhr請求的代碼吧。

var ajax = function () {

  //默認請求參數
  var _options = {
    url: null,
    type: 'GET',
    data: null,
    dataType: 'text',
    jsonp: 'callback',
    jsonpCallback: 'jsonpCallback',
    async: true,
    cache: true,
    timeout:null,
    contentType: 'application/x-www-form-urlencoded',
    success: null,
    fail: null
  }
  //  內部使用的繼承方法
  var _extend = function(target,options) {
    if( typeof target !== 'object' || typeof options !== 'object' ) {
      return;
    }
    var copy ,clone, name;
    for( name in options ) {
      if(options.hasOwnProperty(name) && !target.hasOwnProperty(name)) {
        target[name] = options[name];
      }
    }
    return target;
  };
  
  // jsonp處理函數 function _sendJsonpRequest(url,callbackName,succCallback) { var script = document.createElement('script'); script.type="text/javascript"; script.src=url; document.body.appendChild(script); // 如果用戶自己定義了回調函數，就用自己定義的，否則，調用success函數 window[callbackName] = window[callbackName] || succCallback; }  // ...
  return function (options) {

    // 沒有傳參或者沒有url，拋出錯誤
    if( !options || !options.url ) {
      throw('參數錯誤！');
    }

    // 繼承操作
    options.type = options.type.toUpperCase();
    _extend(options,_options);

    /*jsonp部分，直接返回*/ if( options.dataType === 'jsonp' ) { var jsonpUrl = options.url.indexOf('?') > -1 ? options.url: options.url + '?' + options.jsonp+ '=' + options.jsonpCallback; return _sendJsonpRequest(jsonpUrl,options.jsonpCallback,options.success); }  // ...
  }
}()

我們定義了一個_sendJsonpRequest函數，這個函數接收三個參數，第一個是jsonpUrl，第二個是jsonp的回調函數名，第三個是成功回調函數，我們在這個函數內建立一個src為jsonpUrl的script元素插入到body中，同時，確定了回調函數（如果我們定義了jsonpCallback函數就調用它，如果沒有就調用success回調，一般情況我們不去定義全局的jsonpCallback函數而傳遞success回調來完成jsonp請求）。

好，處理好jsonp請求后，我們開始處理xhr請求了。

var ajax = function () {

  //默認請求參數
  var _options = {
    url: null,
    type: 'GET',
    data: null,
    dataType: 'text',
    jsonp: 'callback',
    jsonpCallback: 'jsonpCallback',
    async: true,
    cache: true,
    timeout:null,
    contentType: 'application/x-www-form-urlencoded',
    success: null,
    fail: null
  }
  //  內部使用的繼承方法
  var _extend = function(target,options) {
    if( typeof target !== 'object' || typeof options !== 'object' ) {
      return;
    }
    var copy ,clone, name;
    for( name in options ) {
      if(options.hasOwnProperty(name) && !target.hasOwnProperty(name)) {
        target[name] = options[name];
      }
    }
    return target;
  };
  
  // jsonp處理函數
  function _sendJsonpRequest(url,callbackName,succCallback) {

    var script = document.createElement('script');

    script.type="text/javascript";
    script.src=url;

    document.body.appendChild(script);
    // 如果用戶自己定義了回調函數，就用自己定義的，否則，調用success函數
    window[callbackName] = window[callbackName] || succCallback;

  }
  
  // json轉化為字符串
  var _param = function(data) { var str = ''; if( !data || _empty(data)) { return str; } for(var key in data) { str += key + '='+ data[key]+'&' } str = str.slice(0,-1); return str; } //判斷對象是否為空
  var _empty = function(obj) { for(var key in obj) { return false; } return true; } // ...
  return function (options) {

    // 沒有傳參或者沒有url，拋出錯誤
    if( !options || !options.url ) {
      throw('參數錯誤！');
    }

    // 繼承操作
    options.type = options.type.toUpperCase();
    _extend(options,_options);

    /*jsonp部分，直接返回*/
    if( options.dataType === 'jsonp' ) {
      var jsonpUrl = options.url.indexOf('?') > -1 ? options.url: options.url +
        '?' + options.jsonp+ '=' + options.jsonpCallback;

     return  _sendJsonpRequest(jsonpUrl,options.jsonpCallback,options.success);
      
    }
    
     //XMLHttpRequest傳參無影響
    var xhr = new (window.XMLHttpRequest || ActiveXObject)('Microsoft.XMLHTTP'); // get搜索字符串
    var search = ''; // 將data序列化
    var param= _param(options.data) if( options.type === 'GET' ) { search = (options.url.indexOf('?') > -1 ? '&' : '?') + param; if(!options.cache) { search += '&radom='+Math.random(); } param = null; } // ...
  }
}()

首先，兼容ie創建xhr對象，XMLHttpRequest構造函數傳遞參數是無影響，然后我們定義了兩個輔助變量：search、param，前者用於get請求的查詢字串，后者用於post請求的send內容，我們定義了一個_param方法來講對象轉換為send方法參數的模式，就如你看到的那樣，下面我們做了get與post之間合理的search、param的賦值工作。接下來我們就可以發送請求書寫最激動人心的內容了。

最終的代碼如下

;

var ajax = function () {

  //默認請求參數
  var _options = {
    url: null,
    type: 'GET',
    data: null,
    dataType: 'text',
    jsonp: 'callback',
    jsonpCallback: 'jsonpCallback',
    async: true,
    cache: true,
    timeout:null,
    contentType: 'application/x-www-form-urlencoded',
    success: null,
    fail: null
  }


  // json轉化為字符串
  var _param = function(data) {
    var str = '';
    if( !data || _empty(data)) {
      return str;
    }
    for(var key in data) {
      str += key + '='+ data[key]+'&'
    }
    str = str.slice(0,-1);
    return str;
  }
  //判斷對象是否為空
  var _empty = function(obj) {
    for(var key in obj) {
      return false;
    }
    return true;
  }

  var _extend = function(target,options) {
    if( typeof target !== 'object' || typeof options !== 'object' ) {
      return;
    }
    var copy ,clone, name;
    for( name in options ) {
      if(options.hasOwnProperty(name) && !target.hasOwnProperty(name)) {
        target[name] = options[name];
      }
    }
    return target;
  };

  // 自定義text轉化json格式
  var parseJSON = function(text) { if(typeof text !== 'string') { return; } if( JSON && JSON.parse ) { return JSON.parse(text); } return (new Function('return '+text))(); } // jsonp處理函數
  function _sendJsonpRequest(url,callbackName,succCallback) {

    var script = document.createElement('script');

    script.type="text/javascript";
    script.src=url;

    document.body.appendChild(script);
    // 如果用戶自己定義了回調函數，就用自己定義的，否則，調用success函數
    window[callbackName] = window[callbackName] || succCallback;

  }


  return function (options) {

    // 沒有傳參或者沒有url，拋出錯誤
    if( !options || !options.url ) {
      throw('參數錯誤！');
    }

    // 繼承操作
    options.type = options.type.toUpperCase();
    _extend(options,_options);

    /*jsonp部分，直接返回*/
    if( options.dataType === 'jsonp' ) {
      var jsonpUrl = options.url.indexOf('?') > -1 ? options.url: options.url +
        '?' + options.jsonp+ '=' + options.jsonpCallback;

      _sendJsonpRequest(jsonpUrl,options.jsonpCallback,options.success);
      
      return;
    }

     //XMLHttpRequest傳參無影響
    var xhr = new (window.XMLHttpRequest || ActiveXObject)('Microsoft.XMLHTTP');

    // get搜索字符串
    var search = '';

    // 將data序列化
    var param= _param(options.data)

    if( options.type === 'GET' ) {
      search = (options.url.indexOf('?') > -1 ? '&' : '?') + param;
      if(!options.cache) {
        search += '&radom='+Math.random();
      }
      
      param = null;
    }

    xhr.open( options.type, options.url + search, options.async ); xhr.onreadystatechange = function() { if( xhr.readyState == 4 ) { if( xhr.status >= 200 && xhr.status < 300 || xhr.status == 304 ) { var text = xhr.responseText; // json格式轉換
          if(options.dataType == 'json') { text = parseJSON(text) } if( typeof options.success === 'function') { options.success(text,xhr.status) } }else { if(typeof options.fail === 'function') { options.fail('獲取失敗', 500) } } } } xhr.setRequestHeader('content-type',options.contentType); // get請求時param時null
 xhr.send(param); // 如果設置了超時，就定義
    if(typeof options.timeout === 'number') { // ie9+
      if( xhr.timeout ) { xhr.timeout = options.timeout; }else { setTimeout(function() { xhr.abort(); },options.timeout) } } }

}()

可以看到，我們很熟悉的xhr代碼，在這里，我們需要寫一個解析返回字串形成json格式對象的方法parseJSON，類似於jq中的parseJSON方法，如上所示。

我們還需要設置超時代碼，如果設置了請求超時，我們就如上定義。

注意：上面代碼中，由於懶，設置請求頭一行並沒有判斷是否在post請求下，你可以自己設置~~~。

結尾

一個簡單的ajax方法就完成了，你是否也完成了呢？如果你懂deferred，你可以嘗試着書寫為deferred格式，很簡單的~~~。

能力有限，水平一般，如有錯誤，請指正。