ajax

发送一个 ajax 请求
+ 使用 js 的方式发送请求
+ 解释以下 ajax
=> a: async
=> j: javascript
=> a: and
=> x: xml
=> 异步的 xml 和 javascript 交互手段

发送一个 ajax 的步骤
1. 创建一个 ajax 对象
+ var xhr = new XMLHttpRequest
=> 实例化一个构造函数, 得到一个对象
=> 得到的这个对象就能帮我们发送 ajax 请求
2. 配置本次请求的信息
+ xhr.open(请求方式, 请求地址, 是否异步)
=> 请求方式: GET 或者 POST 或者 PUT 或者 …(大小写无所谓)
=> 请求地址: 你要请求哪一个文件
=> 是否异步: 默认是异步的, 可以改成同步
-> 你如果不传递, 默认是异步的
3. 把这个请求发送出去
+ xhr.send()
=> 这个方法一执行, 本次 ajax 请求就发送出去了
=> 就发送到 … 文件里面了
4. 接受响应
+ 为什么要接受响应
=> 因为当 js 和 后端 交互的时候
=> 后端返回的内容不会直接显示再浏览器上
=> 而是给了 js 或者说给了 xhr 对象
=> 我们要拿到这个响应内容(后端给前端的数据)
+ 怎么接受响应
=> 使用 onload 事件
=> xhr.onload = function () {}
-> 这个事件是 ajax 完成的时候触发
-> 当本次请求完成以后, 就会触发后面的函数了
=> 再事件里面打印一下 xhr(这个 ajax 对象)
=> 再 xhr 这个对象里面
-> responseText 就是响应体

    // 1. 创建一个 ajax 对象
    //    这个对象就能帮我们发送一个 ajax 请求
    var xhr = new XMLHttpRequest()

    // 2. 配置请求信息
    //    以 GET 的请求方式 向 ajax.php 文件发起一个请求
    xhr.open('GET', './ajax.php')

    // 3. 发送请求
    xhr.send()

    // 4. 接受响应
    xhr.onload = function () {
      // 这个函数会在当前这个 ajax 请求完成的时候触发
      // 这个 ajax 请求一完成, 那么就会触发这个函数了
      // 我们再这里就能得到后端给返回的数据
      console.log('请求已经完成了')
      console.log(xhr)
    }

ajax 的状态码
+ http 响应状态码 => 表示本次请求时成功还是失败
+ ajax 状态码 => 描述当前处于 ajax 的哪一个步骤
-> 储在 ajax 的第一个换节可能就是 0
-> 进入到 ajax 的第二个换节就是 1
-> …
+ 怎么获取 ajax 状态码
+ ajax对象.readyState
+ 有哪些状态码
=> 0: 表示你创建一个 ajax 对象成功了
=> 1: 表示配置请求信息成功了(也就是执行完 open)
=> 2: 表示响应体已经回到了浏览器, 但是还不能使用(因为此时还是一个响应报文)
=> 3: 浏览器正在解析响应报文(把响应报文里面的响应体分离出来)
=> 4: 浏览器分离响应体成功, 已经可以正常使用了(本次请求结束了)

   // 1. 创建 ajax 对象
    var xhr = new XMLHttpRequest() // => 0

    // ajax 状态码改变的事件
    xhr.onreadystatechange = function () {
      // 只要 ajax 状态码改变了就会触发
      console.log(xhr.readyState) // 直接打印 ajax 状态码

      if (xhr.readyState === 2) {
        // 响应报文回到了浏览器, 但是没有经过解析还不能使用的时候
        console.log('2222222222222222222')
        console.log(xhr.responseText) // 打印响应体
      }

      if (xhr.readyState === 4) {
        // 浏览器已经解析完毕了, 可以正常使用相应体了
        console.log('4444444444444444444')
        console.log(xhr.responseText) // 打印响应体
      }

    }

    // 2. 配置请求信息
    xhr.open('GET', './ajax.php') // => 1

    // 3. 发送请求
    xhr.send() // => 2 3 4

ajax 的兼容处理
+ 兼容处理, 将来再你们开发的过程中
-> 可能要兼容 IE 6 7 8 浏览器
-> 就要处理兼容问题
+ 我们的 ajax 有两个地方不兼容
1. 创建 ajax 对象的时候不兼容
+ new XMLHttpRequest => 标准浏览器使用
+ new ActiveXObject => IE 低版本使用
2. 接受响应的不兼容
+ 标准浏览器 => onload 事件
+ IE 低版本 => 没有 onload 事件
-> IE 低版本只有 onreadstatechange 方法
-> IE 低版本接受响应只能使用 onreadystatechange 这个事件
+ 再这个事件里面进行判断
+ 判断 ajax 结束了 -> ajax 状态码为 4 就是结束
+ 判断 本次 http 请求时成功了的 -> http 状态码时 200 ~ 299 之间
-> xhr.status 就是本次请求的 http 状态码
IE 的问题
-> 创建 ajax 对象这个事情
-> 必须是真实的 IE 6 7 8 浏览器才没有
-> 如果你使用的 IE 11 浏览器的模拟器, 但是浏览器的内核依旧时 IE 11 的内核
-> 你看不出来他不能用
// 创建 ajax 对象
// 标准浏览器 var xhr = new XMLHttpRequest()
// IE 低版本 var xhr = new ActiveXObject(‘Micorsoft.XMLHTTP’)

    var xhr = new XMLHttpRequest()

    // 配置请求信息
    xhr.open('GET', './ajax1.php') // => 异步 再 IE 低版本 下
    // 404 表示请求失败了, 不管请求成功还是失败都能变道 4

    // 接受响应
    // 下面这个代码再 标准浏览器 可以接受到响应体
    // 再 IE 低版本浏览器里面接受不到响应体
    // xhr.onload = function () {
    //   console.log(xhr.responseText)
    // }

    // 接受响应
    // 兼容 IE 的接受响应, 就要使用这个事件
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)) {
        console.log('确实状态码变成 4 了')
        console.log(xhr.status)
        console.log(xhr.responseText)
      }
    }

    // 发送请求
    xhr.send()