回到文章总目录
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 更改为原来的false
textone.onreadystatechange = function(){
if(textone.readyState === 4){
// 修改标识变量
isSending = false;
}
}
}
// abort
btns[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端口监听中......");
});