Ajax的一些基本操作
- AJAX设置请求参数
- AJAX发送POST请求
- post设置请求体
- POST设置请求头信息
- 服务端响应json数据
- nodemon自动重启工具安装
- AJAX中的IE缓存问题
- AJAX请求超时与网络异常处理
- AJAX取消请求
- AJAX重复发送请求
AJAX设置请求参数
继续使用上一篇文章案例及其代码。在GET请求中，如何设置URL的参数。在代码中的URL地址后边加一个？进行分割，然后在写要传递的参数。如果是多个参数，要用&进行隔开。
GET.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX GET请求</title>
<style>
#result {
width: 200px;
height: 100px;
border: solid 1px #90b;
}
</style>
</head>
<body>
<button>点击发送请求</button>
<div id="result"></div>
<script>
//获取button元素
const btn = document.getElementsByTagName('button')[0];
const result = document.getElementById("result");
//绑定事件
btn.onclick = function () {
// //测试
// console.log('test');
//AJAX操作
//1.创建对象,其中xhr名字可以自定义，可以写a，写b等等。
const xhr = new XMLHttpRequest();
//2.做初始化，设置请求方法和URL
//使用问号分割，然后设置要传递的参数a
xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200');
//3.发送
xhr.send();
//4.事件绑定 作用是处理服务端返回的结果。
//on 表示当...的时候。
//readystate 是xhr对象中的属性。表示状态，有五个值 0 1 2 3 4分别表示程序不同的运行状态
//change 改变的时候触发
xhr.onreadystatechange = function () {
//判断,如果值为4，表明服务端返回了所有的结果
if (xhr.readyState === 4) {
//判断响应的状态码 如404
//当状态码为200到300时，表明成功拿到数据
if (xhr.status >= 200 && xhr.status < 300) {
//处理服务端返回的结果,结构为行 头 空行 体
console.log(xhr.status);//响应行里的状态码
console.log(xhr.statusText);//响应行里的状态字符串
console.log(xhr.getAllResponseHeaders());//所有响应头
console.log(xhr.response);//响应体
//设置result的文本
result.innerHTML = xhr.response;
}
else {
}
}
}
}
</script>
</body>
</html>
输出如下，可以看到有对应的参数。
AJAX发送POST请求
案例准备，如下。实现一个方框。
POST.html代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX post请求</title>
<style>
#result{
width: 200px;
height: 100px;
border: solid 1px #903;
}
</style>
</head>
<body>
<div id="result"></div>
</body>
</html>
输出页面效果
案例需求是，当把鼠标放到方框时，向服务端发送请求，服务端的响应体返回内容在框中显示。先做一个测试，鼠标放入框中，控制台会打印输出一个test。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX post请求</title>
<style>
#result{
width: 200px;
height: 100px;
border: solid 1px #903;
}
</style>
</head>
<body>
<div id="result"></div>
<script>
//1.获取元素对象
const result=document.getElementById("result")
//2.绑定事件,鼠标移动事件
result.addEventListener("mouseover",function(){
//做一个测试。
console.log('test');
})
</script>
</body>
</html>
测试输出如下
最后POST请求在post.html内写法如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX post请求</title>
<style>
#result{
width: 200px;
height: 100px;
border: solid 1px #903;
}
</style>
</head>
<body>
<div id="result"></div>
<script>
//1.获取元素对象
const result=document.getElementById("result")
//2.绑定事件,鼠标移动事件
result.addEventListener("mouseover",function(){
// //做一个测试。
// console.log('test');
//3.创建对象
const xhr=new XMLHttpRequest();
//4.初始化，设置请求类型和URL
xhr.open('POST','http://127.0.0.1:8000/server?a=100&b=200')
//5.发送
xhr.send();
//6.事件绑定
//on 表示当...的时候。
//readystate 是xhr对象中的属性。表示状态，有五个值 0 1 2 3 4分别表示程序不同的运行状态
//change 改变的时候触发
xhr.onreadystatechange = function () {
//判断,如果值为4，表明服务端返回了所有的结果
if (xhr.readyState === 4) {
//判断响应的状态码 如404
//当状态码为200到300时，表明成功拿到数据
if (xhr.status >= 200 && xhr.status < 300) {
//处理服务端返回的结果,结构为行 头 空行 体
console.log(xhr.status);//响应行里的状态码
console.log(xhr.statusText);//响应行里的状态字符串
console.log(xhr.getAllResponseHeaders());//所有响应头
console.log(xhr.response);//响应体
//设置result的文本
result.innerHTML = xhr.response;
}
else {
}
}
}
})
</script>
</body>
</html>
注意：server.js内创建路由规则，要多创建一个POST的规则。
//1.引入express
const express = require('express');
//2.创建应用对象
const app = express();
//3.创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/server', (request, response) => {
//设置响应头,头的名字就是Access-Controll-Allow-Origin
//作用是设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//设置响应体
response.send('HELLO AJAX');
});
app.post('/server', (request, response) => {
//设置响应头,头的名字就是Access-Controll-Allow-Origin
//作用是设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//设置响应体
response.send('HELLO AJAX POST');
});
//4.监听端口启动服务
//监听端口选择8000，后边在接一个回调函数
app.listen(8000, () => {
console.log("服务已经启动，8000端口监听中...");
})
然后启动服务度，在终端中，输入node server.js。
最终效果如下，鼠标移动到方框内，就会出现内容。
post设置请求体
post请求体是在xhr.send编写。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX post请求</title>
<style>
#result{
width: 200px;
height: 100px;
border: solid 1px #903;
}
</style>
</head>
<body>
<div id="result"></div>
<script>
//1.获取元素对象
const result=document.getElementById("result")
//2.绑定事件,鼠标移动事件
result.addEventListener("mouseover",function(){
// //做一个测试。
// console.log('test');
//3.创建对象
const xhr=new XMLHttpRequest();
//4.初始化，设置请求类型和URL
xhr.open('POST','http://127.0.0.1:8000/server?a=100&b=200')
//5.发送数据
xhr.send('a=100&b=200&c=300');
//6.事件绑定
//on 表示当...的时候。
//readystate 是xhr对象中的属性。表示状态，有五个值 0 1 2 3 4分别表示程序不同的运行状态
//change 改变的时候触发
xhr.onreadystatechange = function () {
//判断,如果值为4，表明服务端返回了所有的结果
if (xhr.readyState === 4) {
//判断响应的状态码 如404
//当状态码为200到300时，表明成功拿到数据
if (xhr.status >= 200 && xhr.status < 300) {
//处理服务端返回的结果,结构为行 头 空行 体
console.log(xhr.status);//响应行里的状态码
console.log(xhr.statusText);//响应行里的状态字符串
console.log(xhr.getAllResponseHeaders());//所有响应头
console.log(xhr.response);//响应体
//设置result的文本
result.innerHTML = xhr.response;
}
else {
}
}
}
})
</script>
</body>
</html>
最后可以在Request Payload内看到代码中写的参数，那么就证明此时参数已经传递给了后端服务端。
POST设置请求头信息
使用setRequestHeader()方法，在open方法后设置。也可以自定义请求头。但是要在后端代码中设置允许自定义请求头。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX post请求</title>
<style>
#result {
width: 200px;
height: 100px;
border: solid 1px #903;
}
</style>
</head>
<body>
<div id="result"></div>
<script>
//1.获取元素对象
const result = document.getElementById("result")
//2.绑定事件,鼠标移动事件
result.addEventListener("mouseover", function () {
// //做一个测试。
// console.log('test');
//3.创建对象
const xhr = new XMLHttpRequest();
//4.初始化，设置请求类型和URL
xhr.open('POST', 'http://127.0.0.1:8000/server?a=100&b=200')
//设置请求头
//其中Content-type是设置请求体内容类型的
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
//也可以自定义请求头
xhr.setRequestHeader('name', 'haha');
//5.发送数据
xhr.send('a=100&b=200&c=300');
//6.事件绑定
//on 表示当...的时候。
//readystate 是xhr对象中的属性。表示状态，有五个值 0 1 2 3 4分别表示程序不同的运行状态
//change 改变的时候触发
xhr.onreadystatechange = function () {
//判断,如果值为4，表明服务端返回了所有的结果
if (xhr.readyState === 4) {
//判断响应的状态码 如404
//当状态码为200到300时，表明成功拿到数据
if (xhr.status >= 200 && xhr.status < 300) {
//处理服务端返回的结果,结构为行 头 空行 体
console.log(xhr.status);//响应行里的状态码
console.log(xhr.statusText);//响应行里的状态字符串
console.log(xhr.getAllResponseHeaders());//所有响应头
console.log(xhr.response);//响应体
//设置result的文本
result.innerHTML = xhr.response;
}
else {
}
}
}
})
</script>
</body>
</html>
//1.引入express
const express = require('express');
//2.创建应用对象
const app = express();
//3.创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/server', (request, response) => {
//设置响应头,头的名字就是Access-Controll-Allow-Origin
//作用是设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//设置响应体
response.send('HELLO AJAX');
});
//把app.post改为app.all，表示可以接受任意形式请求。
app.all('/server', (request, response) => {
//设置响应头,头的名字就是Access-Controll-Allow-Origin
//作用是设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//作用是设置运行自定义请求头
response.setHeader('Access-Control-Allow-Headers', '*');
//设置响应体
response.send('HELLO AJAX POST');
});
//4.监听端口启动服务
//监听端口选择8000，后边在接一个回调函数
app.listen(8000, () => {
console.log("服务已经启动，8000端口监听中...");
})
输出如下
服务端响应json数据
实际工作中，向服务端发送请求，服务端返回都是使用JSON数据。新建一个json.html，然后进行案例准备。实现按下键盘任意按键，方框中会进行与后端服务器的交互。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>json数据</title>
<style>
#result {
width: 200px;
height: 100px;
border: solid 1px #876;
}
</style>
</head>
<body>
<div id="result"></div>
<script>
const result = document.getElementById('result')
//绑定键盘按下事件
window.onkeydown = function () {
//发送请求
const xhr = new XMLHttpRequest();
//初始化
xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200')
//发送
xhr.send()
//事件绑定
xhr.onreadystatechange = function () {
//判断,如果值为4，表明服务端返回了所有的结果
if (xhr.readyState === 4) {
//判断响应的状态码 如404
//当状态码为200到300时，表明成功拿到数据
if (xhr.status >= 200 && xhr.status < 300) {
//处理服务端返回的结果,结构为行 头 空行 体
console.log(xhr.status);//响应行里的状态码
console.log(xhr.statusText);//响应行里的状态字符串
console.log(xhr.getAllResponseHeaders());//所有响应头
console.log(xhr.response);//响应体
//设置result的文本
result.innerHTML = xhr.response;
}
else {
}
}
}
}
</script>
</body>
</html>
按下任意按键会出现如下界面，测试成功。
修改server.js内代码
//1.引入express
const express = require('express');
//2.创建应用对象
const app = express();
//3.创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
// app.get('/server', (request, response) => {
// //设置响应头,头的名字就是Access-Controll-Allow-Origin
// //作用是设置允许跨域
// response.setHeader('Access-Control-Allow-Origin', '*');
// //设置响应体
// response.send('HELLO AJAX');
// });
//把app.post改为app.all，表示可以接受任意形式请求。
app.all('/server', (request, response) => {
//设置响应头,头的名字就是Access-Controll-Allow-Origin
//作用是设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//作用是设置运行自定义请求头
response.setHeader('Access-Control-Allow-Headers', '*');
//响应一个数据，发送给客户端
const data = {
address:'广州'
}
//设置响应体，send里边得是一个字符串类型，所以要对data进行转换
let str = JSON.stringify(data);
response.send(str);
});
//4.监听端口启动服务
//监听端口选择8000，后边在接一个回调函数
app.listen(8000, () => {
console.log("服务已经启动，8000端口监听中...");
})
最后页面效果如下，可以看到显示的是一个JSON字符串。
那么正常显示实际中是不需要这样显示JSON字符串的，所以需要进行转换。需要在JSON.html进行再次转换，有两种方式，一是手动进行转换，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>json数据</title>
<style>
#result {
width: 200px;
height: 100px;
border: solid 1px #876;
}
</style>
</head>
<body>
<div id="result"></div>
<script>
const result = document.getElementById('result')
//绑定键盘按下事件
window.onkeydown = function () {
//发送请求
const xhr = new XMLHttpRequest();
//初始化
xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200')
//发送
xhr.send()
//事件绑定
xhr.onreadystatechange = function () {
//判断,如果值为4，表明服务端返回了所有的结果
if (xhr.readyState === 4) {
//判断响应的状态码 如404
//当状态码为200到300时，表明成功拿到数据
if (xhr.status >= 200 && xhr.status < 300) {
// //处理服务端返回的结果,结构为行 头 空行 体
// console.log(xhr.status);//响应行里的状态码
// console.log(xhr.statusText);//响应行里的状态字符串
// console.log(xhr.getAllResponseHeaders());//所有响应头
// console.log(xhr.response);//响应体
// //设置result的文本
// result.innerHTML = xhr.response;
let data=JSON.parse(xhr.response);
console.log(data);
result.innerHTML = data.address;
}
else {
}
}
}
}
</script>
</body>
</html>
可以看到，提取出了address的信息，广州。
第二种方法是自动转换，需要先设置响应体数据的类型。
xhr.responseType = 'json'
JSON.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>json数据</title>
<style>
#result {
width: 200px;
height: 100px;
border: solid 1px #876;
}
</style>
</head>
<body>
<div id="result"></div>
<script>
const result = document.getElementById('result')
//绑定键盘按下事件
window.onkeydown = function () {
//发送请求
const xhr = new XMLHttpRequest();
//设置响应体数据类型
xhr.responseType = 'json'
//初始化
xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200')
//发送
xhr.send()
//事件绑定
xhr.onreadystatechange = function () {
//判断,如果值为4，表明服务端返回了所有的结果
if (xhr.readyState === 4) {
//判断响应的状态码 如404
//当状态码为200到300时，表明成功拿到数据
if (xhr.status >= 200 && xhr.status < 300) {
// //处理服务端返回的结果,结构为行 头 空行 体
// console.log(xhr.status);//响应行里的状态码
// console.log(xhr.statusText);//响应行里的状态字符串
// console.log(xhr.getAllResponseHeaders());//所有响应头
// console.log(xhr.response);//响应体
// //设置result的文本
// result.innerHTML = xhr.response;
// //手动转换JSON数据
// let data=JSON.parse(xhr.response);
// console.log(data);
// result.innerHTML = data.address;
//自动转换JSON数据
result.innerHTML = xhr.response.address;
}
else {
}
}
}
}
</script>
</body>
</html>
nodemon自动重启工具安装
nodemon是帮助我们开发时，自动重启node.js服务的工具，当文件内容修改的时候。命令行输入npm install -g nodemon进行安装。
然后在以后启动server.js时，启动命令为nodemon server.js.此时在更改server.js内的代码时，就会自动重新启动node.js，进行刷新。
AJAX中的IE缓存问题
IE浏览器会对AJAX请求的结果做一个缓存。这就导致一个问题，在下一次AJAX请求时，IE浏览器先找的是本地缓存，而不是最新的服务器返回的数据。
做一个案例，点击发送请求按钮，方框会显示返回内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IE缓存问题</title>
<style>
#result {
width: 200px;
height: 100px;
border: solid 1px #258;
}
</style>
</head>
<body>
<button>点击发送请求</button>
<div id="result"></div>
<script>
const btn = document.getElementsByTagName('button')[0];
const result = document.getElementById('result')
//绑定事件
btn.addEventListener('click', function () {
const xhr = new XMLHttpRequest();
//设置响应体数据类型
xhr.responseType = 'json'
xhr.open('GET', 'http://127.0.0.1:8000/server');
xhr.send();
xhr.onreadystatechange = function () {
//判断,如果值为4，表明服务端返回了所有的结果
if (xhr.readyState === 4) {
//判断响应的状态码 如404
//当状态码为200到300时，表明成功拿到数据
if (xhr.status >= 200 && xhr.status < 300) {
//自动转换JSON数据
result.innerHTML = xhr.response.address;
}
else {
}
}
}
})
</script>
</body>
</html>
输出如下
所以此处需要使用一个时间戳，在URL地址部分的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IE缓存问题</title>
<style>
#result {
width: 200px;
height: 100px;
border: solid 1px #258;
}
</style>
</head>
<body>
<button>点击发送请求</button>
<div id="result"></div>
<script>
const btn = document.getElementsByTagName('button')[0];
const result = document.getElementById('result')
//绑定事件
btn.addEventListener('click', function () {
const xhr = new XMLHttpRequest();
//设置响应体数据类型
xhr.responseType = 'json'
//date.now是获取当前的时间戳，使得IE浏览器认识到两次AJAX请求时间不同。
xhr.open('GET', 'http://127.0.0.1:8000/server?t='+Date.now());
xhr.send();
xhr.onreadystatechange = function () {
//判断,如果值为4，表明服务端返回了所有的结果
if (xhr.readyState === 4) {
//判断响应的状态码 如404
//当状态码为200到300时，表明成功拿到数据
if (xhr.status >= 200 && xhr.status < 300) {
//自动转换JSON数据
result.innerHTML = xhr.response.address;
}
else {
}
}
}
})
</script>
</body>
</html>
AJAX请求超时与网络异常处理
当应用上线时，我们不能保证服务端百分百响应请求，或者客户端百分百能够请求连接通畅。我们设置这样一个案例，当客户端发送请求时，如果请求时间超过两秒，我们就返回一个提醒给客户端。我们在后端设置的是3秒延迟，前端设置的是2秒延迟。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>请求异常和网络异常问题</title>
<style>
#result {
width: 200px;
height: 100px;
border: solid 1px #258;
}
</style>
</head>
<body>
<button>点击发送请求</button>
<div id="result"></div>
<script>
const btn = document.getElementsByTagName('button')[0];
const result = document.getElementById('result')
//绑定事件
btn.addEventListener('click', function () {
const xhr = new XMLHttpRequest();
//设置响应体数据类型
xhr.responseType = 'json'
//请求超时设置，如果2秒内请求还没有成功，就取消该请求。
xhr.timeout=2000
//超时回调函数
xhr.ontimeout=function(){
alert("网络异常，请稍后再试")
}
//网络异常回调函数
xhr.onerror=function(){
alert("你的网络似乎出现了一些问题")
}
//date.now是获取当前的时间戳，使得IE浏览器认识到两次AJAX请求时间不同。
xhr.open('GET', 'http://127.0.0.1:8000/yanshi?t='+Date.now());
xhr.send();
xhr.onreadystatechange = function () {
//判断,如果值为4，表明服务端返回了所有的结果
if (xhr.readyState === 4) {
//判断响应的状态码 如404
//当状态码为200到300时，表明成功拿到数据
if (xhr.status >= 200 && xhr.status < 300) {
//自动转换JSON数据
result.innerHTML = xhr.response.address;
}
else {
}
}
}
})
</script>
</body>
</html>
server.js内代码
//1.引入express
const express = require('express');
//2.创建应用对象
const app = express();
//3.创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
// app.get('/server', (request, response) => {
// //设置响应头,头的名字就是Access-Controll-Allow-Origin
// //作用是设置允许跨域
// response.setHeader('Access-Control-Allow-Origin', '*');
// //设置响应体
// response.send('HELLO AJAX');
// });
//把app.post改为app.all，表示可以接受任意形式请求。
app.all('/server', (request, response) => {
//设置响应头,头的名字就是Access-Controll-Allow-Origin
//作用是设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//作用是设置运行自定义请求头
response.setHeader('Access-Control-Allow-Headers', '*');
//响应一个数据，发送给客户端
const data = {
address: '广州2'
}
//设置响应体，send里边得是一个字符串类型，所以要对data进行转换
let str = JSON.stringify(data);
response.send(str);
});
//响应延时效果
app.all('/yanshi', (request, response) => {
//设置响应头,头的名字就是Access-Controll-Allow-Origin
//作用是设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//作用是设置运行自定义请求头
response.setHeader('Access-Control-Allow-Headers', '*');
//响应一个数据，发送给客户端
const data = {
address: '广州2'
}
//设置响应体，send里边得是一个字符串类型，所以要对data进行转换
let str = JSON.stringify(data);
//延时3秒钟
setTimeout(() => { response.send(str); }, 3000)
});
//4.监听端口启动服务
//监听端口选择8000，后边在接一个回调函数
app.listen(8000, () => {
console.log("服务已经启动，8000端口监听中...");
})
此时我们可以看到因为延时的问题。请求被取消了。
当网络被断开时，我们在浏览器中进行模型，点击下图的offline进入断网模式。
最后输出如下
AJAX取消请求
在点击发送请求后，在返回结果还未回来之前，我们在点击取消请求，中断本次请求操作。取消需要借助一个abort函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX取消请求</title>
<style>
#result {
width: 200px;
height: 100px;
border: solid 1px #258;
}
</style>
</head>
<body>
<button>点击发送请求</button>
<button>点击取消请求</button>
<div id="result"></div>
<script>
const result = document.getElementById('result')
//获取元素对象
const btns = document.querySelectorAll('button');
//请求和取消同时出现时，为了避免冲突，不能使用const x
let x =null;
//给按钮1绑定发送请求事件
btns[0].onclick = function () {
x = new XMLHttpRequest();
//设置响应体数据类型
x.responseType = 'json'
//date.now是获取当前的时间戳，使得IE浏览器认识到两次AJAX请求时间不同。
x.open('GET', 'http://127.0.0.1:8000/yanshi?t=' + Date.now());
x.send();
x.onreadystatechange = function () {
//判断,如果值为4，表明服务端返回了所有的结果
if (x.readyState === 4) {
//判断响应的状态码 如404
//当状态码为200到300时，表明成功拿到数据
if (x.status >= 200 && x.status < 300) {
//自动转换JSON数据
result.innerHTML = x.response.address;
}
else {
}
}
}
}
//使用abort，实现取消请求
btns[1].onclick=function(){
x.abort();
}
</script>
</body>
</html>
server.js内代码
//1.引入express
const express = require('express');
//2.创建应用对象
const app = express();
//3.创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
// app.get('/server', (request, response) => {
// //设置响应头,头的名字就是Access-Controll-Allow-Origin
// //作用是设置允许跨域
// response.setHeader('Access-Control-Allow-Origin', '*');
// //设置响应体
// response.send('HELLO AJAX');
// });
//把app.post改为app.all，表示可以接受任意形式请求。
app.all('/server', (request, response) => {
//设置响应头,头的名字就是Access-Controll-Allow-Origin
//作用是设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//作用是设置运行自定义请求头
response.setHeader('Access-Control-Allow-Headers', '*');
//响应一个数据，发送给客户端
const data = {
address: '广州2'
}
//设置响应体，send里边得是一个字符串类型，所以要对data进行转换
let str = JSON.stringify(data);
response.send(str);
});
//响应延时效果
app.all('/yanshi', (request, response) => {
//设置响应头,头的名字就是Access-Controll-Allow-Origin
//作用是设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//作用是设置运行自定义请求头
response.setHeader('Access-Control-Allow-Headers', '*');
//响应一个数据，发送给客户端
const data = {
address: '广州2'
}
//设置响应体，send里边得是一个字符串类型，所以要对data进行转换
let str = JSON.stringify(data);
//延时3秒钟
setTimeout(() => { response.send(str); }, 3000)
});
//4.监听端口启动服务
//监听端口选择8000，后边在接一个回调函数
app.listen(8000, () => {
console.log("服务已经启动，8000端口监听中...");
})
我们可以看到，点击发送后，在点击取消，方框内不在显示了，并且status状态中也显示的是canceled（取消）。
AJAX重复发送请求
在某些应用场景，客户端可能会高频率不断重复往服务器发送请求，会造成服务器有一些影响。我们需要在出现多次请求时，只最后一次有效，每点一次，上一次就被取消。下图可以看到我们连续多次发送了同一请求。
所以这里使用一个标识变量，对标识变量进行判定，如果当前正在发送请求，又点击一次新请求，那么就取消上一次的，创建新的请求。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX重复请求</title>
<style>
#result {
width: 200px;
height: 100px;
border: solid 1px #258;
}
</style>
</head>
<body>
<button>点击发送请求</button>
<button>点击取消请求</button>
<div id="result"></div>
<script>
const result = document.getElementById('result')
//获取元素对象
const btns = document.querySelectorAll('button');
//请求和取消同时出现时，为了避免冲突，不能使用const x
let x = null;
//标识变量
let isSending = false;//是否正在发送AJAX请求
//给按钮1绑定发送请求事件
btns[0].onclick = function () {
//判断标识变量,如果是正在发送，则abort取消掉上一个请求，创建一个新请求
if (isSending) x.abort();
x = new XMLHttpRequest();
//设置响应体数据类型
x.responseType = 'json'
//修改标识变量的值
isSending = true
//date.now是获取当前的时间戳，使得IE浏览器认识到两次AJAX请求时间不同。
x.open('GET', 'http://127.0.0.1:8000/yanshi?t=' + Date.now());
x.send();
x.onreadystatechange = function () {
//判断,如果值为4，表明服务端返回了所有的结果
if (x.readyState === 4) {
//判断响应的状态码 如404
//当状态码为200到300时，表明成功拿到数据
if (x.status >= 200 && x.status < 300) {
//自动转换JSON数据
result.innerHTML = x.response.address;
//修改标识变量的值
isSending = false
}
else {
}
}
}
}
// //使用abort，实现取消请求
// btns[1].onclick = function () {
// x.abort();
// }
</script>
</body>
</html>
可以看到，多次点击之后，只最后一次是成功的，前边的请求都是被cancel取消了。