封裝前的一些分析

（1）封裝的變量提取
1.請(qǐng)求的類型 get 或者 post
2.請(qǐng)求的地址 index.php 或者 login.php等等
3.前端提交的數(shù)據(jù)
4.請(qǐng)求成功之后做的事情

（2）需要根據(jù)type的不同需要處理的問(wèn)題
1.在open的時(shí)候如果是get方式，url需要墜上data,在send的時(shí)候發(fā)送的null
2.如果是post的時(shí)候，url地址不需要墜上data卓研，在send的時(shí)候需要傳遞data绍豁，而且需要設(shè)置請(qǐng)求頭

第一版本

ajax('post',
'demo.php',
'username=feifei&age=18',
function(data) {
    alert('hello')
})

function ajax(type,url,data,fn) {
  //第一步
  // 創(chuàng)建對(duì)象
  var xhr = new XMLHttpRequest();

  //第二步
  if(type == 'get' || type == 'GET') {
    // 如果是get方式，需要將data和url組合起來(lái)
    url = url + '?' + data;
    // 如果是get請(qǐng)求驶悟，直接將data數(shù)據(jù)設(shè)置為null
    data = null;
  }

  xhr.open(type,url,true);

  if(type == 'post' || type == 'POST') {
    // 如果是post的 需要設(shè)置請(qǐng)求頭
    xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
  }

  //第三步
  // 發(fā)送數(shù)據(jù)
  xhr.send(data);

  //第四步
  xhr.onreadystatechange = function () {
    if(xhr.readyState == 4 && xhr.status == 200) {
      var data = xhr.responseText;
      // 將一個(gè)匿名函數(shù)傳遞進(jìn)來(lái)
            // 如果傳遞了fn參數(shù)胡野，才去調(diào)用
      fn && fn(data);
    }
  }
}

第二版本

ajax({
    type : 'post',
    url : 'demo.php',
    data : 'username=feifei&age=18',
    beforeSend : function () {
        alert('開(kāi)始啦');
    },
    success : function (data) {
        console.log(data);
    },
    error : function (error) {
        console.log('錯(cuò)誤狀態(tài)碼是：' + error.status);
    },
    complete : function () {
        console.log('完成');
    }
})

function ajax(obj) {
  var xhr = new XMLHttpRequest();
  if(obj.type == 'get' || obj.type == 'GET') {
    obj.url = obj.url + '?' + obj.data;
    obj.data = null;
  }

  xhr.open(obj.type,obj.url,true);

  if(obj.type == 'post' || obj.type == 'POST') {
    xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
  }
  // 在AJAX發(fā)送之前調(diào)用
  obj.beforeSend && obj.beforeSend();
  // 發(fā)送數(shù)據(jù)
  xhr.send(obj.data);
  xhr.onreadystatechange = function () {
if(xhr.readyState == 4) {
  // 意味這ajax回到了客戶端
      // 在根據(jù)狀態(tài)碼覺(jué)得是成功還是失敗
      if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
        var data = xhr.responseText;
        // 將一個(gè)匿名函數(shù)傳遞進(jìn)來(lái)
        // 如果傳遞了fn參數(shù)，才去調(diào)用
        obj.success && obj.success(data);
      } else {
        obj.error && obj.error(xhr);
      }
      // 不管是成功還是失敗痕鳍，都調(diào)用complete
      obj.complete && obj.complete();
    }
  }
}

第三版本

將data數(shù)據(jù)用對(duì)象的形式傳遞過(guò)去
ajax({
    type : 'post',
    data : {
        name : 'feifei',
        age : 18
    },
    url : 'demo.php',
    beforeSend : function () {
        alert('開(kāi)始');
    },
    success : function (data) {
        console.log(data);
    },
    error : function (error) {
        console.log(error.status);
    },
    complete : function () {
        console.log('結(jié)束');
    }
})

function ajax(obj) {
  var xhr = new XMLHttpRequest();
  if(obj.type == 'get' || obj.type == 'GET') {
    obj.url = obj.url + '?' + params(obj.data);
    obj.data = null;
  } else {
    // 在post的時(shí)候硫豆，也需要將對(duì)象形式的data轉(zhuǎn)換成字符串形式的data
    obj.data = params(obj.data);
  }
  xhr.open(obj.type,obj.url,true);
  if(obj.type == 'post' || obj.type == 'POST') {
    xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
  }
  obj.beforeSend && obj.beforeSend();
  xhr.send(obj.data);
  xhr.onreadystatechange = function () {
    if(xhr.readyState == 4) {
      if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
        var data = xhr.responseText;
        obj.success && obj.success(data);
      } else {
        obj.error && obj.error(xhr);
      }
      obj.complete && obj.complete();
    }
  }
}
// 這個(gè)函數(shù)的作用只有一個(gè)龙巨，將data對(duì)象轉(zhuǎn)換成data字符串
// { username : 'feifei',age : 18 }
// 'username=feifei&age=18'
function params(data) {
  var str = '';
  for(var attr in data) {
    str += attr + '=' + data[attr] + '&';
  }
  return str.slice(0,-1);
}

第四版本

添加命名空間
$.ajax({
    type : 'post',
    data : {
        name : 'feifei',
        age : 18
    },
    url : 'demo.php',
    beforeSend : function () {
        console.log('我要開(kāi)始發(fā)送請(qǐng)求了');
    },
    success : function (data) {
        console.log(data);
    },
    error : function (error) {
        console.log(error.status);
    },
    complete : function () {
        console.log('發(fā)送成功');
    }
})

var $ = {
  ajax : function (obj) {
    var xhr = new XMLHttpRequest();
    if(obj.type == 'get' || obj.type == 'GET') {
      obj.url = obj.url + '?' + $.params(obj.data);
      obj.data = null;
    } else {
      obj.data = $.params(obj.data);
    }
    xhr.open(obj.type,obj.url,true);
    if(obj.type == 'post' || obj.type == 'POST') {
      xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
    }
    obj.beforeSend && obj.beforeSend();
    xhr.send(obj.data);
    xhr.onreadystatechange = function () {
      if(xhr.readyState == 4) {
        if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
          var data = xhr.responseText;
          obj.success && obj.success(data);
        } else {
          obj.error && obj.error(xhr);
        }
        obj.complete && obj.complete(xhr);
      }
    }
  },
  params : function (data) {
    var str = '';
    for(var attr in data) {
      str += attr + '=' + data[attr] + '&';
    }
    return str.slice(0,-1);
  }
}