AJAX (4) — AJAX请求时和缓存问题、取消请求、请求重复发送问题

吃不到棒棒糖的小熊

2024-04-09 帮助1人

一、AJAX请求超时与缓存问题

nodemon自动重启工具

nodemon是一种工具，可以自动检测到目录中的文件更改时通过重新启动应用程序来调试基于node.js的应用程序。

安装命令：npm install -g nodemon

一、AJAX请求超时与缓存问题

先设计出一个需求：

点击按钮，向服务端发送请求，服务端返回结果，加一个超时设置，时间为2s，若2s后没有返回结果，则给用户一个提醒"网络超时，请稍后重试"

完成该需求需要准备前端与服务端内容，准备一个html文件和一个js文件

1.server.js文件

//1.引入express
const { response } = require('express');
const express = require('express');
//2.创建应用对象
const app = express()
//3.创建路由规则
app.get('/delay', (request, response) => {
//设置响应头，设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*')
setTimeout(() => {
//设置响应体
response.send('延时响应')
}, 3000)
});
//4.监听端口启动服务
app.listen(5000, () => {
console.log('服务已经启动，5000端口监听中....');
})

2.html文件

<!DOCTYPE html>
<html lang="en">
<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>请求超时与网络异常</title>
<style>
#result{
width: 200px;
height: 100px;
border:solid 1px #90b;
}
</style>
</head>
<body>
<button>点击发送请求</button>
<div id="result"></div>
<script>
const btn = document.getElementsByTagName('button')[0];
const result = document.getElementById('result')
btn.addEventListener('click',function(){
const xhr = new XMLHttpRequest();
//超时设置 2s
xhr.timeout = 2000;
//超时回调
xhr.ontimeout = function(){
alert("网络异常，请稍后重试！")
}
//网络异常回调
xhr.onerror = function(){
alert('你的网络似乎出了一些问题')
}
xhr.open('GET','http://127.0.0.1:5000/delay');
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status < 300){
result.innerHTML = xhr.response;
}
}
}
})
</script>
</body>
</html>

二、AJAX取消请求

设计一个需求，有两个按钮，点击第一个向服务器发送请求，点击第二个取消请求，如下图：

学新通

调用 abort 方法 手动取消ajax请求

server.js文件不改变，html文件如下：

<body>
<button>点击发送</button>
<button>点击取消</button>
<script>
//获取元素对象
const btns = document.querySelectorAll('button');
let x = null;
btns[0].onclick = function(){
x = new XMLHttpRequest();
x.open("GET","http://127.0.0.1:5000/delay");
x.send();
}
//调用abort方法手动取消ajax请求
btns[1].onclick = function(){
x.abort()
}
</script>
</body>

三、AJAX请求重复发送问题

设计一个需求，点击按钮向服务器发送请求，再次点击时，如果正在发送上一个请求，则取消该请求，创建一个新请求，如下图：

学新通

server.js文件不改变，html文件如下：

<body>
<button>点击发送</button>
<script>
//获取元素对象
const btns = document.querySelectorAll('button');
let x = null;
//标识变量
let isSending = false;//是否正在发送AJAX请求
btns[0].onclick = function(){
//判断标识变量
if(isSending) x.abort();//如果正在发送，则取消该请求，创建一个新的请求
x = new XMLHttpRequest();
//修改标识变量的值
isSending = true;
x.open("GET","http://127.0.0.1:5000/delay");
x.send();
x.onreadystatechange = function(){
if(x.readyState === 4){
//修改标识变量
isSending = false;
}
}
}
</script>
</body>

这篇好文章是转载于：学新通技术网

AJAX (4) — AJAX请求时和缓存问题、取消请求、请求重复发送问题

一、AJAX请求超时与缓存问题

1.server.js文件

2.html文件

二、AJAX取消请求

三、AJAX请求重复发送问题

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

word里面弄一个表格后上面的标题会跑到下面怎么办

《学习通》视频自动暂停处理方法

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

怎样阻止微信小程序自动打开

excel下划线不显示怎么办

excel打印预览压线压字怎么办

photoshop蒙版画笔没反应怎么办

AJAX (4) — AJAX请求时和缓存问题 、取消请求、请求重复发送问题

一、AJAX请求超时与缓存问题

1.server.js文件

2.html文件

二、AJAX取消请求

三、AJAX请求重复发送问题

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

word里面弄一个表格后上面的标题会跑到下面怎么办

《学习通》视频自动暂停处理方法

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

怎样阻止微信小程序自动打开

excel下划线不显示怎么办

excel打印预览压线压字怎么办

photoshop蒙版画笔没反应怎么办

AJAX (4) — AJAX请求时和缓存问题、取消请求、请求重复发送问题