眾所周知，框架之間會有衝突，這是源生js就起到作用了，下面介紹一種源生js封裝的ajax請求。

function ajax(options) {
  options = options || {};
  options.type = (options.type || "GET").toUpperCase();
  options.dataType = options.dataType || "json";
  var params = formatParams(options.data);
  //建立xhr物件 - 非IE6
  if (window.XMLHttpRequest) {
    var xhr = new XMLHttpRequest();
  } else { //IE6及其以下版本瀏覽器
    var xhr = new ActiveXObject('Microsoft.XMLHTTP');
  }
  //GET POST 兩種請求方式
  if (options.type == "GET") {
    xhr.open("GET", options.url + "?" + params, true);
    xhr.send(null);
  } else if (options.type == "POST") {
    xhr.open("POST", options.url, true);
    //設定表單提交時的內容型別
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send(params);
  }
  //接收
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      var status = xhr.status;
      if (status >= 200 && status < 300) {
        options.success && options.success(xhr.responseText);
      } else {
        options.fail && options.fail(status);
      }
    }
  }
}
//格式化引數
function formatParams(data) {
  var arr = [];
  for (var name in data) {
    arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
  }
  arr.push(("v=" + Math.random()).replace(".",""));
  return arr.join("&");
}
 

呼叫方法

ajax({
  url: "data.json",
  type: "GET",
  data: {},
  dataType: "json",
  success: function (response) {
    // 此處放成功後執行的程式碼
     // 解析返回的字串 轉為json物件
    var usingdata = eval("("+response+")").data;
  }
  fail: function (status) {
    // 此處放失敗後執行的程式碼
  }
});

最後

為了幫助大家讓學習變得輕鬆、高效，給大家免費分享一大批資料，幫助大家在成為全棧工程師，乃至架構師的路上披荊斬棘。在這裡給大家推薦一個前端全棧學習交流圈：

當真正開始學習的時候難免不知道從哪入手，導致效率低下影響繼續學習的信心。

但最重要的是不知道哪些技術需要重點掌握，學習時頻繁踩坑，最終浪費大量時間，所以有有效資源還是很有必要的。

最後祝福所有遇到瓶疾且不知道怎麼辦的前端程式設計師們，祝福大家在往後的工作與面試中一切順利。