aj ax

ajax

ajax

        - 前后端交互的手段
        - 自己的固定步骤
           1. 创建 ajax 对象
              - 语法：const xhr = new XMLHttpRequest()
           2. 配置本次的请求信息
              - 语法：xhr.open(请求方式，请求地址，是否异步)
           3. 把本次请求发送出去
              - 语法：xhr.send()
           4. 接受本次响应
              - 依赖事件接受
              - 事件：xhr.onload = function () {
                 console.log(xhr.responseText)
              }   
    
     是否异步
        - 在一个ajax内，哪些代码是同步，哪些代码是异步
             1. const xhr = new XMLHttpRequest()
                 -同步代码
             2. xhr.open(请求方式，请求地址，是否异步)
                 -同步代码
             3. xhr.send()
                 -发送：一定是同步
                 -接受：根据 open 的第三个参数配置的
             4. xhr.onload = function () {}
                 - 事件绑定是 同步绑定

              结论：
                - 当你发送异步请求的时候，可以按照 1 2 3 4 或者 1 2 4 3 的顺序书写代码
                - 当你发送同步请求的时候，必须按照 1 2 4 3的顺序书写代码
                - 最终以后都是按照 1 2 4 3 的顺序书写代码

     异步请求
        代码执行
           1.创建 ajax 对象
           2.配置信息（异步）
           3.同步发送请求出去
           4.同步绑定事件（当请求完成时触发）
           5.所有同步代码执行完毕，响应回来了
           6.请求完成了，因为此时已经绑定了事件，会触发 onload

           const xhr = new XMHttpRequest()
           xhr.open('GET','http://localhost:8888/test/first')
           xhr.send()
           xhr.onload = function() {
              console.log(xhr.responseText)
           }

     同步请求
        代码执行
           1.创建 ajax 对象
           2.配置信息（同步）
           3.同步发送请求出去
           4.同步等待响应回来
           5.响应回到浏览器了，本次请求完成了，但是此时没有事件，不会执行任何事件处理函数
           6.同步绑定事件，此时绑定了请求完成时触发的事件


           const xhr = new XMLHttpRequest()
           xhr.open('GET','http://localhost:8888/test/first',false)
           xhr.send()
           xhr.onload = function() {
              console.log(xhr.responseText)
           }

     ajax 状态码
        - 是用一个数字来表示一个 ajax 生命周期的各个过程
        
     如何获取 ajax 状态码
        - 0     表示创建 ajax 完成
        - 1     表示配置本次请求信息完成
        - 2     发送请求，并且响应已经回到浏览器的瞬间（响应报文来到了浏览器，但是浏览器还没有解析响应报文）
        - 3     浏览器正在解析响应报文，并且逐步把响应报文内的内容填充在 xhr.responseText 内
        - 4     浏览器解析响应报文结束，并且已经把响应全体填充在 xhr.responseText内，结束本次请求

     一个事件也能用来处理兼容问题
         - onload 这个事件只能在标准浏览器内才有
         - 在IE 低版本是没有 onload 事件
         - 在IE 低版本使用的是 readystatechange 事件
         
        const xhr = new XMLHttpRequest()
        xhr.open('GET','http://localhost:8888/test/first')
        xhr.onreadystatechange = function() {
           if(xhr.readyState === 4) {
              console.log(xhr.responseText)
           }
        }
        xhr.send()
   

     发送一个带有参数的get 请求
        get 请求的参数是直接在地址后面以查询字符串的形式拼接   

     发送一个带有参数的 post 请求
        - 因为 post 请求是在请求体内传递参数
        - xhr.send() 后面的（）内就是书写请求体的位置
        -使用 post 方式携带参数的时候，可以携带多种格式
           - 你要在请求头内的 content-type 字段说明你是什么格式的数据
        -注意：如果你发送的是 post 请求，需要在 send 之前设置请求头信息

        设置请求头内 content-type 信息
        语法：xhr.setRequestHeader(字段名称，值)

     promise - 承诺
        一个承诺多少个状态？
           1. 持续   pending
           2. 成功   fulfilled
           3. 失败   rejected
            -注意：一个promise 的状态转换只有两种
              1.  持续 =》 成功
              2.  持续 =》 失败

        基本语法
           1. 创建 Promise
             语法：const p = new Promise(function (第一个形参，第二个形参) { 异步代码 })
                - 第一个形参（resolve）  能把当前 Promise 的状态转换为成功
                - 第二个形参（reject）  能把当前Promise 的状态转换为 失败
           2. 状态转换为成功是，触发的函数
             语法：p.then(function() {})
           3. 状态转换为失败时，触发的函数
             语法：p.catch(function () {})
          
     async 和 await
        - 是两个关键字
        - ES7+ 出现的，专门为了 Promise 语法提供的两个关键字
        - 目的：为了把异步代码写的看起来像同步代码
     
     async 关键字的用法
        - 书写在函数前面
        - 目的：为了在该函数内可以使用 await 关键字

     await 关键字的用法
        - 书写在一个有 async 关键字的函数内
        - await 后面等的必须是一个 Promise 对象
        - 本该使用 then 接受的结果，可以直接在前面定义变量接受