ajax--xhr配置项/上传进度条/-请求超时属性timeout-/-请求失败回调函数error

最新推荐文章于 2024-04-11 23:59:37 发布
最新推荐文章于 2024-04-11 23:59:37 发布
阅读量851 收藏 1
点赞数
分类专栏： ajax 文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/miaopasi_poi/article/details/117200195
版权

01-xhr配置项

    <script>
      $.ajax({
        type: 'get',
        url: 'http://127.0.0.1:3001/getHeroSkin',
        // xhr配置项：用于重写或者提供一个增强的 XMLHttpRequest 对象
        xhr: () => {
          // 创建一个自己的 xhr 对象
          const xhr = new XMLHttpRequest()
          // 增强 XMLHttpRequest 对象的代码
          // ....
          // 需要返回一个XMLHttpRequest 对象
          return xhr
        },
        success: (res) => {
          console.log(res)
        },
      })
    </script>
  </body>



02-上传进度条案例

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .progress {
        background-color: #ddd;
        height: 30px;
        width: 400px;
        margin-top: 20px;
      }
      .progress-in {
        background-color: #cc3636;
        height: 30px;
        width: 1%;
        /* 添加过渡效果 - 体验更好 */
        transition: all 0.4s linear;
      }
    </style>
  </head>
  <body>
    <input id="file" type="file" />
    <button>上传</button>
    <!-- 进度条结构 -->
    <div class="progress">
      <div class="progress-in"></div>
    </div>
    <script src="./libs/jquery.min.js"></script>
    <script>
      $('button').click(() => {
        // console.log(11);
        // 获取选中的文件信息
        const file = document.querySelector('#file').files[0]
        if (!file) return alert('请选择文件')

        // 准备请求参数 FormData 格式
        const fd = new FormData()
        fd.append('file_data', file)

        // 发送Ajax请求
        $.ajax({
          type: 'POST',
          url: 'http://127.0.0.1:3001/uploadFile',
          data: fd,
          contentType: false,
          processData: false,
          xhr: () => {
            // 自己创建一个 xhr 对象，用于绑定上传进度事件
            const xhr = new XMLHttpRequest()
            // 上传进度事件
            xhr.upload.onprogress = function (e) {
              // console.log('已经上传的', e.loaded)
              // console.log('总大小', e.total)
              // 已上传百分比计算
              const percentage = Math.round((e.loaded / e.total) * 100) + '%'
              // 百分比进度条效果
              $('.progress-in').css({ width: percentage })
            }
            // 🎃注意：一定要返回增强后的 xhr 对象
            return xhr
          },
          success: (res) => {
            // console.log(res)
            if (res.code === 200) {
              alert('上传成功')
            }
          },
        })

        console.log(file)
      })
    </script>
  </body>
</html>

03-xhr配置项工作原理-了解

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>点击添加英雄皮肤</button>
    <script>
      /*
        🎃 封装自定义ajax方法
          1. 如果请求方式没有传值，默认使用GET
          2. 如果url属性没有传值，退出函数
          3. 请求方式转换成大写(分支判断用到)
          4. GET请求，不带参数 和 带参数写法
          5. POST请求，不带参数 和 带参数写法
          6. onload事件回调函数
      */
      function ajax(options) {
        // 业务1：如果请求方式没有传值，默认使用 GET
        if (!options.type) options.type = 'GET'
        // 业务2. 如果url属性没有传值，退出函数
        if (!options.url) return alert('url必传参数不能省略')
        // 业务3.1 请求方式转换成大写(分支判断用到)
        options.type = options.type.toUpperCase()
        // 业务4.0 把传进来的参数转换成 <URL参数格式>字符串
        const params = new URLSearchParams(options.data).toString()
        // console.log(params)

        // 👀 拓展补充 xhr 配置项工作原理
        let xhr
        // 如果传递了 xhr 配置项，就使用用户的 xhr 对象
        if (typeof options.xhr === 'function') {
          // 接收用户增强后的 xhr 对象
          xhr = options.xhr()
        } else {
          // 如果没有则 jq 内部自己创建 xhr 对象
          xhr = new XMLHttpRequest()
        }
        
        // 公共的：4.1 创建 xhr 对象
        // const xhr = new XMLHttpRequest()
        // 业务3.2 分支判断统一用大写更方便
        if (options.type === 'GET') {
          // console.log('发送GET请求')
          // 4.2 设置 请求方式 和 请求地址
          if (!params) {
            // 4.2.1 GET 没有参数的情况直接设置地址
            xhr.open(options.type, options.url)
          } else {
            // 4.2.2 GET 有参数的情况，需要拼接成： url地址?参数   格式
            xhr.open(options.type, options.url + '?' + params)
          }
          // 4.3 发送请求
          xhr.send()
        } else if (options.type === 'POST') {
          // console.log('发送POST请求')
          // 4.2.1 设置 请求方式 和 请求地址
          xhr.open(options.type, options.url)
          // 4.2.2 设置请求头 - 固定写法
          xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
          // 4.3 发送请求
          xhr.send(params)
        }

        // 公共的：4.4 注册事件，接收服务器响应的数据
        xhr.onload = function () {
          const res = JSON.parse(xhr.responseText)
          // console.log(res)
          if (typeof options.success === 'function') options.success(res)
        }

        // 用于Ajax请求的参数
        console.log(options)
      }

      ajax({
        type: 'get',
        url: 'http://127.0.0.1:3001/getHeroSkin',
        data: { heroName: '刘备' },
        xhr: () => {
          const xhr = new XMLHttpRequest()
          // 写一些增强 xhr 对象的代码
          return xhr
        },
        success: (res) => {
          console.log(res)
          // alert('查询成功')
        },
      })

      // POST 请求调用
      const button = document.querySelector('button')

      button.onclick = function () {
        // Ajax 的 POST 请求

        ajax({
          type: 'POST',
          url: 'http://127.0.0.1:3001/addHeroSkin',
          data: {
            cname: '刘备',
            skin_name: '刘备皮肤',
          },
          success: (res) => {
            console.log(res)
            alert('很棒，添加成功')
          },
        })
      }
    </script>
  </body>
</html>



04-请求超时属性timeout

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .progress {
        background-color: #ddd;
        height: 30px;
        width: 400px;
        margin-top: 20px;
      }
      .progress-in {
        background-color: #cc3636;
        height: 30px;
        width: 1%;
        /* 添加过渡效果 - 体验更好 */
        transition: all 0.4s linear;
      }
    </style>
  </head>
  <body>
    <input id="file" type="file" />
    <button>上传</button>
    <!-- 进度条结构 -->
    <div class="progress">
      <div class="progress-in"></div>
    </div>
    <script src="./libs/jquery.min.js"></script>
    <script>
      $('button').click(() => {
        // console.log(11);
        // 获取选中的文件信息
        const file = document.querySelector('#file').files[0]
        if (!file) return alert('请选择文件')

        // 准备请求参数 FormData 格式
        const fd = new FormData()
        fd.append('file_data', file)

        // 发送Ajax请求
        $.ajax({
          type: 'POST',
          url: 'http://127.0.0.1:3001/uploadFile',
          data: fd,
          contentType: false,
          processData: false,
          // 🕐请求超时 JQ 内部有封装，直接配置即可
          timeout: 500,
          success: (res) => {
            // console.log(res)
            if (res.code === 200) {
              alert('上传成功')
            }
          }
        })

        console.log(file)
      })
    </script>
  </body>
</html>



05-请求失败回调函数error

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .progress {
        background-color: #ddd;
        height: 30px;
        width: 400px;
        margin-top: 20px;
      }
      .progress-in {
        background-color: #cc3636;
        height: 30px;
        width: 1%;
        /* 添加过渡效果 - 体验更好 */
        transition: all 0.4s linear;
      }
    </style>
  </head>
  <body>
    <input id="file" type="file" />
    <button>上传</button>
    <!-- 进度条结构 -->
    <div class="progress">
      <div class="progress-in"></div>
    </div>
    <script src="./libs/jquery.min.js"></script>
    <script>
      $('button').click(() => {
        // console.log(11);
        const file = document.querySelector('#file').files[0]
        // console.log(file)
        if (!file) return alert('请选择文件')
        const fd = new FormData()
        fd.append('file_data', file)
        $.ajax({
          type: 'POST',
          url: 'http://127.0.0.1:3001/uploadFile',
          data: fd,
          contentType: false,
          processData: false,
          xhr: () => {
            const xhr = new XMLHttpRequest()
            xhr.upload.onprogress = function (e) {
              const percentage = Math.round((e.loaded / e.total) * 100) + '%'
              // console.log(percentage)
              $('.progress-in').css({ width: percentage })
            }
            return xhr
          },
          success: (res) => {
            if (res.code === 200) {
              alert('上传成功')
            }
          },
          // 🕐请求超时 JQ 内部有封装，直接配置即可
          timeout: 500,
          // 🕐可以通过 error 捕获请求失败的原因
          error: (xhr, textStatus) => {
            // console.log('请求失败了', textStatus)
            // 如果是请求超时，提示用户换网络环境
            if (textStatus === 'timeout') alert('网络不佳，请换个位置试试')
          },
        })

        console.log(file)
      })
    </script>
  </body>
</html>
喵帕斯_喵太
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
openwrt路由器-timeout while waiting for PADS.
STchaoL的博客
04-12 5626
最近使用openwrt路由器进行PPPoE拨号的时候，经常出现“远程服务器无响应“的错误，log打印日志如下： pppoe: Timeout waiting for PADS packets Unable to complete PPPoE Discovery 我用openwrt配合闪讯的拨号插件来绕过移动的限制，起初我以为是移动的PPPoE服务器更新了算法导致我的路由器算出的账号与它的不...
Ajax-hook：拦截由XMLHttpRequest发出的浏览器的AJAX请求
01-30
阿贾克斯钩原理解析： : 简介Ajax-hook是一个精巧的用于拦截浏览器XMLHttpRequest的库，它可以在XMLHttpRequest对象发起请求之前和接收响应内容之后获得处理权。通过它您可以在对请求和响应进行一些预处理。更新记录...
Ajax 原生ajax-xhr对象文件上传进度条案例
weixin_43294560的博客
12-22 740
<input type='file' > 浏览文件夹 document.querySelector(‘input’).files; 获得文件对象中的文件集合对象 xhr.onload.progress=function(){}; 上传还在进度时的回调函数 event.lengthComputable; 进度度量衡,100%时返回false，否则返回true; event.load...
11.请求超时与网络异常处理
最新发布
yujiabao702的博客
04-11 438
设置请求超时就取消请求，在发送 Ajax 请求的步骤里设置，通过 xhr 对象的 timeout 属性。还可以设置请求超时的回调，通过 xhr 对象的 ontimeout 属性设置。为了呈现请求超时的效果，我们在路由规则里设置 3s 以后服务器才返回结果。可以通过 xhr 对象的 onerror 属性去设置网络异常的回调函数。为了实现网络异常效果，通过后台控制器去设置。请求时间过长的时候需要进行处理。
setTimeout ,xhr,event 线程问题
{ focus : web }
04-30 164
由   http://lifesinger.org/blog/?p=1568    所想   1. javascript 是单线程的，其实只有 xhr是新开了一个线程而已。   第一段代码：   setTimeout(function () { alert(1); }, 0); setTimeout(function () { al...
ajax 上传文件获取进度条
fifthThirteen-- A Rookie Web Front-end development
06-08 668
原生JSvar xhr = new XMLHttpRequest(); xhr.open('POST', 'url'); // 上传完成后的回调函数 xhr.onreadystatechange = function() { if (xhr.status === 200) {　　 console.log(xhr.responseTex...
Ajax - timeout设置ajax请求超时 timeout
Henry_ID的博客
09-07 4795
$.ajax实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />
如何从jQuery的ajax请求中删除X-Requested-With
10-26
要从jQuery的AJAX请求中删除`X-Requested-With`头信息，可以使用`beforeSend`回调函数。`beforeSend`函数会在每次AJAX请求发送之前被调用，允许我们在请求发送前对其进行自定义配置。以下是一个具体的示例： ```...
cordova-plugin-ios-xhr:Cordova iOS 6+ File XHR插件
05-24
科尔多瓦-插件-iOS-XHRcordova-ios 6+ File XHR插件关于最初，此插件是其他两个插件的合并，并与cordova-ios 6+兼容。 自从进行了修改以来， 的代码现在已被完全删除。 它保留在此处作为原始参考。 如果时间允许，...
cordova-plugin-wkwebviewxhrfix:Cordova iOS插件可通过带有Cordova iOS 6+支持的WKWebView通过XHR修复本地文件访问
05-26
Cordova iOS插件可使用WKWebView for Cordova iOS 6+通过XHR修复本地文件访问 关于 安装此插件可使用WKWebView for Cordova iOS 6+通过XHR修复通过XHR进行的本地文件访问，并附带有关“仅HTTP支持跨源请求”的错误...
node-request-interceptor：节点的低级HTTPHTTPSXHR请求拦截库
02-03
尽管有许多网络通信模拟库，但它们倾向于将请求拦截用作实现细节，从而向您展示了一个高级API，其中包括请求匹配，超时，重试等。 这个库是一个条带到骨的实现，它提供了尽可能少的抽象以对NodeJS中的任何请求执
ajax请求设置加载进度条,Ajax 实现加载进度条
weixin_42526101的博客
08-05 1964
ajax beforeSend:先说说这个 beforeSend， 在请求发送前执行 比如 可以判断用户有没有登录 ，如果没有登录就停止请求 并提示。$.ajax({url : 'my_action',dataType: 'script',beforeSend : function(xhr, opts){if(1 == 1) //just an example{xhr.abort(); // 停止...
Ajax
qq_38105960的博客
08-26 146
全称：Asynchronous JavaScript and XML（异步的js和XML） 用途：通过JS语言向服务器请求数据。 什么是ajax?---->js向服务器请求数据，实现异步请求，局部刷新。 原生js中ajax使用步骤 第一步：创建对象 var xhr = new XMLHttpRequest(); 为了兼容低版本的IE浏览器，需要实例化 var xhr = new Act...
jQuery ajax xhr文件上传进度条监听不正确
笑到世界都狼狈的博客
07-11 1773
前段时间项目中有个文件上传要监听上传进度的需求，在网上看了检测进度的方法都大同小异，几乎都是一样的方法，但是这种方法上传小文件似乎看不出什么问题，但是上传大文件的时候（例如3G的大文件，进度条到100%之后，点击保存上传文件的大小为0，也就是说文件还没上传成功，进度条就到100%了，这到底是什么原因呢？？？？？搞的我头皮发麻。。。。。最后突然在网上看到了别人提问的评论，一下子就搞定了，内心无比喜悦...
ajax实现上传文件的进度,jquery+ajax实现异步上传文件显示进度条
weixin_29369347的博客
08-05 627
前言：今天项目中加了一个上传文件加进度条的需求，我就搞了一下。时间宝贵不多说，直接进入正题。异步上传文件是要用到ajax里的一个小的知识点：xhr(XML Http Request)一个对象，xhr对象也是ajax一个核心。关于使用它也很简单：就四步(下面这样写也可以向后端进行发送请求)var xhr=new XMLHttpRequest()//创建xhr对象xhr.open('请求方式','请求...
ajax文件上传进度条实现
weixin_45086164的博客
09-02 1588
ajax文件上传进度条实现
HttpException "Request timed out"的发生原因及调试方法
web开发
10-04 1554
问题简介 在ASP.NET程序中我们经常遇到错误消息为"Request Timed Out"的HttpException,浏览器中的出错信息如下图所示， 同时应用程序日志中也会出现一条警告消息如下 如何重现这种异常？ 线程在处理逻辑的过程中是如何被打断而抛出超时异常？ 如何调试这种异常？ 这篇文章我们从CLR源代码级别来分析一下该问题发生的原因以及相应的调...
ajax超时，修改timeout
qq_42772400的博客
10-31 258
ajax超时，修改timeout 即可。
jQuery AJAX timeout 超时问题详解
爱米酱的博客
12-25 1338
https://blog.csdn.net/u013022210/article/details/72902845  
'Content-Type': 'application/x-www-form-urlencoded'设置请求头
07-15
在前端使用 Ajax 进行 application/x-www-form-urlencoded 参数提交时，可以通过设置请求头的方式指定 Content-Type 为 application/x-www-form-urlencoded。 下面是一个示例代码，展示如何设置请求头： ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值