【Ajax】笔记-Ajax重复发送请求

news2024/11/28 8:37:23

问题的产生

用户频繁地点击一个发送请求的按钮,服务器就会频繁地处理请求,而且处理的内容是一样的,这样会导致服务器的压力很大。
这种情况下服务器就没有必要处理每一个请求。

解决方案

发送请求的时候先查看有没有正在请求的相同请求,如果有就将之前的请求关闭,发布当前的新请求。
好处是服务器接受且只接收一个请求,大大提高了效率。

  1. 代码实现:
    通过设置标识来判断是否将该请求取消
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>重复请求问题</title>
</head>
<body>
    <button>点击发送</button>
    <script>
        //获取元素对象
        const btns = document.querySelectorAll('button');
        console.log(btns);
        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:8000/delay');
            x.send();
            x.onreadystatechange = function(){
                if(x.readyState === 4){
                    //修改标识变量
                    isSending = false;
                }
            }
        }
    </script>
</body>
</html>
  1. server.js
// 1.引入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(8000, () => {
    console.log('服务已经启动,8000端口监听中……')
})

  1. 测试
    当连续相同请求,当上一次服务还未响应时,就会停止上一次的请求并重新发出当前申请的请求
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/777829.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

docker - prometheus+grafana监控与集成到spring boot 服务

一、Prometheus 介绍 1.数据收集器&#xff0c;它以配置的时间间隔定期通过HTTP提取指标数据。 2.一个时间序列数据库&#xff0c;用于存储所有指标数据。 3.一个简单的用户界面&#xff0c;您可以在其中可视化&#xff0c;查询和监视所有指标。二、Grafana 介绍 Grafana 是一…

Android图形系统之ANativeWindow与Surface关系(十二)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

Unity 之 错误的停止协程的方式

相信很多人都会这样开启一个协程 StartCoroutine(Cor_1()); 这样确实没啥毛病&#xff0c;那么怎么关掉这个协程呢&#xff0c;是不是在想也是一样的传cor_1()这个参数&#xff0c;然后start对应stop,试着输入stopCor....诶&#xff0c;代码提示有这个方法喔&#xff0c;然后…

【计算机网络】socket编程基础

文章目录 1. 源IP地址和目的IP地址2. 理解MAC地址和目的MAC地址3. 理解源端口号和目的端口号4. PORT与PID5. 认识TCP协议和UDP协议6. 网络字节序7. socket编程接口7.1 socket常见API7.2 sockaddr结构 1. 源IP地址和目的IP地址 因特网上的每台计算机都有一个唯一的IP地址&#…

windows命令之获取电脑已经连接过的wifi的密码

有时候想连接wifi不知道密码&#xff0c;恰巧电脑此时正连接着能用的wifi&#xff0c;想获取密码吗&#xff0c;使用下面这个指令&#xff1a;这个指令能获取历史连接的wifi的信息&#xff0c;密码也是之前连接的时候保存的密码&#xff0c;并不能获取某个wifi的正确密码 netsh…

Redis进阶(2)——Redis数据的持久化 CAP分布式理论(高可用性) Redis主从搭建 Redis的哨兵机制

目录 引出Redis数据的持久化RDB方式(redis database数据备份文件)RDB工作机制RDB优势和劣势RDB常用参数 AOF的方式&#xff08;命令追加&#xff09;AOF优缺点 Redis集群CAP理论 主从搭建(Master/Slave)主master的redis自定义docker静态网段创建文件上传redis.conf到conf文件夹…

物联网的介绍

目录 1.什么是物联网 2.物联网给人类带来的福利 3.学习物联网需要什么知识 4.物联网未来的发展趋势 5.物联网专业的就业前景 1.什么是物联网 物联网&#xff08;Internet of Things&#xff0c;简称IoT&#xff09;是指连接、交互和共享数据的各种物理设备、传感器、软件和…

你的语言是第几名?

2023年已经过半&#xff0c;最新一期的编程语言排行榜你看了吗&#xff1f;刚刚&#xff0c;全球知名编程语言社区TIOBE公布了7月榜单&#xff0c;一起来看吧&#xff01; TIOBE 7 月 TOP 15 编程语言&#xff1a; 详细榜单可参考官网&#xff1a; https://www.tiobe.com/tio…

进阶C语言——数据的存储

Hello&#xff0c;时间过的好快&#xff0c;从我一开始在csdn写的第一篇文章&#xff0c;距离现在已经过去一个多月了&#xff0c;我也在csdn收获了一些粉丝&#xff0c;你们的点赞就是我的动力&#xff0c;希望大家也越来越强&#xff0c;好了&#xff0c;进入我们的正题 &…

STL中的string类的模拟实现【C++】

文章目录 默认成员函数构造函数拷贝构造函数 赋值运算符重载函数析构函数beginendsizecapacityreserveeraseresizepush_backappendoperatorinsertswapsubstrc_stroperator[ ]findcleargetline>>运算符的重载<<运算符的重载 默认成员函数 构造函数 构造函数设置为…

^(按位异或)操作符详解

因为未知&#xff0c;所以全力以赴 目录 例1.实现两个数的交换 例2.找出单身狗 1.简单版 2.进阶版 大家好&#xff0c;我是纪宁。这篇博客介绍^操作符及使用案例。 位操作符是对操作数的二进制补码进行操作。^就是位操作符的一种&#xff0c;叫按位异或操作符。计算结果是…

【期末课程设计】学生成绩管理系统

因其独特&#xff0c;因其始终如一 文章目录 一、学生成绩管理系统介绍 二、学生成绩管理系统设计思路 三、源代码 1. test.c 2. Student Management System.c 3.Stu_System.c 4.Teacher.c 5.Student Management System.h 前言&#xff1a; 学生成绩管理系统含教师…

C语言每日一题:1.证明尼克彻斯定理。

思路1&#xff1a; 0.输入一个值作为n 1.假设输入的n4计算4^364. 2.因为他们都是连续的奇数可以把它写成另一种方法&#xff0c;每一个数之间相差2。 4^313(132)(134)(136); 3.64-(246)52–>52/4等于13 4.这样的话我们就找到了连续奇数的第一个数字。 //具体代码&#xff1a…

Selenium 修改 HTTP 请求头三种方式

目录 前言&#xff1a; 什么是 HTTP 请求头 需要更改 HTTP 请求请求头 Selenium 修改请求头 Java HTTP 请求框架 代码实战 使用反向代理 使用 Firefox 扩展 下载火狐浏览器扩展 加载火狐扩展 设置扩展首选项 设置所需的功能 完整自动化用例 前言&#xff1a; Sele…

USB转串行通信芯片FT2232

1 FT2232主要特性 1&#xff09;2232表示支持2个RS232。 2&#xff09;FT2232D最高支持full-speed&#xff0c;所以时钟是12MHz&#xff1b;而FT2232H最高支持high-speed&#xff0c;所以时钟是60MHz。 3&#xff09;FT2232的Port A和Port B会在Windows设备管理器的“通用串行总…

九、正则表达式详解:掌握强大的文本处理工具(一)

文章目录 &#x1f340;引言&#x1f340;正则表达式的基本语法&#x1f340;常用操作符&#x1f340;实例应用&#x1f340;具体操作演示 &#x1f340;引言 正则表达式(Regular Expression)是一种强大的文本处理工具&#xff0c;常用于搜索、匹配和替换操作。它使用一种特定的…

jenkins Transferred 0 file(s)问题

每次构建都都是成功&#xff0c;但是就没有就是没有传输过去文件 Transferred 0 file(s) 因为jenkins是容器启动&#xff0c;会考虑有没有可能是从容器ssh传输呢&#xff1f; &#xff08;如果不是容器启动得&#xff0c;就把源文件地址改成 相对路径就行&#xff09; 我就在容…

17.matlab数据分析多项式的积分(matlab程序)

1.简述 Matlab中对多项式进行积分 &#xff08;1&#xff09;多项式的微分操作由polyder函数实现 &#xff08;2&#xff09;MATLAB中没有专门的对多项式积分函数&#xff0c;但可以用[p./length(p):1:-1]的方法完成积分&#xff0c;k为常数 2.代码 clc; clear all; p1[2 6 8];…

​ jgliu的​博客推荐 rapidIO/DDR/SPI/I2C

在博客园中发现一位博主的文章质量比较高 作者&#xff1a; jgliu 这里贴几篇感兴趣的文章地址 1.rapidIO从基础到原理到实现都有很详细的介绍&#xff0c;虽然该高速接口在FPGA中用的较多&#xff0c;ASIC不常用&#xff0c;但通过rapidIO的学习 可以加深对高速接口的理解-…

二十四章:SEgmentation TRansformer (SETR)——以Transformer的序列到序列的视角重新思考语义分割问题

0.摘要 最近的语义分割方法采用了全卷积网络&#xff08;FCN&#xff09;和编码器解码器架构。编码器逐渐降低空间分辨率&#xff0c;并学习具有更大感受野的抽象/语义视觉概念。由于上下文建模对于分割是至关重要的&#xff0c;最新的研究工作将重点放在增加感受野上&#xff…