〇、前情提要
在看b站视频 - 尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax最新版），中插了这个知识记录一下。
参考：
我的笔记：
【javaweb】b站-尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax最新版） 笔记
/weixin_43210113/article/details/110628389
b站视频 - 尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax最新版）
/video/BV1WC4y1b78y?p=2
笔记视频链接
链接：/s/1Wnwb42-AaqAlg6cQ0PRHwg
提取码：3waj
————————————————————————————
我的笔记：
【ajax】2.NodeJS的安装与介绍+express框架介绍与基本使用
/weixin_43210113/article/details/110636188
我的笔记：
【ajax】3.GET：AJAX案例准备+AJAX请求的基本操作+AJAX设置请求参数
/weixin_43210113/article/details/110656792
我的笔记：
【ajax】4.POST：AJAX发送POST请求+POST设置请求体
/weixin_43210113/article/details/110664818
我的笔记：
【ajax】5.JSON：服务端响应JSON数据+nodemon自动重启工具安装+Missing write access to /usr/local/lib/node_modules解决方法
/weixin_43210113/article/details/110792442
我的笔记：
【ajax】6.IE缓存问题解决
/weixin_43210113/article/details/110798325
一、请求超时与网络异常处理
如没有安装过NodeJS和expressjs请看↓
我的笔记：
【ajax】NodeJS的安装与介绍+express框架介绍与基本使用
/weixin_43210113/article/details/110636188
如没有安装过nodemon请看
我的笔记：
【ajax】5.JSON：服务端响应JSON数据+nodemon自动重启工具安装+Missing write access to /usr/local/lib/node_modules解决方法
/weixin_43210113/article/details/110792442
5-超时与网络异常.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>请求超时与网络异常</title><style>#result{width:200px;height:100px;border:solid 1px #90b;}</style></head><body><button>点击发送请求</button><div id="result"></div><script>const btn = document.getElementsByTagName('button')[0];const result = document.querySelector('#result');btn.addEventListener('click', function(){const xhr = new XMLHttpRequest();xhr.open("GET",'http://127.0.0.1:8000/delay');xhr.send();xhr.onreadystatechange = function(){if(xhr.readyState === 4){if(xhr.status >= 200 && xhr.status< 300){result.innerHTML = xhr.response;}}}})</script></body></html>
server.js
//1. 引入expressconst express = require('express');//2. 创建应用对象const app = express();//3. 创建路由规则//延时响应app.all('/delay', (request, response) => {//设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');response.setHeader('Access-Control-Allow-Headers', '*');// 设置延时器setTimeout(() => {//设置响应体response.send('延时响应');}, 3000)});//4. 监听端口启动服务app.listen(8000, () => {console.log("服务已经启动, 8000 端口监听中....");});
此时延时响应延迟3s后显示
当增加超时设置，加一个两秒的限制
//超时设置 2s 设置xhr.timeout = 2000;
此时在第二秒时，会自动取消，状态变为canceled
增加超时回调ontimeout
//超时回调xhr.ontimeout = function(){alert("网络异常, 请稍后重试!!");}
增加网络异常回调onerror
//网络异常回调xhr.onerror = function(){alert("你的网络似乎出了一些问题!");}
模拟时找到online，切换为offline
5-超时与网络异常.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>请求超时与网络异常</title><style>#result{width:200px;height:100px;border:solid 1px #90b;}</style></head><body><button>点击发送请求</button><div id="result"></div><script>const btn = document.getElementsByTagName('button')[0];const result = document.querySelector('#result');btn.addEventListener('click', function(){const xhr = new XMLHttpRequest();//超时设置 2s 设置xhr.timeout = 2000;//超时回调xhr.ontimeout = function(){alert("网络异常, 请稍后重试!!");}//网络异常回调xhr.onerror = function(){alert("你的网络似乎出了一些问题!");}xhr.open("GET",'http://127.0.0.1:8000/delay');xhr.send();xhr.onreadystatechange = function(){if(xhr.readyState === 4){if(xhr.status >= 200 && xhr.status< 300){result.innerHTML = xhr.response;}}}})</script></body></html>
二、取消请求
6-取消请求.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>取消请求</title></head><body><button>点击发送</button><button>点击取消</button><script>//获取元素对象const btns = document.querySelectorAll('button');let x = null;btns[0].onclick = function(){x = new XMLHttpRequest();x.open("GET",'http://127.0.0.1:8000/delay');x.send();}// abortbtns[1].onclick = function(){x.abort();}</script></body></html>
abort()为XMLHttpRequest对象自带函数，可以取消请求。
server.js
//1. 引入expressconst express = require('express');//2. 创建应用对象const app = express();//3. 创建路由规则//延时响应app.all('/delay', (request, response) => {//设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');response.setHeader('Access-Control-Allow-Headers', '*');// 设置延时器setTimeout(() => {//设置响应体response.send('延时响应');}, 3000)});//4. 监听端口启动服务app.listen(8000, () => {console.log("服务已经启动, 8000 端口监听中....");});
测试
按下点击发送三秒内点点击取消，则被取消。
三、请求重复发送问题
问题描述
用户重复按下，但请求未完成时，给服务器很大压力。看waterfall部分。
需求：
重复点击时，取消重复的那个。
7-重复请求问题.html
增加一个变量isSending判断
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>重复请求问题</title></head><body><button>点击发送</button><script>//获取元素对象const btns = document.querySelectorAll('button');let x = null;//标识变量let isSending = false; // 是否正在发送AJAX请求btns[0].onclick = function(){//判断标识变量if(isSending) x.abort();// 如果正在发送, 则取消该请求, 创建一个新的请求x = new XMLHttpRequest();//修改 标识变量的值isSending = true;x.open("GET",'http://127.0.0.1:8000/delay');x.send();x.onreadystatechange = function(){if(x.readyState === 4){//修改标识变量isSending = false;}}}// abortbtns[1].onclick = function(){x.abort();}</script></body></html>
server.js
//1. 引入expressconst express = require('express');//2. 创建应用对象const app = express();//3. 创建路由规则//延时响应app.all('/delay', (request, response) => {//设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');response.setHeader('Access-Control-Allow-Headers', '*');// 设置延时器setTimeout(() => {//设置响应体response.send('延时响应');}, 3000)});//4. 监听端口启动服务app.listen(8000, () => {console.log("服务已经启动, 8000 端口监听中....");});
测试
疯狂点击都会被isSending发现
