簡單自己封裝一個AJAX

我們先說一下使用AJAX發起一個請求的過程

1. 創建一個XMLHttpRequest對象的實例，

 var xmlHttpRequest = new XmlHttpRequest();
 //完整的過程
 var xhttp;
     if (window.XMLHttpRequest) {
          //現代主流瀏覽器
          xhttp = new XMLHttpRequest();
      } else {
          // 針對瀏覽器，比如IE5或IE6
          xhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }

2. 設置該實例請求發向目標，發起的方式，get還是post，並可以配置一些ajax的選項

xhttp.open("get/post", "url", true);
//true表示是否爲同步，true則爲同步，否則爲異

3. 設置該實例的響應函數

req.onreadystatechange = function () {
    //代碼先略過不寫，後面再具體細說
}

4. 發送請求

xhttp.send();//發送請求

5. 使用XmlHttpRequest對象的responseText或responseXML屬性獲得服務器響應報文，
6. 獲得狀態碼。表示請求未被初始化 1表示服務器連接成功 2表示請求被服務器接收 3表示處理請求 4表示請求處理完成

xhttp.status == 200 && xhttp.onreadystatechange==4　

手動封裝一個類似jQuery類似的AJAX方法（簡單版）

 myAjax(options).success(成功時執行的回調函數).fail(失敗時執行的回調函數)

1.建立一個myAjax對象類

var myAjax = function (options) {
  //創建一個空對象，之後將返回它
  var obj = {}
  //分別表示成功和失敗時，執行函數的變量
  var successCallback = function () {}
  var failCallback = function () {}

  //回調函數作爲參數傳入，賦值給內置的變量
  //由於可以連寫，因此確保done和fail兩個方法，在執行後的返回值也需要是obj對象（不然無法連寫了）
  obj.success = function (success2) {
    successCallback = success2;
    return obj;
  }
  obj.fail = function (fail2) {
    failCallback = fail2;
    return obj;
  }
  

  //...
  // 一些中間省略掉的代碼
  return obj;
}

2.options 屬性檢查

  //對象類型檢查，首先要求參數必須是對象
  //然後如果url或者type類型需要是字符串
  if (!(options instanceof Object) || (typeof options.url !== 'string') || (typeof options.type !== 'string')) {
    //給個報錯的提示信息唄
    console.error("error arguments for ajax");
    return obj;
  }

3.data屬性檢查判斷

//只有有data屬性的時候才需要進行處理，
  if(typeof options.data!=='undefined'){
     //假如data屬性是一個函數，那麼跳過，就當沒有
    if(typeof options.data!=='function'){
      // 加入data屬性是不是get方法，則data直接放進請求頭
      if(options.data.toLowerCase()!=='get'){
        if(typeof JSON.stringify!=='function'){
          console.error("can't use JSON.stringify(), so can't Ajax by post when type of data is object");
          return obj;
        }
        //轉化爲json字符串，放進data請求頭中去。
        var data = JSON.stringify(options.data)
      }else{
        //肯定是get方法
        //data屬性是string類型或number類型的話，則直接放進url中
        if(typeof options.data=='string'||typeof options.data=='number'){
          var data = options.data;
        }else if(options.data instanceof Object){
          //data屬性是object類型，將對象改爲&連接的形式放進url中
          var tempArray = [];
          for(j in options.data){
            if(typeof options.data[j]!=='object'&& typeof options.data[j]!=='function'){
              tempArray.push(j+'='+options.data[j]);
            }
          }
          if(tempArray.length>0){
            var data =tempArray.join("&")
          }
         
      }
    }
  }
}

4.創建ajax實例

  var req = new XMLHttpRequest();

  req.onreadystatechange = function () {
    console.log(this);
    //當屬性值不是4的時候，說明ajax沒有完成，因此返回不做處理
    if (this.readyState !== 4) {
      return;
    }

    //  當ajax的請求完成後，status狀態碼會發生改變
    //  其值來源於Http的頭部的Status Code屬性
    //  可以打開chrome控制檯，查看network；
    //  然後選擇一項請求後查看Headers選項卡中，General中的Status Code屬性
    //  當值爲200時，說明成功獲取，否則失敗
    if (this.status === 200) {

      //success是用戶自己寫的處理回調函數，我們將返回值作爲參數傳遞
      //並執行用戶自定義的回調函數
      successCallback(this.response);
    } else {

      //fail則是用戶寫的失敗處理函數，同樣將錯誤文本作爲參數傳遞，並執行之
      failCallback(this.statusText);
    }
  }
  if (options.type.toLowerCase() === 'get') {
    if (typeof data !== 'undefined') {
      req.open(options.type, options.url + "?" + data, true);

      //發送請求，並返回
      req.send();
    } else {
      req.open(options.type, options.url, true);
      req.send();
    }

  } else {
    req.open(options.type, options.url, true);
    if (typeof data !== 'undefined') {

      //如果存在，那麼顯然是JSON格式字符串（因爲我們前面已經處理過了）

      //但是在發送前，我們需要設置一下請求頭的Content-Type屬性，告訴服務器我們發送的是一個json
      req.setRequestHeader("Content-Type", "application/json");

      //然後再發送
      req.send(options.data)
    } else {
      //不然直接發送就行
      req.send();
    }
  }

這是對ajax採用myAjax（options）.success（successCallback）.fail(failCallbacl)的方式進行的一次封裝，方法可能較爲之簡單，大家有什麼疑惑歡迎留言，謝謝各位