JS AJAX

小白泥
88 阅读3分钟

创建 ajax

js
    const xhr = new XMLHttpRequest()

配置 ajax

js
    xhr.open('请求的方式','向哪里发送请求')

发送 ajax

js
    xhr.send()

监听 ajax

js
    xhr.onload = function () {
        console.log(xhr.responseText)
    }

ajax 的异步问题

js
    这个就是 配置 ajax 的第三个参数
    这个参数默认 是 true 表示当前的请求 是 异步  false 表示 同步

ajax 的状态码

js
    利用了一个数字表明 ajax 当前运行到哪一步了
        0：ajax 创建完毕
        1：ajax 配置完成
        2：ajax 发送完毕（后端已经对请求做出响应，并把请求返回 浏览器）
        3：浏览器开始解析后端返回的内容，如果返回的数据比较少，那么此时就可以使用数据了，但是
        有可能没有解析完毕，数据不完整，所以不推荐在这里使用数据
        4： 浏览器的解析的内容已经全部处理完毕，我们可以开始是用数据了

代码 演示

js
    <script>
        const xhr = new XMLHttpRequest()
        console.log(xhr.readyState)  // 0
        xhr.open('GET','http://localhost:8888/test/first')
        console.log(xhr.readyState)  // 1
        xhr.send() 
        xhr.onreadystatechange = function () {
            if(xhr.readyState === 2){
                console.log('ajax 完成后')  // ajax 完成后
            }else if(xhr.readyState === 3){
                console.log('浏览器开始解析') // 浏览器开始解析
            } 
        }
    </script>

Http协议

js
    当前协议规定 请求 只能是 前端发起的，并且在传输过程中，只能传输字符串
    1、建立连接
        浏览器和服务器建立连接
    2、发送请求
        如果需要携带一些参数，那么需要以请求报文的形式传递
        报文由浏览器进行组装，我们只需要传递一些对应的信息
    3、接收响应
        根据请求报文的相关信息，确定现在需要做什么事情，并把必要的数据进行返回
        返回的内容需要放在 响应报文中
    4、 关闭连接
        浏览器和服务器的连接到此结束
    综上所述，我们的每一个请求都是完全独立的，前一个请求和后一个请求没有任何关联
    哪怕两次请求之间的间隔很短，那也没有任何关联
   
   
   请求状态码
       100~199：  连接正在进行中（持续进行）
       200~299：  表明连接成功
       300~399：  表明重定向
       400~499：  表明前端错误
       500~599：  表明后端错误

请求方式的差异

js
    GET:  获取的含义
    POST: 提交的含义
    
    请求方式最大的差异就是传参
    
        传参的方式
            GET: 直接在地址后边拼接参数即可，格式类似于前的 查询字符串
            POST: 在请求体内书写（其实就是 xhr.send(这个小括号)）
        传参的大小
            GET: 2kb 左右
            post: 原则上没有限制，但是我们可以在后端添加限制
        传参的安全性
            GET: 明文传输，相对不安全
            POSt: 密文传输，但相对安全
        传参的格式
            GET: 传参的是查询字符串格式
            POST：原则上也没有限制，但是传参的时候需要通过 contenet-type  指定我们传参的格式
avatar
文章
阅读
粉丝