ajax--发送请求与取消请求

最新推荐文章于 2024-05-06 22:57:52 发布

马德里甜欣

最新推荐文章于 2024-05-06 22:57:52 发布

阅读量1.2k

点赞数 1

文章标签： ajax 前端 javascript node.js

本文链接：https://blog.csdn.net/weixin_51564923/article/details/122225995

版权

基本操作思路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服务器！！！我真的好多次忘记启动直接在前端运行失败。

欢迎兄弟姐妹们一起讨论哦~

马德里甜欣

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajax--发送请求与取消请求

基本操作思路1：可以点击多次发送请求按钮，即快速发送多次请求，但请求会在最后一次实现成功，之前所点击的请求都无效取消。基本操作思路2：设置延迟响应。当在几秒后才能成功发送请求时，我们可以在这几秒种内，还没有成功发送请求之前点击取消请求，即取消成功。在界面中设置两个按钮，分别控制发送请求与取消请求。用js语法先获取到两个按钮元素，方便对他们进行后续操作。点击按钮后判断是否有正在发送的请求，如果有，则中断所有正在发送的请求以保证最后一次点击的请求成功实现。如果没有，则直接发送请求成功。&l
复制链接

扫一扫