认识前后端交互

• 在开发中 我们一定离不开前后端交互
• 其实就是前端像后端发送请求, 想要获取到某一个数据
• 目前 前后端交互的一个主流方式就是利用 ajax (主要是一个 axios 比较火)

利用 ajax 完成一个前后端交互分为一下四部

// 1. 创建一个 ajax
        const xhr = new XMLHttpRequest()
        // console.log(xhr)
// 2. 配置 ajax.    向谁发送请求? 以什么方式发送请求?           这两个问题的答案, 在你们的接口文档中
        // xhr.open('以什么方式请求, 目前开发中只有 post/get', '向谁发送请求', '第三个参数暂时欠着, 可以不写')
        xhr.open('GET', 'http://localhost:8888/test/first')
// 3. 发送 ajax
        xhr.send()

// 4. 监听 请求完成的时间
        xhr.onload = function () {
            // 4.1 请求完成的时候, 说明数据已经给到我们前端, 我们开始使用
            console.log(xhr.responseText)
        }

异步任务问题

 ajax 的异步问题
         
其实就是 配置 ajax 的第三个参数
这个参数默认是 true 表示当前的请求是 异步


            异步: 1 2 3 4
            1. 创建(同步)
            2. 配置(同步)
            3. 发送(异步)
            4. 监听(同步)

            异步: 1 2 4 3
            1. 创建(同步)
            2. 配置(同步)
            4. 监听(同步)
            3. 发送(异步)

            同步: 1 2 4 3
            1. 创建(同步)
            2. 配置(同步)
            4. 监听(同步)
            3. 发送(同步)

            同步: 1 2 3 4
            1. 创建(同步)
            2. 配置(同步)
            3. 发送(同步)      只有当前代码执行完毕 才会去执行下一步, 只有请求完毕后 才会向下继续执行
            4. 监听(同步)      只有请求完毕后才会加载当前代码, 但是当前代码加载完毕的时候, 请求早就结束了, 所以当前的监听函数不会再执行了
         
         
         
同步和异步都可以按照 1 2 4 3 的顺序正常执行, 所以有人推荐按照 1 2 4 3 的顺序书写
但实际开发中一定是使用异步的方式, 所以我们按照 1 2 3 4 或者 按照 1 2 4 3 的顺序书写都可以
        

ajax状态码

ajax 的状态码
利用了一个数字表明 ajax 当前运行到那一步了

        0: ajax 创建完毕
        1: ajax 配置完毕
        2: ajax 发送完毕(后端已经对请求做出响应, 并把请求返回给 浏览器)
        3: 浏览器开始解析后端返回的内容, 如果返回的数据比较少, 那么此时就可以使用数据了, 但是有可能没有解析完毕, 数据不完整, 所以不推荐在这里使用数据
        4: 浏览器的解析的内容已经全部处理完毕, 我们可以开始使用数据了

const xhr = new XMLHttpRequest()
// console.log(xhr.readyState) // 状态码为0

xhr.open('GET', 'http://localhost:8888/test/first')
// console.log(xhr.readyState) // 1

xhr.send()
// console.log(xhr.readyState) // 因为异步的问题所以还是 1

// xhr.onreadystatechange = function () {
//     /**
//      *  监听状态码发生变化的时候执行
//      *      当前会执行3次
//      *          1 变 2
//      *          2 变 3
//      *          3 变 4
//     */
//     if (xhr.readyState === 2) { console.log('2 ---> ajax 发送完毕 (后端已经对请求做出响应, 并把请求返回给 浏览器)') }
//     if (xhr.readyState === 3) { console.log('3 ---> 浏览器开始解析数据, 但是有可能没有解析完毕') }
//     if (xhr.readyState === 4) { console.log('4 ---> 浏览器解析完毕数据', xhr.responseText) }
// }

xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
console.log('4 ---> 浏览器解析完毕数据', xhr.responseText)
}
}

xhr.onload = function () {
    console.log('请求完毕 onload 加载: ', xhr.responseText)
}
// console.log(xhr.readyState) // 因为异步的问题所以还是 1

http 协议

           http 协议
          
               当前协议规定 请求 只能是 前端发起的, 并且在传输过程中, 只能传递字符串

        1. 建立连接
        浏览器和服务器建立连接

        2. 发送请求
        如果需要携带一些参数, 那么需要以请求报文的形式传递
        报文由浏览器进行组装, 我们只需要传递一些对应的信息

        3. 接收响应
        根据请求报文内的相关信息, 确定现在需要做什么事情, 并把必要的数据进行返回
                   返回的内容需要放在 响应报文中

        4. 关闭连接
        浏览器和服务器的连接到此结束


        综上所述, 我们的每一个请求都是完全独立的, 前一个请求和后一个请求没有任何关联
        哪怕两次请求之间的间隔很短, 那也没有任何关联



        重点:
        请求状态码

        100~199: 连接正在进行中(持续进行)
        200~299: 表明连接成功
        300~399: 表明重定向
        400~499: 表明前端错误(没权限 / 传参错误)
        500~599: 表明后端错误

post 和 get请求的差异

              请求方式的差异

        GET: 获取的含义
        POST: 提交的含义


        请求方式最大的差异就是传参


        传参的方式
        GET: 直接在地址后边拼接参数即可, 格式类似于以前的 查询字符串
        POST: 在请求体内书写(其实就是 xhr.send(这小括号内))

        传参的大小
        GET: 2kb 左右
        POST: 原则上没有限制, 但是我们可以在后端添加限制

        传参的安全性
        GET: 明文传输, 相对不安全
        POST: 密文传输, 相对安全

        传参的格式
        GET: 传递的是查询字符串格式
        POST: 原则上也没有限制, 但是传参的时候需要通过 content - type 指定我们传参的格式

post请求

/**
         *  post 的参数一定书写在 xhr.send() 的小括号中
         *
         *  并且 我们也可以传递 查询字符串
         *
         *  那么可以尝试自己书写一下, 看一下能否正确请求成功
        */

        // 1. 创建
        const xhr = new XMLHttpRequest()

        // 2. 配置
        xhr.open('POST', 'http://localhost:8888/test/fourth')

        // 2.5 如果是 post 方式, 并且需要携带参数, 那么需要加一步 设置请求头
        // xhr.setRequestHeader('content-type', 'application/json')   // 如果参数是 json字符串, 需要这样书写
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')   // 如果参数是查询字符串, 需要这样书写

        // 3. 发送
        // xhr.send('key=value&key2=value')
        xhr.send('name=张三&age=18')

        // 4. 监听请求完毕
        xhr.onload = function () {
            const res = JSON.parse(xhr.responseText)

            console.log(res)
        }