用原生js实现ajax

// 通过createXHR()函数创建一个XHR对象
function createXHR() {
  if(window.XMLHttpRequest) { // IE7、Firefox、Opera、Chrome和Safari
    return new XMLHttpRequest();
  }else if(window.ActiveXObject) { // IE6以下
    var versions = ['MSXML2.XMLHttp','Microsoft.XMLHTTP'];
    for (var i=0,len = versions.length; i<len; i++){
      try{
        return new ActiveXObject(versions[i]);
        break
      } catch (e) {
        console.log(e)
      }
    }
  } else {
    throw new Error('此浏览器不支持XHR对象')
  }
}

//封装ajax，参数为一个对象
function ajax(obj) {
  var xhr = createXHR(); //创建XHR对象
  // 通过使用随机字符串解决IE浏览器第二次默认获取缓存的问题
  obj.url = obj.url + '?rand=' + Math.random();
  obj.data = params(obj.data); //通过params()将名值对转换成字符串
  //在使用XHR对象时，必须先调用open()方法
  //它接收三个参数，：请求类型(get、post)、请求的URL和表示是否异步
  xhr.open(obj.method,obj.url,obj.async) //打开和服务的链接
  //若是get请求，则将数据加到url后面
  if(obj.method === 'get'){
    obj.url += obj.url.indexOf('?') === -1? '?'+ obj.data : '&' + obj.data;
  }
  //如果是post请求
  if (obj.method === 'post'){
    //post需要自己设置http的请求头，来模仿表单提交
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send(obj.data) //post方式将数据放在send()方法里 //send动作才是真正的给服务器按照上面open的url发送请求
  } else {
    xhr.send(null); //get方式则填null
  }

  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4){ //判断对象的状态是否完成
        callback() //回调函数
    }
  }

  function callback() {
    if (xhr.status == 200 || xhr.status == 304) { //判断http的交互是否成功，200表示成功
      obj.success(xhr.responseText); //回调传递参数
    } else {
      alert('获取数据错误！错误代号：' + xhr.status + '，错误信息：' + xhr.statusText)
    }
  }
}

//名值对转换为字符串
function params(data) {
  var arr = [];
  for (var i in data) {
    //特殊字符传参产生的问题可以使用encodeURIComponent（）进行编码处理
    arr.push(encodeURIComponent(i)+ '=' + encodeURIComponent(data[i]))
  }
  return arr.join('&')
}