Ajax的核心

Ajax的实现核心就是XMLHttpRequest对象，浏览器通过XMLHttpRequest对象异步刷新页面获取数据，无需刷新整个页面提高网页性能。
简略的ajax请求(GET)

var ajax = new XMLHttpRequest();
//初始化请求
//如果是get 请求将data拼接到url后面
ajax.open('get', 'http://....?' + data, true) //method url async 是否异步
//注册事件 监听请求返回值 readyState改变调用
ajax.onreadystatechange = function () {
  /**
   * readyState http的请求状态
   * 0(初始化状态)
   * 1(open方法已调用，send()方法未调用。请求还没有被发送)
   * 2(send方法已调用 HTTP请求已发送web服务器 未接收到响应)
   * 3(响应头部已经接收到，响应体开始接收还未完成；已接收到响应，但响应接受还未完成)
   * 4(HTTP响应已经完成接受)
   */
  if (ajax.readyState == "4" && ajax.status == "200") { //请求完成\
    //responseText 返回的响应字符串
    console.log(xhr.responseText)
  }
}
//发送请求
ajax.send();

POST格式

var ajax = new XMLHttpRequest();
//初始化请求
ajax.open('post', 'http://....', true) //method url async 是否异步
ajax.onreadystatechange(function () {
  if (ajax.readyState == "4" && ajax.status == "200") { //请求完成
    //responseText 返回的响应字符串
    console.log(xhr.responseText)
  }
})
ajax.onerror = function () {
  console.log(ajax.status)
}
//发送请求
ajax.send(data);

一个完整的封装

//一个完整的封装
function ajax(params) {
  var url = params.url;
  var method = params.type || 'get'
  var dataType = params.dataType || 'json'
  var data = params.data
  var timeout = params.timeout || 0
  var error = params.error || function () {}
  var success = params.success || function () {}

  var ajax = new XMLHttpRequest();
  ajax.timeout = timeout //设置超时时间,0表示永不超时

  if (method === 'get') {
    var arr = [];
    for (key in data) {
      arr.push(key + '=' + data[key])
    }
    dataStr = arr.join('&');
    url += '?' + dataStr
  } else {

  }

  //初始化
  ajax.open(url, method, true)
  //注册事件
  ajax.onload = function () {
      if (ajax.readyState == 4 && ajax.status == 200) { //请求成功
        success(ajax.responseText)
      } else {
        //失败 返回状态码
        var jsonStr = {
          errCode: ajax.readyState,
          errStatus: ajax.statusText
        }
        error(jsonStr)
      }
    },
    ajax.onerror = error
    //发送请求
  if (method == 'post') {
    ajax.send(data)
  } else {
    ajax.send()
  }
}
//调用
ajax({
  url: 'http://xxxxxxx', //发送请求的地址
  type: 'GET', //请求方式
  dataType: 'json',
  data: { //请求数据
    id: 1,
    name: '哈哈'
  },
  timeout: 5000, //超时设置
  error: function (err) {
    console.log(err)
  },
  success: function (response) {
    console.log(response)
  }
})