每日一题：AJAX进度监控（附可运行源码）

来源：cnblogs　　作者：菜鸟小何　　时间：2023/9/19 8:41:29　　对本文有异议

1、什么是AJAX

AJAX（Asynchronous JavaScript and XML）是一种用于在网页上进行异步通信的技术。它允许在不刷新整个页面的情况下，通过在后台与服务器进行数据交换来更新部分网页内容。

传统的网页开发中，当用户与网页进行交互时，需要刷新整个页面才能获取最新的内容。而使用AJAX，可以通过JavaScript和异步请求发送HTTP请求到服务器，并在后台处理数据，然后使用JavaScript将返回的数据动态更新网页上的特定部分，而不必重新加载整个页面。

AJAX 的核心思想是利用浏览器提供的 XMLHttpRequest 对象（现代的fetch API也可以），通过异步方式向服务器发送请求，并处理服务器返回的数据。这样，可以实现无刷新的数据交互和局部更新，使得网页更加动态和响应式。

XML（Extended Markup Language）曾经是AJAX中最常用的数据格式，但现在更常用的是使用JSON（JavaScript Object Notation）作为数据交换的格式。JSON相比于XML更轻量且易于解析，同时也更符合JavaScript对象的结构。

AJAX被广泛用于Web开发中的各种场景，如实时搜索、动态加载内容、表单验证、聊天应用等。它极大地改善了用户体验，提升了网页性能，并为现代Web应用的开发提供了更丰富的功能。

需要注意的是，AJAX并不是一种具体的编程语言或技术，而是一种概念和方法论。它涉及多个技术的综合应用，包括HTML、CSS、JavaScript、XML/JSON以及服务器端的后台处理等。

2、AJAX实现方式

xhr （axios基于xhr）
fetch (umi-reuqest基于fetch)

异同：

3、两中API分别实现进度监控

3.1 xhr

3.1.1 下载进度条实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-button @click="downFile">下载</el-button>
    <el-button @click="stopDownFile">暂停</el-button>
    <el-progress type="circle" :percentage="percentage"></el-progress>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    var xhr = new XMLHttpRequest()
    new Vue({
        el: '#app',
        data: function() {
            return {
                visible: false,
                percentage:0
            }
        },
        mounted(){
        },
        methods:{
            downFile(){
             
                // 重点，添加舰艇进度函数
                xhr.addEventListener('progress',e => {
                    this.percentage = Number((e.loaded/e.total*100).toFixed(2))
                })
                xhr.open('GET', 'https://www.xxxxx.com/test.text.zip')
                xhr.send()
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        // 获取服务器响应的数据
                        console.log(xhr.responseText)
                    }
                }
            },
            stopDownFile(){
                xhr.abort()
            }
        }
    })
</script>
</html>

3.1.2 上传进度条实现

原理几乎一致，将上述监听下载的方法，改为监听上传的方法即可

  xhr.upload.addEventListener('progress',e => {
                    this.percentage = Number((e.loaded/e.total*100).toFixed(2))
  })

3.2 fetch

在使用Fetch API进行请求时，当前浏览器并没有提供直接的方法来暂停或中止正在进行的Fetch请求。Fetch API是基于Promise的，一旦请求被发送，它将继续执行直到完成或失败。

3.2.1 下载进度条实现

fetch比较麻烦，因为fetch基于promise，没有进度条事件。所以我们要用别的方法
原理很简单，从http头拿到总数据量。再把当前已经加载数据量/总数据量

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-button @click="downFile">下载</el-button>
    <el-button @click="stopDownFile">暂停</el-button>
    <el-progress type="circle" :percentage="percentage"></el-progress>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    var xhr = new XMLHttpRequest()
    new Vue({
        el: '#app',
        data: function() {
            return {
                visible: false,
                percentage:0
            }
        },
        mounted(){
        },
        methods:{
           async downFile(){
                const resp = await fetch('https://www.xxxxx.cn/test.text.zip',{
                    method:'GET'
                })
               //拿到总数据量
               const total = resp.headers.get('content-length')
               //累计已加载数据量
               const decoder = new TextDecoder()
               let body = ''
               const reader = resp.body.getReader() //总的数据流
               let loaded = 0;
                while (1){
                    const {done,value} = await reader.read(); //每次读取的数据流
                    if(done){
                        break;
                    }
                    loaded += value.length
                    body +=decoder.decode(value)
                    this.percentage = Number((loaded/total*100).toFixed(2))
                }
            },
            stopDownFile(){
                xhr.abort()
            }
        }
    })
</script>
</html>