我们先说一下使用AJAX发起一个请求的过程

  1. 创建一个XMLHttpRequest对象的实例，
var xmlHttpRequest = new XmlHttpRequest();
 //完整的过程
 var xhttp;
     if (window.XMLHttpRequest) {
          //现代主流浏览器
          xhttp = new XMLHttpRequest();
      } else {
          // 针对浏览器，比如IE5或IE6
          xhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
  1. 设置该实例请求发向目标，发起的方式，get还是post，并可以配置一些ajax的选项
xhttp.open("get/post", "url", true);
//true表示是否为同步，true则为同步，否则为异
  1. 设置该实例的响应函数
req.onreadystatechange = function () {
    //代码先略过不写，后面再具体细说
}
  1. 发送请求
xhttp.send();//发送请求
  1. 使用XmlHttpRequest对象的responseText或responseXML属性获得服务器响应报文，
  2. 获得状态码。表示请求未被初始化 1表示服务器连接成功 2表示请求被服务器接收 3表示处理请求 4表示请求处理完成
xhttp.status == 200 && xhttp.onreadystatechange==4

手动封装一个类似jQuery类似的AJAX方法（简单版）

myAjax(options).success(成功时执行的回调函数).fail(失败时执行的回调函数)

1.建立一个myAjax对象类

var myAjax = function (options) {
  //创建一个空对象，之后将返回它
  var obj = {}
  //分别表示成功和失败时，执行函数的变量
  var successCallback = function () {}
  var failCallback = function () {}

  //回调函数作为参数传入，赋值给内置的变量
  //由于可以连写，因此确保done和fail两个方法，在执行后的返回值也需要是obj对象（不然无法连写了）
  obj.success = function (success2) {
    successCallback = success2;
    return obj;
  }
  obj.fail = function (fail2) {
    failCallback = fail2;
    return obj;
  }
  

  //...
  // 一些中间省略掉的代码
  return obj;
}

2.options 属性检查

//对象类型检查，首先要求参数必须是对象
  //然后如果url或者type类型需要是字符串
  if (!(options instanceof Object) || (typeof options.url !== 'string') || (typeof options.type !== 'string')) {
    //给个报错的提示信息呗
    console.error("error arguments for ajax");
    return obj;
  }

3.data属性检查判断

//只有有data属性的时候才需要进行处理，
//假如data属性是一个函数，那么跳过，就当没有
if (typeof options.data === "undefined" && typeof options.data === "function") {
  // 加入data属性是不是get方法，则data直接放进请求头
  if (options.type.toLowerCase() !== "get") {
    if (typeof JSON.stringify !== "function") {
      console.error(
        "can't use JSON.stringify(), so can't Ajax by post when type of data is object"
      );
      return obj;
    }
    //转化为json字符串，放进data请求头中去。
    var data = JSON.stringify(options.data);
  } else {
    //肯定是get方法
    //data属性是string类型或number类型的话，则直接放进url中
    if (typeof options.data == "string" || typeof options.data == "number") {
      var data = options.data;
    } else if (options.data instanceof Object) {
      //data属性是object类型，将对象改为&连接的形式放进url中
      var tempArray = [];
      for (j in options.data) {
        if (typeof options.data[j] !== "object" && typeof options.data[j] !== "function") {
          tempArray.push(j + "=" + options.data[j]);
        }
      }
      if (tempArray.length > 0) {
        var data = tempArray.join("&");
      }
    }
  }
}

4.创建ajax实例

var req = new XMLHttpRequest();

  req.onreadystatechange = function () {
    console.log(this);
    //当属性值不是4的时候，说明ajax没有完成，因此返回不做处理
    if (this.readyState !== 4) {
      return;
    }

    //  当ajax的请求完成后，status状态码会发生改变
    //  其值来源于Http的头部的Status Code属性
    //  可以打开chrome控制台，查看network；
    //  然后选择一项请求后查看Headers选项卡中，General中的Status Code属性
    //  当值为200时，说明成功获取，否则失败
    if (this.status === 200) {

      //success是用户自己写的处理回调函数，我们将返回值作为参数传递
      //并执行用户自定义的回调函数
      successCallback(this.response);
    } else {

      //fail则是用户写的失败处理函数，同样将错误文本作为参数传递，并执行之
      failCallback(this.statusText);
    }
  }
  if (options.type.toLowerCase() === 'get') {
    if (typeof data !== 'undefined') {
      req.open(options.type, options.url + "?" + data, true);

      //发送请求，并返回
      req.send();
    } else {
      req.open(options.type, options.url, true);
      req.send();
    }

  } else {
    req.open(options.type, options.url, true);
    if (typeof data !== 'undefined') {

      //如果存在，那么显然是JSON格式字符串（因为我们前面已经处理过了）

      //但是在发送前，我们需要设置一下请求头的Content-Type属性，告诉服务器我们发送的是一个json
      req.setRequestHeader("Content-Type", "application/json");

      //然后再发送
      req.send(options.data)
    } else {
      //不然直接发送就行
      req.send();
    }
  }

这是对ajax采用myAjax（options）.success（successCallback）.fail(failCallbacl)的方式进行的一次封装，方法可能较为之简单，大家有什么疑惑欢迎留言，谢谢各位