JS复习-28-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 就是响应体

ajax 的异步问题

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

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

ajax 状态码

    + 状态码
      => 响应状态码: 描述本次请求的状态
      => ajax状态码: 描述 ajax 进行到哪一个步骤了
    + 语法:  xhr.readyState

    0: 创建 ajax 对象成功
    1: 配置请求信息完成
    2: 请求发送出去了, 响应报文回到了浏览器
    3: 浏览器正在解析响应报文
    4: 浏览器解析响应报文成功, 已经可以正常使用 xhr.responseText

发送一个带有参数的 get 请求

    + GET 请求就是直接再地址栏后面拼接 queryString 方式携带参数
    + open 的第二个参数就是请求地址
    + 我们把要携带给后端的内容通过 open 的第二个参数携带过去

	const xhr = new XMLHttpRequest()

    xhr.open('GET', './server/get.php?a=100&b=200')

    xhr.onload = function () {
      console.log(JSON.parse(xhr.responseText))
    }
    xhr.send()

发送一个带有参数的 post 请求

    + POST 携带参数是在请求体, 不需要再地址栏拼接
      => 数据格式无所谓, 但是要和 content-type 配套
    + send() 的括号里面就是请求体
    + 因为你没有设置 content-type 所以后端不能正常按照 $_POST 的方式解析
      => 设置一下请求头, content-type 设置为 application/x-www-form-urlencoded
      => 语法: xhr.setRequestHeader(key, value)

	const xhr = new XMLHttpRequest()

    xhr.open('POST', './server/post.php')

    xhr.onload = function () {
      console.log(JSON.parse(xhr.responseText))
    }
    // post 请求需要再请求之前设置请求头
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
    xhr.send('a=100&b=200')