ajax前端取消用户发送重复请求

回到文章总目录
ajax重复发送请求
发送相同的请求。
我们的用户不断点击某个发送请求，服务端响应比较慢或者响应快，都回提升服务端的压力。
我们在前端设置好响应机制，减少服务端的压力。
前端设置通通的请求，在第二次发送的时候，把第一个请求取消掉，只发送新的第二次请求。

接着上一个章节案例二的代码

1.创建在testnine文件夹并在这个文件夹里面
2.创建simpel.html文件
3.创建server.js文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button>点击获取信息</button><button>取消获取的信息</button><div id="result" style="width: 300px;height: 200px;border: solid 2px teal;"></div><script>// 获取元素const btns = document.querySelectorAll('button');let textone = null;// 表识变量     isSending(使我们自己起的变量名字)     用于判断是否正在发送ajax请求   false(不在发送中)  ture(正在发送中)let isSending = false;// 第一个按钮btns[0].onclick =function(){// 判断标识变量               如果正在发送(ture)，则取消该请求，创建新的请求if(isSending) textone.abort();textone = new XMLHttpRequest();// 标识发送状态             修改 (isSending)变量的值  这个时候发送为true，因为进入了发送状态isSending = true;textone.open('GET','http://127.0.0.1:8000/ie');textone.send();// 当请求发送完成，并且接收到完整的数据的时候，变量isSending 更改为原来的falsetextone.onreadystatechange = function(){if(textone.readyState === 4){// 修改标识变量isSending = false;}}}// abortbtns[1].onclick =function(){textone.abort();}// readystate 是textone 对象中的属性，表示状态    有5个值//                                                                                                  状态     意思//                                                                                                     0        没初始化//                                                                                                     1        open方法调用完毕//                                                                                                     2        send方法调用完毕//                                                                                                     3        服务端返回了部分结果//                                                                                                     4        服务端返回了所有结果</script>
</body></html>

// 1. 引入express
const express = require('express');// 2.创建对象
const app = express();
// 3.创建路由规则  里面的形参 request与response   (自己可以随便定义名字的)
//  建议写成  request与response  因为可以见名思意，方便自己看
// request  对请求报文的封装
// responst 对响应报文的封装
//  请求路径为'/server'// 当使用post请求时候会因为发送的信息没有收到对应的结果所以回报错
// 所以该处使用all  表示可以接收任意类型的请求      如get post 等等
app.get('/ie', (request, response)=>{// 设置响应头 设置允许跨域// 头名字为Access-Control-Allow-Origin// 头的值为response.setHeader('Access-Control-Allow-Origin','*');// 响应头        *号表示所有的头信息都可以接收response.setHeader('Access-Control-Allow-Headers','*');// 响应一个数据   把这个对象返回给浏览器const data = {name: 'setTimeout'};// 对对象进行字符串转换let str = JSON.stringify(data);// 设置定时器延时// setTimeout(()=>{},3000);// 设置响应体// response.send(str);// 把响应体放进延时器函数里面setTimeout(()=>{response.send(str);},3000);});// 4. 监听端口启动服务
// 这里listen(8000)后面添加了一个回调，用来提示，告诉自己是否监听成功
app.listen(8000, ()=>{console.log("服务已经启动，8000端口监听中......");
});

ajax前端取消用户发送重复请求相关推荐

避免Ajax多次发送重复请求
第一:多次发送Ajax重复请求由于系统使用Ajax请求时,没有对Ajax重复请求做处理,导致多次重复发送Ajax请求时,前台数据会出现重复加载的问题. 解决方案: 怎样防止重复发送 Ajax 请求? ...
Ajax入门-搭建服务器并使用ajax技术向服务器发送一个请求并获得服务器返回的数据
今天刚入坑学习ajax,刚开始就遇到服务器这一知识盲区,经过解决各种问题,成功运行的代码,下面就分享给你们,希望能够帮你们解决问题. (一)node.js安装 1.进入官网,下载对应版本 2.下载了. ...
node --- 后端使用body-parse解析Post请求,前端使用axios发送Post请求
使用body-parser解析post请求安装 service/index.js npm install --save koa-bodyparser 导入 const Koa = require(' ...
ajax json 403,解决 Ajax 发送 post 请求出现 403 Forbidden 的三种方式
众所周知前端向后台发送 post 请求时,必须验证 csrf,否则会报错 403 Forbidden.使用 Django Form 表单可以直接在表单里面添加 {% csrf_token %} 即可, ...
【.net】通过企业微信web api给指定用户发送消息
前言在很多业务场景中经常会遇到与微博微信进行通信的需求,今天就和大家一起研究一下如果通过企业微信web api给指定用户发送消息一.创建应用 1.打开企业微信并登录 https://work.we ...
JS(HTTP页面)发送HTTPS请求、同源策略
今天遇到一个必须在前端HTTP页面发送HTTPS请求的功能,有点小尴尬,这个跨域问题,也没啥好的解决方式,我网上查了一下,也没啥好的方式! 后来总结了一下,有两种方式: 1.a标签 <a hre ...
取消Ajax请求 || Ajax重复请求问题
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
axios delete有请求体吗_封装 axios 取消重复请求
编者按:本文作者舒丽琦,奇舞团前端开发工程师在我们web开发过程中,很多地方需要我们取消重复的请求.但是哪种场合需要我们取消呢?我们如何取消呢?带着这些问题我们阅读本文. 阅读完本文,你将了解以下内 ...
java 防止url重复请求_Web项目如何防止客户端重复发送请求
在Web项目中,有一些请求或操作会对数据产生影响(比如新增.删除.更新),针对这类请求一般都需要做一些保护,以防止用户有意或无意的重复发起这样的请求导致的数据错乱. 本文总结了一些防止客户端重复发送请 ...

ajax前端取消用户发送重复请求

ajax前端取消用户发送重复请求相关推荐

最新文章

热门文章