五、手动取消ajax请求 解决重复发送请求问题

server.js:

// 1. 引入express
const express = require('express')// 2. 创建应用对象
const app = express()// 3. 创建路由规则
app.get('/server', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')// 设置响应体response.send('hello ajax!!!')
})// all 可以接收任意类型的请求
app.all('/server', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')// 允许前端post请求 自定义请求头名称response.header('Access-Control-Allow-Headers', '*');// 设置响应体response.send('hello ajax post')
})app.all('/json-server', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')// 允许前端post请求 自定义请求头名称response.header('Access-Control-Allow-Headers', '*');// 响应一个数据const data = {name: 'zep'};// 对 对象进行字符串转换let str = JSON.stringify(data)// 设置响应体,send方法只接收字符串类型的参数response.send(str)
})// 专门针对IE缓存
app.get('/ie', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')// 设置响应体response.send('hello ie3!!!')
})// 延时响应
app.get('/delay', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')// 设置定时器,当客户端发起请求时,服务端延迟3s再将响应数据发给客户端setTimeout(() => {// 设置响应体response.send('hello 延迟响应3秒!!!')}, 3000)})// 4. 监听端口 启动服务
app.listen(8000, () => {console.log('服务已经启动,8000端口监听中...')
})

1. 取消请求

在这里插入图片描述

2. 解决重复发送请求问题

增加一个标识变量 isSending

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>AJAX 重复请求 请求</title><style type="text/css">#result {width: 200px;height: 100px;border: 1px solid pink;}</style></head><body><button>点击发送请求</button><button>点击取消请求</button>	<script>// 获取button元素const btns = document.querySelectorAll('button');let xhr = null;// 标识变量let isSending = false; // 是否正在发送AJAX请求// 绑定事件btns[0].onclick = function() {// 如果正在发送,则取消该请求,创建一个新的if(isSending) {xhr.abort();}// 1.创建对象xhr = new XMLHttpRequest();// 修改标识变量的值isSending = true;// 2.初始化 设置请求方法 和 urlxhr.open('GET', 'http://127.0.0.1:8000/delay');// 3.发送xhr.send();// 4.事件绑定,处理服务端返回的结果xhr.onreadystatechange = function() {if(xhr.readyState === 4) {// 修改标识变量isSending = false;}}}btns[1].onclick = function () {// 取消请求xhr.abort()}</script></body>
</html>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/470795.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux ps命令详解

ps命令用于监测进程的工作情况。进程是正在运行的程序&#xff0c;一直处于动态变化中&#xff0c;而ps命令所显示的进程工作状态时瞬间的。 使用方式&#xff1a;ps[options][-help] 常用参数&#xff1a; -A &#xff1a;显示所有进程 -a&#xff1a;显示一个终端的所有进程。…

用多元线性回归预测网页访问量(R语言)

前言 该问题来源于《机器学习:实用案例解析》中的第5章。在书中&#xff0c;已经对该问题给出了一种解决方案&#xff0c;但是我觉得写的还是太简略了一些&#xff0c;没有把考虑问题的整个思路给写出来&#xff0c;所以&#xff0c;在这里给出我的一些想法。 问题简述 我们…

六、jQuery 中的 AJAX 跨域问题

第 2 章&#xff1a;jQuery 中的 AJAX 官方中文文档&#xff1a;https://jquery.cuishifeng.cn/jQuery.Ajax.html 2.1 get 请求 $.get(url, [data], [callback], [type]) url:请求的 URL 地址。data:请求携带的参数。callback:载入成功时回调函数。type:设置返回内容格式&a…

LeetCode 474. Ones and Zeroes 动态规划解法+拓展

问题来源 此题来源于LeetCode 474. Ones and Zeroes 在写这篇之前&#xff0c;我百度了一下这道题&#xff0c;发现已经有很多人写过这个问题了&#xff0c;然而大多数只是为了答题而答题&#xff0c;给出了代码&#xff0c;很少有文字解释的&#xff0c;也很少有深入拓展的。…

常用的几种编程语言的介绍

编程语言&#xff08;programming language&#xff09;&#xff0c;来自百度百科的解释为&#xff1a;编程语言是用来定义计算机程序的形式语言。它是一种被标准化的交流技巧&#xff0c;用来向计算机发出指令。一种计算机语言让程序员能够准确地定义计算机所需要使用的数据&a…

三门问题(Monty Hall problem)背后的贝叶斯理论

文章目录1 前言2 问题简介3 直观的解释4 贝叶斯理论的解释1 前言 三门问题可以说有着各种版本的解释&#xff0c;但我看了几个版本&#xff0c;觉得没有把其中的条件说清楚&#xff0c;所以还是决定按照自己的理解记录一下这个特别有意思的问题。 2 问题简介 三门问题&#…

一、在vue项目中使用mock.js(详解)

步骤1.搭建测试项目 步骤1.1创建项目 命令&#xff1a; vue create mock-demo 步骤1.2安装依赖 命令&#xff1a; #使用axios发送ajax cnpm install axios--save #使用mockjs产生随机数据 cnpm install mockjs--save-dev #使用json5解决ison文件&#xff0c;无法添加注释…

matlab如何建立一个空矩阵,然后往里面赋值

1 x1:0.1:10; 2 y[]; 3 for i1:length(x) 4 % y[y;x(i)];%把每一个x都放到Y里&#xff0c;成为一列 5 y[y,x(i)];%把每一个x都放到Y里&#xff0c;成为一行 6 end 转载于:https://www.cnblogs.com/sddai/p/5410821.html

二、在jQuery中使用mockjs

在jQuery项目中使用mock.js 步骤1.搭建项目 步骤1.1创建项目 新建文件夹jquery-mock-demo 步骤1.2新建index.html&#xff0c;引入jquery.js文件和mock.js <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title&g…

决策树相关知识小结

前言 本文是一篇关于决策树方面知识的小结&#xff0c;不包含具体的例子&#xff08;想看例子推荐文献[1]的第4章&#xff09;&#xff0c;主要总结了ID3、C4.5和CART树三者的区别&#xff0c;剪枝处理&#xff0c;连续值和缺失值的处理。 决策树的基本算法 决策树的学习目的…

Android 中如何计算 App 的启动时间?

&#xff08;转载&#xff09; 已知的两种方法貌似可以获取&#xff0c;但是感觉结果不准确&#xff1a;一种是&#xff0c;adb shell am start -w packagename/activity,这个可以得到两个值&#xff0c;ThisTime和TotalTime&#xff0c;不知道两个有什么区别&#xff0c;而且与…

项目实战:Express实现学生管理系统(CRUD)

一、起步 初始化 npm init -y 生成package.json文件 模板处理 cnpm install express --save cnpm install bootstrap --savenpm install --save art-template npm install --save express-art-template//两个一起安装 npm i --save art-template express-art-template文件目录…

2016年度 JavaScript 展望(下)

【编者按】本文作者为资深 Web 开发者 TJ VanToll, TJ 专注于移动端 Web 应用及其性能&#xff0c;是《jQuery UI 实践》 一书的作者。 本文系 OneAPM 工程师编译呈现&#xff0c;以下为正文的第二部分。点此阅读第一部分。 本地移动 apps 在2015年&#xff0c;出现了一种新的基…

LeetCode547. Friends Circles 利用union find | bfs | dfs三种方法解决

问题来源 此题来源于LeetCode547. Friend Circles&#xff0c;主要运用了并查集&#xff08;union find&#xff09;、广度优先遍历&#xff08;bfs&#xff09;和深度优先遍历&#xff08;bfs&#xff09;三种方法解决。 问题简述 给定一个NN的矩阵M表示了N个人之见的朋友关…

Python模块之MyQR——制作个性化动态二维码(超详细)

一、首先安装MyQR 第一种方式&#xff1a;cmd 命令行输入 pip install MyQR 第二种方式&#xff1a;pyCharm中手动选择进行安装 二、 myqr.run() 函数里面的参数 三、编写代码 # encodingutf-8 from MyQR import myqrmyqr.run(words"https://blog.csdn.net/weixin_448…

地址选择控件开发-

先睹为快 闲话少说&#xff0c;我们先来看看今天我们研究的控件的最终效果图(参照天猫的送货地址设置的效果)&#xff1a; “地址选择Web控件”的基本组成&#xff1a; 使用控件举例&#xff1a; <!--需要加载和引用的文件--> <link rel"stylesheet" href&q…

逻辑回归(logistic regression)的本质——极大似然估计

文章目录1 前言2 什么是逻辑回归3 逻辑回归的代价函数4 利用梯度下降法求参数5 结束语6 参考文献1 前言 逻辑回归是分类当中极为常用的手段&#xff0c;因此&#xff0c;掌握其内在原理是非常必要的。我会争取在本文中尽可能简明地展现逻辑回归(logistic regression)的整个推导…

使用mongoose 在 Node中操作MongoDB数据库

MongoDB 关系型和非关系型数据库 关系型数据库&#xff08;表就是关系&#xff0c;或者说表与表之间存在关系&#xff09;。 所有的关系型数据库都需要通过sql语言来操作所有的关系型数据库在操作之前都需要设计表结构而且数据表还支持约束 唯一的主键默认值非空 非关系型…

回调和异步

// 回调函数&#xff1a;一个函数中调用传入的另一个函数 // 这里的callback就是个回调函数 function we(callback,something){something" is cool";callback(something); }function learn(something){console.log(something); }we(learn,"node.js"); //第…

pip install时发生raise ReadTimeoutError(self._pool, None, 'Read timed out.')的解决方案

问题描述 在windows下&#xff0c;python在安装一些包的时候&#xff0c;常常会碰到time out的情况&#xff0c;如下图所示。不管再重试几次都是如此&#xff0c;这时候该怎么办呢&#xff1f; 解决方案 方案一&#xff1a;更换安装源&#xff08;推荐使用豆瓣源&#xff09…