Ajax学习：取消请求

在发送请求之后，浏览器还没有收到服务器的响应的时候，可以手动取消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();
			}