每日一题:AJAX进度监控(附可运行源码)

news/发布时间2024/7/15 3:55:19

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.lengthbody +=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/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.jwkm.cn/p/70727780.html

如若内容造成侵权/违法违规/事实不符,请联系宁远站长网进行投诉反馈email:xxxxxxxx@qq.com,一经查实,立即删除!

相关文章

记一次 .NET 某电力系统 内存暴涨分析

一:背景 1. 讲故事 前些天有位朋友找到我,说他生产上的程序有内存暴涨情况,让我帮忙看下怎么回事,最简单粗暴的方法就是让朋友在内存暴涨的时候抓一个dump下来,看一看大概就知道咋回事了。 二:Windbg 分析 1. 到底是谁吃了内存 这个问题说的再多也不为过,一定要看清楚这…

每天一个linux命令(42):kill命令

Linux中的kill命令用来终止指定的进程(terminate a process)的运行,是Linux下进程管理的常用命令。通常,终止一个前台进程可以使用Ctrl+C键,但是,对于一个后台进程就须用kill命令来终止,我们就需要先使用ps/pidof/pstree/top等工具获取进程PID,然后使用kill命令来杀掉该…

扩展的多曝光图像合成算法及其在单幅图像增强中的应用。

针对Exposure fusion算法存在的Out-of-range Artifact和low frequency halo两个瑕疵,分析了Extended Exposure Fusion的改进过程,并进一步借助有关方法实现了单幅图像的Simulated Exposure Fusion过程。在拉普拉斯金字塔在多图HDR算法中的应用以及多曝光图像的融合算法简介一…

[Microsoft Azure] 如何在 Azure App Service 上获取内存转储文件

在本文中,我们将探讨如何在 Azure App Service 上获取应用程序的内存转储文件。这对于诊断和解决应用程序性能问题非常有用。在处理 Azure App Service 上运行的应用程序性能问题时,获取内存转储文件可能非常有用。内存转储文件记录了应用程序在某个时刻的内存状态,可以帮助…

Windows 安装 chromedriver 和 Python 调试

下载 chromedriver 从官方网站上下载 chromedriver 的版本,这个版本需要和你 Chrome 的版本对应上。 下载的地址为:ChromeDriver - WebDriver for Chrome - Downloads这个地方,将会打开一个新的浏览器界面,Chrome for Testing availability 在这个新的浏览器界面中,我们能…

光刻机FinFET存储器进行设计,测试验证分析

光刻机FinFET存储器进行设计,测试验证分析 FinFET存储器的设计、测试和修复方法 3.1. FinFET存储器介绍 1. FinFET存储器的挑战 同任何IP模块一样,存储器必须接受测试。但与很多别的IP模块不同,存储器测试不是简单的通过/失败检测。存储器通常都设计了能够用来应对制程缺陷的…