19.1 轻松掌握 XMLHttpRequest

1. 基础知识

XMLHttpRequest 是一个对象，由浏览器提供，最早由 IE5 引入。

利用 XMLHttpRequest 可以实现，无需卸载页面即可向服务器请求额外的数据。

2. 手写一个 XMLHttpRequest

var xhr = new XMLHttpRequest()

xhr.open('get', 'http://www.baidu.com', ture)

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    if (xhr.status >= 200 || xhr.status === 304) {
      //  请求成功
    } else {
      // 请求失败
    }
  }
}

xhr.setRequestHeader('token', '123123')

xhr.send(null)

3. XMLHttpRequest 的注意事项

// 1. 构造函数，用 new 的形式使用
var xhr = new XMLHttpRequest()

// 2.open方法接受三个参数，分别为： 请求类型；请求地址，是否异步发送请求
xhr.open('get', 'http://www.baidu.com', ture)

// 3.监听readystate状态码的改变，
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
    } else {
    }
  }
}

// 4 自定义请求头
xhr.setRequestHeader('token', '123123')

// 5. 发送请求数据，如果不传递参数，则必须传 null
xhr.send(null)

注意事项

• XMLHttpRequset IE8 以下有兼容性问题；

• XMLHttpRequset支持同步请求；

• onreadystatechange 事件名称全小写；

  • onreadystatechange 函数中推荐使用xhr，而不是 this，作用域在某些浏览器中有些不同。

• readyState 状态码的区分

  • 0 ：未初始化，尚未调用 open() 方法；
  • 1 ：启动，已经调用了 open() 方法，打算尚未调用 send() 方法；
  • 2：发送，已经调用 send() 方法，但未接收到响应；
  • 3：接收，已经接收到部分数据；
  • 4：完成，已经接收到全部响应数据，而且已经可以在客户端使用了；

• status的筛选

  • 2XX 的状态码是请求成功的 status 状态码；
  • 注意 304 很有意思，指请求的资源并没有被修改；

• setRequestHeader 在 open() 方法和 send() 方法中间才有效；

• send 方法如果不传递参数，则必须传 null

end

总结一下，写这篇文章，学习到的收获：

• 阅读了 《javascript高级程序设计》有关ajax的章节；
• 手写了一遍利用 XMLHttpRequest 发起请求的代码；
• 记住了一些单词：
  • XMLHttpRequest
  • readystate
  • status
• 复习了相关 api 的使用和注意事项。
• 最让我惊喜的是：304状态码和同步请求。