ajax簡單封裝

工做之餘簡單封裝了ajax的請求，可是工做中仍是用jquery，axios，angular內部封裝好了http模塊（笑）。

ajax通常分爲簡單的四部：

1. 建立ajax對象（這裏兼容ie的話要作一下處理）
2. 鏈接，即請求對象的open方法（get和post還有點不一樣，get參數要放在url後面，post要設置請求頭）
3. 發送，即請求對象的send函數（post參數則放在send裏面）
4. 接收，在onreadystatechange（存儲函數或函數名，每當readyState屬性改變時，就會調用該函數。）函數裏面處理。

還能夠加上超時這些

onreadystatechange分析

1. 要先判斷readyState的狀態（有四個狀態）

   ①： 0，請求未初始化；

   ②： 1，服務器鏈接已創建；

   ③： 2，請求已接收；

   ④： 3，請求處理中；

   ⑤： 4，請求已完成，且響應已就緒

2. 當readyState等於4時，你又要判斷status的狀態
3. 請求成功時status狀態 200-300（不包括300） ，還有304（是緩存）（具體狀態能夠去參考文檔）
4. 在成功（失敗）的回掉函數裏面將xhr.responseText的值返回出去。

代碼

'use strict';

var $ = {};
$.ajax = ajax;

function ajax(options) {

  // 解析參數
  options = options || {};
  if (!options.url) return;
  options.type = options.type || 'get';
  options.timeout = options.timeout || 0;

  // 1 建立ajax
  if (window.XMLHttpRequest) {

    // 高級瀏覽器和ie7以上
    var xhr = new XMLHttpRequest();
  } else {

    //ie6,7,8
    var xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
  }

  // 2 鏈接
  var str = jsonToUrl(options.data);
  if (options.type === 'get') {
    xhr.open('get', `${options.url}?${str}`, true);

    // 3 發送
    xhr.send();
  } else {
    xhr.open('post', options.url, true);

    // 請求頭
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

    // 3 發送
    xhr.send();
  }

  // 接收
  xhr.onreadystatechange = function() {

    // 完成
    if (xhr.readyState === 4) {

      // 清除定時器
      clearTimeout(timer);

      if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {

        // 成功
        options.success && options.success(xhr.responseText);
      } else {
        options.error && options.error( xhr.status );
      }
    }
  };

  
  // 超時
  if (options.timeout) {
    var timer = setTimeout(function(){ 
            alert("超時了");
            xhr.abort(); // 終止
        },options.timeout);
  }
}


// json轉url
function jsonToUrl(json) {
  var arr = [];
  json.t = Math.random();
  for(var name in json) {
    arr.push(name + '=' + encodeURIComponent(json[name]));
  }
  return arr.join('&');
}