xhr.onreadystatechange = () => {
  if (xhr.readyState === 4 && xhr.status === 200) {
    xhr.responseText;
  }
};

// GET "问号传参"
let xhr = new XMLHttpRequest();
xhr.open(
  "GET",
  "https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/list?id=1000&lx=2000"
);
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  }
};

// POST "请求主体"
let xhr = new XMLHttpRequest();
xhr.open(
  "GET",
  "https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/list"
);
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  }
};
xhr.send(JSON.stringify({ id: 1000, lx: 2000 })); //=> 请求主体中传递给服务的是JSON格式的字符串, 但是真实项目中常用的是URL-ENCODE格式的字符串"id=1000&lx=2000"

// GET
xhr.open("GET", "/temp/list?xxx=xxx&xxx=xxx");
// POST
xhr.send("xxx=xxx&xxx=xxx");

xhr.open("GET", `temp/list?lx=1000&_=${Math.random()}`);

let xhr = new XMLHttpRequest();
xhr.open("GET", "temp.xml");
xhr.send();

let xhr = new XMLHttpRequest();
xhr.open(
  "GET",
  "https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/list"
);
// 设置请求的时间
xhr.timeout = 200;
// 设置请求超时后提示
xhr.ontimeout = () => {
  console.log("请求超时, 请稍后重试");
};
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  }
};
xhr.send(null);

let xhr = new XMLHttpRequest();
xhr.open(
  "GET",
  "https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/list"
);
xhr.timeout = 200; // 设置请求的时间
// 设置请求超时后提示
xhr.ontimeout = () => {
  console.log("请求超时, 请稍后重试");
  xhr.onabort();
};
xhr.onabort = () => {
  console.log("当前请求已经被强制中断");
};
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  }
};
xhr.send(null);
// 也可以用下面的方式来测试
// setTimeout(() => {
//     xhr.onabort();
// }, 1000);

let xhr = new XMLHttpRequest();
xhr.open(
  "GET",
  "https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/list"
);
// 设置的请求头信息不能出现中文而且必须在OPENED之后才可以设置成功.
xhr.setRequestHeader("zhufeng", "@@@");
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  }
};
xhr.send(null);

let xhr = new XMLHttpRequest();
xhr.open("GET", "temp.json");
xhr.onreadystatechange = () => {
  // 证明服务器已经返回内容了(HTTP请求成功)
  if (!/^(2|3)\d{2}$/.test(xhr.status)) return;
  if (xhr.readyState === 2) {
    // 响应头信息已经回来了
    let time = xhr.getResponseHeader("date"); // 获取的结果是格林尼治时间, 而且是字符串
    console.log(time, new Date(time));
  }
  if (xhr.readyState === 4) {
    console.log(xhr.responseText);
  }
};
xhr.send(null);

let xhr = new XMLHttpRequest();
xhr.open("GET", "temp.json", true); // 异步
xhr.onreadystatechange = () => {
  // 监听的是AJAX"改变事件": 设置监听之前有一个状态, 当后续的状态和设置之前的状态不相同, 才会触发这个事件
  if (xhr.readyState === 2) {
    console.log(1);
  }
  if (xhr.readyState === 4) {
    console.log(2);
  }
};
xhr.send(); // 发送AJAX请求: 不论是同步还是异步, 执行了send()才证明AJAX任务开始
// 执行send后, 有一个线程是去请求数据, 主栈会空闲下来
console.log(3);
// 等主任务队列都执行完之后, 状态每改变一次, 等待区的onreadystatechange就会到主栈中执行一次
//=> 3 1 2

let xhr = new XMLHttpRequest();
xhr.open("GET", "temp.json", true);
xhr.send(); // AJAX任务开始(异步)
// 执行send后, 有一个线程是去请求数据, 主栈会空闲下来
// 此时事件绑定前状态是1
xhr.onreadystatechange = () => {
  if (xhr.readyState === 2) {
    console.log(1);
  }
  if (xhr.readyState === 4) {
    console.log(2);
  }
};
console.log(3);
//=> 3 1 2

let xhr = new XMLHttpRequest();
xhr.open("GET", "temp.json", false);
xhr.onreadystatechange = () => {
  //=> 监听前的状态是1
  if (xhr.readyState === 2) {
    console.log(1);
  }
  if (xhr.readyState === 4) {
    console.log(2);
  }
};
xhr.send(); //=> 任务开始(同步: 只要当前AJAX请求这件事没有完成, 什么都不能做)
console.log(3);
//=> 2 3  当AJAX任务开始, 由于是同步编程, 主任务队列在状态没有变成4(任务结束)之前一直被这件事占用着, 其它事情都做不了(当服务器把响应头返回的时候, 状态为2, 触发了事件readystatechange, 但是由于主任务队列没有完成, 被占用着, 绑定的方法也无法执行... 所以只有状态为4的时候, 此时也只能监听到变为4的状态了, 也就是主任务队列执行结束后才执行reaystatechange这个方法)

let xhr = new XMLHttpRequest();
xhr.open("GET", "temp.json", false);
xhr.send(); //=> 开始请求(状态不为4, 其它事都做不了)
//=> 事件绑定前状态已经是4了
xhr.onreadystatechange = () => {
  //=> 状态改变才会触发, 放到等待区的时候状态已经为4了, 不会再改变了, 所以不会执行这个方法(什么都不会输出)
  if (xhr.readyState === 2) {
    console.log(1);
  }
  if (xhr.readyState === 4) {
    console.log(2);
  }
};
console.log(3);
//=> 3

(function () {
  function AJAX(options) {
    return new init(options);
  }

  let init = function init(options = {}) {
    // INIT PARAM
    let {
      url,
      method = "GET",
      data = null,
      dataType = "JSON",
      async = true,
      cache = true,
      success,
      error,
    } = options;

    // MOUNT: 把配置项挂载到实例上
    [
      "url",
      "method",
      "data",
      "dataType",
      "async",
      "cache",
      "success",
      "error",
    ].forEach((item) => {
      this[item] = eval(item);
    });

    // SEND: 发送AJAX请求
    this.sendAjax();
  };
  AJAX.prototype = {
    constructor: AJAX,
    init,
    // 发送AJAX请求
    sendAjax() {
      this.handleData();
      this.handleCache();
      // SEND
      let { method, url, async, error, success, data } = this,
        xhr = new XMLHttpRequest();
      xhr.open(method, url, async);
      xhr.onreadystatechange = () => {
        if (xhr.readyState === 4) {
          // ERROR
          if (!/^(2|3)\d{2}$/.test(xhr.status)) {
            error && error(xhr.statusText, xhr);
            return;
          }
          // SUCCESS
          let result = this.handleDataType(xhr);
          success && success(result, xhr);
        }
      };
      xhr.send(data);
    },

    // 处理DATA-TYPE
    handleDataType(xhr) {
      let dataType = this.dataType.toUpperCase(),
        result = xhr.responseText;
      switch (dataType) {
        case "TEXT":
          break;
        case "JSON":
          result = JSON.parse(result);
          break;
        case "XML":
          result = xhr.responseXML;
          break;
      }
      return result;
    },
    // 处理CACHE
    handleCache() {
      let { url, method, cache } = this;
      if (/^GET$/i.test(method) && cache === false) {
        // URL末尾追加时间辍
        // 字符串加时间格式, 时间格式会自动变为毫秒
        url += `${this.check()}_=${+new Date()}`;
        this.url = url;
      }
    },
    // 处理DATA
    handleData() {
      let { data, method } = this;
      if (!data) return;
      // 如果是object对象, 我们把它转换为x-www-form-urlencoded这种模式, 方便后期传递给服务器
      if (typeof data === "object") {
        let str = ``;
        for (let key in data) {
          if (data.hasOwnProperty(key)) {
            str += `${key}=${data[key]}&`;
          }
        }
        data = str.substring(0, str.length - 1);
      }

      // 根据请求方式不一样, 传递给服务器的方式也不同
      if (/^(GET|DELETE|HEAD|TRACE|OPTIONS)$/i.test(method)) {
        this.url += `${this.check()}${data}`;
        this.data = null;
        return;
      }
      // POST系列
      this.data = data;
    },
    check() {
      return this.url.indexOf("?") > -1 ? "&" : "?";
    },
  };
  init.prototype = AJAX.prototype;
  window.ajax = AJAX;
})(window);

let promise1 = new Promise((resolve, reject) => {
  $.ajax({
    url: "json/data.json",
    success(result) {
      resolve(result);
    },
    error(msg) {
      reject(msg);
    },
  });
});
promise1
  .then(
    (result) => {
      console.log("then1 OK", result);
    },
    (msg) => {
      console.log("then1 NO", msg);
    }
  )
  .then(
    (result) => {
      console.log("then2 OK", result);
    },
    (msg) => {
      console.log("then2 NO", msg);
    }
  );

let promise1 = new Promise((resolve, reject) => {
  $.ajax({
    url: "json/data2.json",
    success(result) {
      resolve(result);
    },
    error(msg) {
      reject("no");
    },
  });
});
promise1
  .then((result) => {
    console.log("THEN1 OK", result);
    100();
    return 100;
  })
  .catch((msg) => {
    // 第一个CATCH
    // 1. 异步请求失败会执行它
    // 2. 第一个THEN方法失败也会执行它
    console.log("catch1", msg);
  })
  .then((result) => {
    console.log("then2 OK", result);
  })
  .catch((msg) => {
    console.log("catch2", msg);
  });

let A = function A() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, 1000);
  });
};
let B = function B() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, 1000);
  });
};

let promise = A();
promise
  .then(() => {
    console.log(1);
    return B(); // 如果方法中返回的是一个具体值, 而是执行中没有错误异常, 会立即执行下一个THEN中的方法(不写return 也是返回了具体值: undefined), 但是如果返回的是一个PROMISE实例(并且管控了一个异步操作), 只能等PROMISE完成, 把成功后的结果当做具体的值返回, 才能进入下一个函数执行
  })
  .then(() => {
    console.log(2);
  });

try {
  // 正常执行的JS代码(可能会报错);
  1(); // 报错, 失败
} catch (e) {
  // TRY中的代码报错了会执行CATCH
} finally {
  // 不管TRY中的代码成功还是失败都会执行
}

$.ajax({
  url: "https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/list",
  success: (result) => {
    $.ajax({
      url: "https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/info",
      success: (result) => {
        $.ajax({
          url: "https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/add",
          method: "POST",
          success: (result) => {},
        });
      },
    });
  },
});

let $plan = $.Callbacks(),
  $planB = $.Callbacks();
$.ajax({
  url: "https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/list",
  success: (result) => {
    $plan.fire(result);
  },
});

$plan.add((result) => {
  $.ajax({
    url: "https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/info",
    success: (result) => {
      $planB.fire(result);
    },
  });
});

$planB.add((result) => {});

let queryA = function queryA() {
  return new Promise((resolve) => {
    $.ajax({
      url: "https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/list",
      success: resolve,
    });
  });
};
let queryB = function queryB() {
  return new Promise((resolve) => {
    $.ajax({
      url: "https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/info",
      success: resolve,
    });
  });
};
let queryC = function queryC() {
  return new Promise((resolve) => {
    $.ajax({
      url: "https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/add",
      method: "POST",
      success: resolve,
    });
  });
};

let promise = queryA();
promise
  .then((result) => {
    console.log("A", result);
    return queryB(); // 上一个THEN中函数手动返回一个新的PROMISE实例(管控了一个异步操作), 下一个THEN会等上一个THEN中的异步成功后再执行
  })
  .then((result) => {
    console.log("B", result);
    return queryC();
  })
  .then((result) => {
    console.log("C", result);
  });