记录一下 AJAX

我们在数据请求的时候，一般用什么库？
一般都是 Axios、jQuery、VueResource，顶多用 window.fetch

但是面试可能会让我们手写 AJAX
比如：需要发 GET /xxx 这么个请求，怎么写？

茴香豆的茴四种写法，你能写出来吗？

怎么写

• 第一句：声明一个对象，一般叫 xhr new 一个
• 第二句：发请求发到哪？ open()
• 第三句：设置请求体发送，GET 请求体是空的；POST 请求体一般是 JSON send
• 第四句：发送之后要有个回调呀 onload
• 如果想返回失败的回调，那就补充 onerror

一般我们把 send 放在最后，这是个习惯！
把所有东西都设置好，再发送，这比较好

var xhr = new XMLHttpRequest()
xhr.open('GET', '/xxx')
xhr.onload = () => {
  console.log('得到内容')
}
xhr.onerror = () => {
  console.log('失败')
}
xhr.send()

但上面是简单版的，有的面试官希望你写出完整版的
要写一个很长的函数onreadystatechange「准备状态变化」

readyState 属性返回一个 XMLHttpRequest 代理当前所处的状态：
0：代理被创建，但还没调用 open()
1：open() 已被调用
2：send() 已被调用（并且头部和状态已经可以获得）
3：下载中
4：下载已完成

一般很难遇到 0 1 2，一般都是3 4 会多一点

完整代码

var xhr = XMLHttpRequest()
xhr.open('GET', '/xxx')
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
      console.log('成功')
    } else {
      console.log('失败')
    }
  }
}
xhr.send()

这篇博客只是学完 AJAX 后的一个记录
完。