Go back to the general list of articles.
Ajax repeats
the request. Send the same request.
Our users keep clicking on a certain sending request, and the server responds slowly or quickly, which increases the pressure on the server.
We set up a response mechanism on the front end to reduce the pressure on the server.
The front end sets up all requests. When sending it for the second time, cancel the first request and only send a new second request.
Follow the code of Case 2 in the previous chapter
1. Create in testnine文件夹and in this folder
2. Create simpel.html文件
3. Createserver.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端口监听中......");
});