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是没办法监听上传进度条的，只能写个假的了??
本站大部分文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了您的权益请来信告知我们删除。邮箱：1451803763@qq.com