ajax--发送请求与取消请求
·
基本操作思路1：可以点击多次发送请求按钮，即快速发送多次请求，但请求会在最后一次实现成功，之前所点击的请求都无效取消。
基本操作思路2：设置延迟响应。当在几秒后才能成功发送请求时，我们可以在这几秒种内，还没有成功发送请求之前点击取消请求，即取消成功。
在界面中设置两个按钮，分别控制发送请求与取消请求。
用js语法先获取到两个按钮元素，方便对他们进行后续操作。
点击按钮后判断是否有正在发送的请求，如果有，则中断所有正在发送的请求以保证最后一次点击的请求成功实现。如果没有，则直接发送请求成功。
<!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>Document</title>
</head>
<body>
<button>发送请求</button>
<button>取消请求</button>
<script>
var btns = document.getElementsByTagName("button");
var xhr = null;
//标识，是否正在发送Ajax请求
var isSending = false;
btns[0].onclick = function(){
//判断是否正在发送请求
if(isSending){
//如果正在发送，把他取消掉，在重新发送新的请求。
xhr.abort();
}
xhr = new XMLHttpRequest()
//修改标识，代表正在发送
isSending = true;
xhr.open("get","http://127.0.0.1:9000/05-daley")
xhr.send();
xhr.onreadystatechange=function(){
if(xhr.readyState===4){
if(xhr.status>=200&&xhr.status<300){
//修改标识，代表没有发送请求
isSending=false
}
}
}
}
btns[1].onclick=function(){
//取消请求
xhr.abort();
}
</script>
</body>
</html>
在后端设置延迟装置，settimeout为2秒，即在点击发送请求后，有两秒钟的思考时间可以取消。否则，发送成功。后端代码如下：
const { request } = require("express");
var express =require("express")
var app = express()
app.all("/05-daley",function(request,response){
response.setHeader("Access-Control-Allow-Origin","*")
response.setHeader("Access-Control-Allow-Headers","*")
setTimeout(function(){
response.send("延迟了")
},2000)
})
app.listen(9000,function(){
console.log("服务器已经启动");
})
我用的是post请求，大家在用post请求时记得允许跨域和允许设置自定义请求哈，同时改成关键字all哈。
最后温馨提示一定一定要记得在终端启动js服务器！！！我真的好多次忘记启动直接在前端运行失败。
欢迎兄弟姐妹们一起讨论哦~
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
1
0- 0
已为社区贡献2条内容
所有评论(0)