ajax

ajax
+ 前后端交互的一种手段
+ 通过 JS 向服务端发起请求
=> 所有服务端返回的响应都不会直接显示再页面上
=> 而是返回给 js 这个语言
+ 说明: JS 和服务端交互
=> 依赖于浏览器来发送请求
+ ajax
=> a: async
=> j: javascript
=> a: and
=> x: xml

使用方式
1. 找到一个对象能帮我发送 ajax 请求
=> XMLHttpRequest() 内置构造函数
=> 专门创建实例化对象帮你发送 ajax 请求

2. 对本次请求进行一些配置
=> open() 的方法
=> 语法: xhr.open(请求方式, 请求地址, 是否异步)
-> 请求方式: GET POST PUT ...(大小写无所谓)
-> 请求地址: 你要请求哪一个后端位置
-> 是否异步: 选填, 默认是 true, 可以选填 false, 表示同步

3. 把请求发出去
=> send() 方法
=> 语法: xhr.send()

4. 接收响应
=> onload 事件
=> 语法: xhr.onload = function () {}
=> 本次请求结束以后触发(响应成功了以后触发)
=> xhr 里面有一个属性叫做 responseText 就是响应体

    // 1. 创建一个 ajax 实例化对象
    const xhr = new XMLHttpRequest()

    // 2. 配置本次请求的信息
    xhr.open('GET', './server/get.php')

    // 3. 把这个请求发送出去
    xhr.send()

    // 4. 接收结果
    xhr.onload = function () {
      console.log(JSON.parse(xhr.responseText))
    }

ajax 的异步问题

1. open 的第三个参数可以配置
=> 默认是 true 表示异步
=> 可以选填 false 表示 同步

分析四个步骤
1. 创建 ajax 对象, 同步代码
2. 配置请求信息, 同步代码
3. 发送请求, 异步代码, 当代码执行到这句话的时候, 先把请求发出去
=> 等到响应的过程是异步
4. 事件, 会在满足条件的时候触发
=> 条件: 响应回来

异步执行的时候
console.log('start')
1. 创建 ajax 对象
2. 配置请求信息
3-1. 把请求发出去
4. 绑定事件, 请求完成的事件
console.log('end')
3-2. 响应回到客户端, 触发事件
console.log(响应体)

同步执行的时候
console.log('start')
1. 创建 ajax 对象
2. 配置请求信息
3-1. 把请求发出去(同步), 等到响应回来再继续执行代码
3-2. 响应回到客户端, 不会触发事件, 因为事件还没有绑定
4. 绑定事件, 事件再也不会触发了
console.log('end')
+ 如果想接收到响应, 需要再 send 之前绑定事件

结论:
+ 同步的时候, 事件必须写在 send 之前
+ 异步的时候, 事件写在前面后面无所谓
+ 书写 ajax 的时候, 都要按照 1 2 4 3 的步骤写

console.log('start')

    // 1. 创建一个 ajax 实例化对象
    const xhr = new XMLHttpRequest()

    // 2. 配置本次请求的信息
    xhr.open('GET', './server/get.php', false)

    // 4. 接收结果
    xhr.onload = function () {
      console.log(JSON.parse(xhr.responseText))
    }

    // 3. 把这个请求发送出去
    xhr.send() // 发出去, 接收回来响应

    console.log('end')

 ajax 的兼容

+ ajax 不主动向下兼容
+ ajax 的兼容有两个部分
1. 创建 ajax 对象
2. 接收响应

创建 ajax 对象的兼容
1. new XMLHttpRequest() 标准浏览器使用
2. new ActiveXObject('Msxml.XMLHTTP') IE 7 8 9
3. new ActiveXObject('Msxml2.XMLHTTP') IE 6
4. new ActiveXObject('Microsoft.XMLHTTP') IE 5.5+
5. 再向下的 IE 不支持 ajax
+ 你用的 IE 11 浏览器, 跑不起来
=> ajax 是基于内核的兼容

接收响应的兼容
+ 再 IE 低版本里面没有 onload 事件
+ 再 IE 低版本只能使用 onreadystatechange 事件来接收响应
=> 再事件里面进行判断
=> xhr.status 再 200 ~ 299 之间
=> xhr.readyState === 4 的时候
=> 正常使用响应体

var xhr = new XMLHttpRequest()
    console.log(xhr)

    xhr.open('GET', './server/get.php')
    
    xhr.onreadystatechange = function () {
      if (xhr.status >= 200 && xhr.status < 300 && xhr.readyState === 4) {
        console.log(xhr.responseText)
      }
    }

    xhr.send()