原生JavaScript封裝的ajax方法示例

衆所周知，框架之間會有衝突，這是源生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) {
    // 此處放失敗後執行的代碼
  }
});

最後

爲了幫助你們讓學習變得輕鬆、高效，給你們免費分享一大批資料，幫助你們在成爲全棧工程師，乃至架構師的路上披荊斬棘。在這裏給你們推薦一個前端全棧學習交流圈：866109386.歡迎你們進羣交流討論，學習交流，共同進步。

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

但最重要的是不知道哪些技術須要重點掌握，學習時頻繁踩坑，最終浪費大量時間，因此有有效資源仍是頗有必要的。

最後祝福全部遇到瓶疾且不知道怎麼辦的前端程序員們，祝福你們在日後的工做與面試中一切順利。