AJAX-取消发送请求

最新推荐文章于 2023-07-18 13:51:35 发布

得鹿梦为鱼

最新推荐文章于 2023-07-18 13:51:35 发布

阅读量178

点赞数

文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/qq_52460205/article/details/126303140

版权

AJAX-取消发送请求

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>
</head>

<body>
    <button>点击发送</button>
    <button>点击取消发送</button>

    <script>
        //获取元素的对象
        const btns = document.querySelectorAll('button');
        let xhr = null;

        btns[0].onclick = function() {
            //1.创建对象
            xhr = new XMLHttpRequest();
            //2.调用xhr.open('请求方式(get/post..)','请求路径')函数进行初始化
            xhr.open('GET', 'http://127.0.0.1:8000/delay');
            //3.调用xhr.send()函数进行发送
            xhr.send();
        }

        //取消发送请求
        //abort
        btns[1].onclick = function() {
            xhr.abort();
        }
    </script>
</body>

</html>

js代码:

//1.引入express
const express = require('express');

//2.创建应用对象
const app = express();

//3.创建路由规则(回调函数)
// request 是对请求报文的封装
// response 是对响应报文的封装
//延时响应
app.get('/delay', (request, response) => {

    //设置响应头  允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //添加定时器
    setTimeout(() => {

        //设置响应体
        response.send("发送请求成功");
    }, 3000)
});

//4.监听端口启动服务
app.listen(8000, () => {
    console.log("服务器已经启动,8000 端口监听中.....");
})