当前位置： 首页 > news >正文

AJAX —— 学习（二）

news 2025/10/31 6:32:45

目录

一、利用 JSON 字符串 返回数据

（一）基础代码

（二）原理及实现

二、nodmon 工具 自动重启服务

（一）用途

（二）下载

（三）使用

三、IE 缓存问题

（一）问题描述

（二）解决方法

三、AJAX 请求超时 / 网络异常处理

（一）处理方法

（二）完整代码

四、AJAX 取消请求

五、AJAX 请求重复发送问题

一、利用 JSON 字符串 返回数据

利用 AJAX 向服务端发送请求，服务端向我们返回的一般都是 JSON 格式的数据

在 div 中按键 向服务端发出请求 并在 div 中渲染返回结果

和前面类似不多解释了，不明白细节可以看上一篇

（一）基础代码

AJAX 前端代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX POST 请求</title>
</head>
<style>#result {width: 200px;height: 100px;border: solid pink 1px;}
</style><body><div id="result"></div><script>// 获得元素对象const result = document.getElementById("result")// 绑定键盘按下事件window.onkeydown = function () {// 创建对象const xhr = new XMLHttpRequest();// 初始化设置请求方法 和url（就是发送的对象）xhr.open('GET', 'http://127.0.0.1:8000/json-server')// 设置请求头xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')// 自定义请求头xhr.setRequestHeader('name', 'hahaha')// 发送xhr.send('a=100&b=200')// 事件绑定 处理服务端返回的结果xhr.onreadystatechange = function () {// 在里面处理服务端返回的结果 在 4 时再处理if (xhr.readyState === 4) {// 判断响应的状态码 200 404 403 401 500// 2 开头都表示成功if (xhr.status >= 200 && xhr.status < 300) {result.innerHTML = xhr.response}}}}</script>
</body></html>

服务端代码：

// 1、先引入 express 框架
const express = require('express')
// 2、然后创建应用对象
const app = express()
// 3、创建路由规则，函数里面有两个参数，分别是请求报文和响应报文的封装
app.all('/json-server', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*')// 特殊响应头response.setHeader('Access-Control-Allow-Headers', '*')// 设置响应体response.send('HELLO AJAX POST')
})
// 4、监听端口启动服务
app.listen(8000, () => {console.log('服务已经启动，8000端口监听中...')
})

（二）原理及实现

我们想返回别的东西 不想只返回一堆字，比如说我们想返回一个对象 ，但是respond() 方法只能返回字符串，所以我们可以通过把 data 对象转换成 JSON 字符串的形式返回

const data = {name: '一个人'}let str = JSON.stringify(data)response.send(str)

结果展示：此时返回的是一个字符串

可以在前端代码中把字符串重新转换成对象

 if (xhr.readyState === 4) {// 判断响应的状态码 200 404 403 401 500// 2 开头都表示成功if (xhr.status >= 200 && xhr.status < 300) {let data = JSON.parse(xhr.response)console.log(data)}}

 输出检验一下，确实是对象

但是上面属于手动转换，我们可以自动转换

加上一句下面就可以自动转换了

xhr.responseType = 'json'

成功

在页面中显示数据 就稍微改一下渲染一下就行

结果展示：

二、nodmon 工具 自动重启服务

（一）用途

可以让我们修改服务端代码时不用重新启动服务器，节省时间

（二）下载

我们直接 在没有服务端启动的情况下 在终端界面 输入

npm install -g nodemon 就能下载了

（三）使用

然后我们以后启动服务器时用

nodemon.cmd 服务器文件名.js 就行了

三、IE 缓存问题

（一）问题描述

IE 浏览器会对 AJAX 的请求结果做一个缓存，下一次再发送请求时，走的是本地的缓存而不是服务器返回的最新的数据,对于时效性比较强的场景，AJAX 的缓存会影响结果

如果修改服务端传回的内容 在 ie 浏览器中刷新 显示内容不会发生改变，因为 ie 是从本地缓存中取出的数据

（二）解决方法

代码如下：在 open 方法代码中的 url 后面加上 当前时间戳 这样每次点击 ie 浏览器收到的请求都不一样，ie 以为我们发送了一个新的请求，这样就不会从本地缓存中读取数据了

xhr.open('GET', 'http://127.0.0.1:8000/ie?t='+Date.now())

三、AJAX 请求超时 / 网络异常处理

（一）处理方法

我们不能保证服务端一直准确快速响应 AJAX 请求，我们可以通过给 AJAX 加一个超时的设置，给用户提醒，网络异常的时候也给用户提醒，让产品体验更好

我们可以在服务器中设置一个延时函数 3秒后返回 延时响应

 setTimeout(() =>{response.send('延时响应')},3000)

在 AJAX 中设置一些代码 如果 2s 内还没返回请求就取消

xhr.timeout = 2000

超时回调，就是超时弹出对话框

xhr.ontimeout = function (){alert('网络异常，稍后再试')}

（二）完整代码

AJAX部分：

<script>const btn = document.getElementsByTagName('button')[0]const result = document.getElementById("result")btn.addEventListener('click', function () {const xhr = new XMLHttpRequest();// 超时设置xhr.timeout = 2000// 超时回调xhr.ontimeout = function () {alert('网络异常，稍后再试')}xhr.onerror = function(){alert('你的网络似乎出现了问题')}// 初始化设置请求方法 和url（就是发送的对象）xhr.open('GET', 'http://127.0.0.1:8000/delay')// 发送xhr.send('')// 事件绑定 处理服务端返回的结果xhr.onreadystatechange = function () {// 在里面处理服务端返回的结果 在 4 时再处理if (xhr.readyState === 4) {// 判断响应的状态码 200 404 403 401 500// 2 开头都表示成功if (xhr.status >= 200 && xhr.status < 300) {result.innerHTML = xhr.response}}}})
</script>

服务端部分：

// 1、先引入 express 框架
const 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('hello ie')}, 3000)
})
// 4、监听端口启动服务
app.listen(8000, () => {console.log('服务已经启动，8000端口监听中...')
})

四、AJAX 取消请求

在我们通过 AJAX 向服务器发送请求时，在服务器返回数据前，我们可以通过代码手动取消请求

使用 abort 方法 属于 AJAX 对象

就如下面 使用 x.abort() 就能取消请求

注意下面用到前面 IE 缓存的问题 在 url 后面加上一个时间戳，会返回 304 错误，原本的内容会被服务器缓存接着用 注意一下

<script>let x = nullconst btns = document.querySelectorAll('button')btns[0].onclick = function () {x = new XMLHttpRequest();x.open('GET', 'http://127.0.0.1:8000/delay?t='+Date.now())x.send()}btns[1].onclick = function () {x.abort()}
</script>

取消请求的结果：

五、AJAX 请求重复发送问题

之前用户连续点击按钮 AJAX 一直向服务器发送请求，但是我们不想这么做，我们想让用户连续点击时 取消前一次发送，进行下一次发送 有点像 js 中的防抖，有利于性能提升

我们就加入一个标识变量 isSending 检测 是否发送请求，如果有请求就把之前的请求取消，然后设置 isSending 为 true 然后检测是否发送结束，如果服务器返回全部内容时 就是 

xhr.readyState === 4 时就认定发送结束了，然后设置 isSending 为 false

不要判断响应的状态码 因为有可能这个请求有可能不成功 不是 2 开头 一直在成功里面判断isSending 就不能为 false了 不能继续进行下去了

<script>let x = null// 标识变量 看是否在发送 AJAX 请求let isSending = falseconst btns = document.querySelectorAll('button')btns[0].onclick = function () {// 判断标识符变量if(isSending) x.abort()x = new XMLHttpRequest();// 修改 标识变量的值isSending = truex.open('GET', 'http://127.0.0.1:8000/delay?')x.send()xhr.onreadystatechange = function () {// 在里面处理服务端返回的结果 在 4 时再处理if (xhr.readyState === 4) {// 判断响应的状态码 200 404 403 401 500// 2 开头都表示成功isSending = false}}}
</script>

相关文章：

AJAX —— 学习（二）

目录 一、利用 JSON 字符串 返回数据 &#xff08;一&#xff09;基础代码 &#xff08;二&#xff09;原理及实现 二、nodmon 工具 自动重启服务 &#xff08;一&#xff09;用途 &#xff08;二&#xff09;下载 &#xff08;三&#xff09;使用 三、IE 缓存问题 &a…...

编程日记 2024/4/5 3:14:36

CSC博士联培申请时间线

暂时只记得这么多了&#xff0c;有问题会及时修改。 #mermaid-svg-ZMjY9etaS7StCVuw {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ZMjY9etaS7StCVuw .error-icon{fill:#552222;}#mermaid-svg-ZMjY9etaS7StCVuw .e…...

编程日记 2024/4/5 3:12:35

大数据实验三-HBase编程实践

目录 一&#xff0e;实验内容 二&#xff0e;实验目的 三&#xff0e;实验过程截图及说明 1、安装HBase 2、配置伪分布式模式&#xff1a; 3、使用hbase的shell命令来操作表&#xff1a; 4、使用hbase提供的javaAPI来编程实现类似操作&#xff1a; 5、实验总结及心得体会…...

编程日记 2024/4/5 3:09:31

【Python】Pillow支持的图像文件格式

完全支持格式只读格式只写格式仅标识格式BLPCURPALMBUFRBMPDCXPDFGRIBDDSFITSXV ThumbnailsHDF5DIBFLCMPEGEPSFPXGIFFTEXICNSGBRICOGDIMIMTJPEGIPTC/NAAJPEG 2000MCIDASMSPMICPCXMPOPNGPCDPPMPIXARSGIPSDSPIDERQOITGASUNTIFFWALwebpWMF、EMFXBMXPM 参考文献 图像文件格式 - P…...

编程日记 2024/4/5 3:08:30

算法——最小生成树

Prim算法&#xff1a; 算法步骤&#xff1a; 1.选择一个起始节点作为最小生成树的起点。 2.将该起始节点加入最小生成树集合&#xff0c;并将其标记为已访问。 3.在所有与最小生成树集合相邻的边中&#xff0c;选择权重最小的边和它连接的未访问节点。 4.将该边和节点加入最小…...

编程日记 2024/4/5 3:07:29

OpenHarmony相机和媒体库-如何在ArkTS中调用相机拍照和录像。

介绍 此Demo展示如何在ArkTS中调用相机拍照和录像&#xff0c;以及如何使用媒体库接口进行媒体文件的增、删、改、查操作。 本示例用到了权限管理能力ohos.abilityAccessCtrl 相机模块能力接口ohos.multimedia.camera 图片处理接口ohos.multimedia.image 音视频相关媒体业…...

编程日记 2024/4/5 3:06:28

【EasyExcel】多sheet、追加列

业务-EasyExcel多sheet、追加列 背景 最近接到一个导出Excel的业务&#xff0c;需求就是多sheet&#xff0c;每个sheet导出不同结构&#xff0c;第一个sheet里面能够根据最后一列动态的追加列&#xff0c;追加多少得看运营人员传了多少需求列。原本使用的 pig4cloud 架子&…...

编程日记 2024/4/5 3:04:26

韩顺平 | 零基础快速学Python

环境准备 开发工具&#xff1a;IDLE、Pycharm、Sublime Text、Eric 、文本编辑器&#xff08;记事本/editplus/notepad&#xff09; Python特点&#xff1a;既支持面向过程OOP、也支持面向对象编程&#xff1b;具有解释性&#xff0c;不需要编程二进制代码&#xff0c;可以直…...

编程日记 2024/4/5 3:03:25

docker部署DOS游戏

下载镜像 docker pull registry.cn-beijing.aliyuncs.com/wuxingge123/dosgame-web-docker:latestdocker-compose部署 vim docker-compose.yml version: 3 services:dosgame:container_name: dosgameimage: registry.cn-beijing.aliyuncs.com/wuxingge123/dosgame-web-docke…...

编程日记 2024/4/5 3:01:23

基于单片机的无线红外报警系统

**单片机设计介绍&#xff0c;基于单片机的无线红外报警系统 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机的无线红外报警系统是一种结合了单片机控制技术和无线红外传感技术的安防系统。该系统通过无线红外传感器实…...

编程日记 2024/4/5 2:59:22

【JAVAEE学习】探究Java中多线程的使用和重点及考点

˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好&#xff0c;我是xiaoxie.希望你看完之后,有不足之处请多多谅解&#xff0c;让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN 如…...

编程日记 2024/4/5 2:54:18

Day81：服务攻防-开发框架安全SpringBootStruts2LaravelThinkPHPCVE复现

目录 PHP-框架安全-Thinkphp&Laravel Laravel CVE-2021-3129 RCE Thinkphp 版本3.X RCE-6.X RCE 版本6.X lang RCE J2EE-框架安全-SpringBoot&Struts2 Struct2 旧漏洞(CVE-2016-0785等) struts2 代码执行 &#xff08;CVE-2020-17530&#xff09;s2-061 Str…...

编程日记 2024/4/5 2:53:17

.kat6.l6st6r勒索病毒肆虐，这些应对策略或许能帮到你

引言&#xff1a; 近年来&#xff0c;网络安全问题日益凸显&#xff0c;其中勒索病毒更是成为了公众关注的焦点。其中&#xff0c;.kat6.l6st6r勒索病毒以其独特的传播方式和破坏力&#xff0c;给全球用户带来了极大的困扰。本文将深入探讨.kat6.l6st6r勒索病毒的特点&#xf…...

编程日记 2024/4/5 2:52:15

maya移除节点 修改节点

目录 maya移除节点 使用 Maya 用户界面&#xff1a; 使用脚本&#xff1a; maya 修改节点名字 使用 Maya 用户界面&#xff1a; 使用 MEL 脚本&#xff1a; 使用 Python 脚本&#xff1a; 注意事项&#xff1a; maya移除节点 使用 Maya 用户界面&#xff1a; 在“层次…...

编程日记 2024/4/5 2:50:12

嵌入式算法开发系列之卡尔曼滤波算法

卡尔曼滤波算法 文章目录 卡尔曼滤波算法前言一、卡尔曼滤波算法原理二、算法应用三、C语言实现总结 前言 在嵌入式系统中&#xff0c;传感器数据通常受到噪声、误差和不确定性的影响&#xff0c;因此需要一种有效的方法来估计系统的状态。卡尔曼滤波算法是一种基于概率理论的…...

编程日记 2024/4/5 2:49:11

简述对css工程化的理解

一、css工程化解决了哪些问题 1、宏观设计&#xff1a;css如何组织、拆分、设计模块结构 2、编码优化&#xff1a;如何更好地编写css 3、构建&#xff1a;如何处理css&#xff0c;使打包结果最优 4、可维护性&#xff1a;最小化后续的变更成本 二、针对问题&#xff0c;如何解…...

编程日记 2024/4/5 2:43:05

.NET 5种线程安全集合

在.NET中&#xff0c;有许多种线程安全的集合类&#xff0c;下面介绍五种我们常用的线程安全集合以及他们的基本用法。 ConcurrentBag ConcurrentBag 是一个线程安全的无序包。它适用于在多线程环境中频繁添加和移除元素的情况。 ConcurrentBag<int> concurrentBag n…...

编程日记 2024/4/5 2:41:03

计算机信息自查

文章目录 操作系统安装时间硬盘序列号查询上网IPMAC地址 操作系统安装时间 可以使用命令行形式&#xff0c;查询windows系统安装时间&#xff1a; wmic OS get InstallDate首先显示年份&#xff0c;然后是月份&#xff0c;然后是日期&#xff0c;然后是安装的确切时间 或者w…...

编程日记 2024/4/5 2:39:01

配置vite配置文件更改项目端口、使用@别名

一、配置vite配置文件更改项目端口 vite官方文档地址&#xff1a;开发服务器选项 | Vite 官方中文文档 (vitejs.dev) 使用&#xff1a; 二、使用别名 1. 安装 types/node types/node 包允许您在TypeScript项目中使用Node.js的核心模块和API&#xff0c;并提供了对它们的类型…...

编程日记 2024/4/5 2:35:58

【LeetCode热题100】【链表】环形链表

题目链接&#xff1a;141. 环形链表 - 力扣&#xff08;LeetCode&#xff09; 判断一个链表有没有环可以用快慢指针的方法&#xff0c;如果没有环&#xff0c;那么最终可以让两个指针中一个为空&#xff0c;如果有环&#xff0c;那么快指针终会与慢指针相遇 class Solution {…...

编程日记 2024/4/5 2:31:55

脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

编程新知 2025/7/31 5:34:43

Mybatis逆向工程，动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

编程新知 2025/10/29 9:05:02

【位运算】消失的两个数字（hard）

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

编程新知 2025/10/17 12:01:41

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

编程新知 2025/10/29 12:53:31

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法（ISWC2024）

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

编程新知 2025/10/26 4:58:39

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

编程新知 2025/10/23 12:05:25

JAVA后端开发——多租户

数据隔离是多租户系统中的核心概念&#xff0c;确保一个租户&#xff08;在这个系统中可能是一个公司或一个独立的客户&#xff09;的数据对其他租户是不可见的。在 RuoYi 框架&#xff08;您当前项目所使用的基础框架&#xff09;中&#xff0c;这通常是通过在数据表中增加一个…...

编程新知 2025/8/15 1:44:58

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...

编程新知 2025/10/24 15:10:51

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

编程新知 2025/10/25 15:52:58

VM虚拟机网络配置（ubuntu24桥接模式）：配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

编程新知 2025/10/29 22:27:28