在发送请求之后,浏览器还没有收到服务器的响应的时候,可以手动取消ajax请求
服务端部分:
//1、导入express
const express=require('express')
//2、创建应用对象 创建web服务器
const app=express()
//3、创建路由规则
//监听客户端的GET请求和POST请求,并向客户端响应具体内容
//requset是对请求报文的封装
//response是对响应报文的封装
app.get('/timeout',function(requset,response){
//设置响应头 名称 值----设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//设置延时
setTimeout(()=>{
//设置响应体
response.send('延时效果');//3s之后返回给客户端
},3000)
})
//4、监听端口 启动服务
//启动服务器.lisen(端口号,(启动成功职之后的回调函数)) 端口号是80可以省略
app.listen(8000,()=>{
console.log('8000启动成功')
})
html部分:
<button>发送请求</button>
<button>取消请求</button>
两个按钮,一个发送请求,一个取消请求
js部分:发送请求部分
const btns = document.querySelectorAll('button'); //获取所有元素对象
btns[0].onclick = function() {
//发送请求
const xhr = new XMLHttpRequest();
xhr.open("GET", "http://127.0.0.1:8000/timeout");
xhr.send();//发送
//事件绑定可以不加 因为不需要看到结果
// xhr.onreadystatechange = function() {
// if (xhr.readyState === 4) {
// if (xhr.status < 300 && xhr.status >= 200) {
// }
// }
// }
}
出现待处理说明还在请求中,200显示标识请求成功
需要借助对象上的方法const xhr = new XMLHttpRequest(); xhr的 abort()方法
取消请求部分(由于不在作用域不在同一个,所以无法使用上一个函数里面的变量,所以使用let,不能使用const 因为值一变更就会报错)
const btns = document.querySelectorAll('button'); //获取所有元素对象
let xhr = null;
btns[0].onclick = function() {
//发送请求
xhr = new XMLHttpRequest();
xhr.open("GET", "http://127.0.0.1:8000/timeout");
xhr.send(); //发送
//事件绑定可以不加 因为不需要看到结果
// xhr.onreadystatechange = function() {
// if (xhr.readyState === 4) {
// if (xhr.status < 300 && xhr.status >= 200) {
// }
// }
// }
}
btns[1].onclick = function() {
xhr.abort();
}