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

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>

3.2.2 上传进度条实现

目前fetch是没办法监听上传进度条的，只能写个假的了

4 GPT免费地址

https://www.hangyejingling.cn/