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

AJAX —— 学习（二）

news 文章来源：https://blog.csdn.net/qq_63342197/article/details/137270118 2024/10/31 19:21:29

目录

一、利用 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

SpringBoot整合ELK8.1.x实现日志中心教程

目录 背景 环境准备 环境安装 1.JDK安装 2.安装Elasticsearch 3.安装zookeeper 4.安装Kafka 5.安装logstash 6.安装file beat 解决方案场景 1.日志采集 1.1 应用日志配置 1.1.1 创建logback-spring.xml文件 1.1.2 创建LoggerFactory 1.1.3 trace日志的记录用法 …...

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

计算机网络：数据链路层 - 封装成帧 透明传输 差错检测

计算机网络&#xff1a;数据链路层 - 封装成帧 & 透明传输 & 差错检测 数据链路层概述封装成帧透明传输差错检测 数据链路层概述 从数据链路层来看&#xff0c;主机 H1 到 H2 的通信可以看成是在四段不同的链路上的通信组成的&#xff0c;所谓链路就是从一个节点到相邻…...

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

Open3D (C++) 计算点云的特征值特征向量

目录 一、算法原理二、代码实现三、结果展示本文由CSDN点云侠原创，原文链接。如果你不是在点云侠的博客中看到该文章，那么此处便是不要脸的爬虫与GPT。 一、算法原理 针对整个点云 P = { p i } i...

编程日记 2024/4/5 2:23:48

Java | Leetcode Java题解之第8题字符串转换整数atoi

题目&#xff1a; 题解&#xff1a; class Solution {public int myAtoi(String str) {Automaton automaton new Automaton();int length str.length();for (int i 0; i < length; i) {automaton.get(str.charAt(i));}return (int) (automaton.sign * automaton.ans);} …...

编程日记 2024/4/5 2:20:45

BL200耦合器数据采集模块

BL200耦合器数据采集模块是一个数据采集和控制系统&#xff0c;基于强大的32 位ARM926EJ-S™ 微处理器设计&#xff0c;采用Linux操作系统&#xff0c;支持Modbus TCP协议&#xff0c;可以快速接入现场PLC、MES、Ignition和SCADA以及ERP系统&#xff0c;同时也能快速连接到AWS云…...

编程日记 2024/4/5 2:19:44

基于Uni-app的体育场馆预约系统的设计与实现

个人介绍 hello hello~ &#xff0c;这里是 code袁~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注&#x1f4a5;&#x1f4a5;收藏&#x1f339;&#x1f339;&#x1f339; &#x1f981;作者简介&#xff1a;一名喜欢分享和记录学习的…...

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

1.Spring Boot框架整合

Spring Boot项目创建&#xff08;约定大于配置&#xff09; 2.1.3.RELEASE版本示例 idea创建 从官网下载&#xff08;https://start.spring.io/&#xff09;单元测试默认依赖不对时&#xff0c;直接删除即可 Web支持&#xff08;SpringMVC&#xff09; <dependency>&…...

编程日记 2024/4/5 2:13:38

如何在 Debian VPS 上添加、删除和授予用户 sudo 权限

简介 当你启动一个新的服务器时&#xff0c;会创建一个名为 root 的默认账户。这个用户拥有完全的系统访问权限&#xff0c;应该仅用于管理任务。作为 root 用户&#xff0c;你基本上可以对系统做任何操作&#xff0c;这很强大&#xff0c;但也极其危险。Linux 没有“撤销”按…...

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

openlayers 入门教程（九）：overlay 篇

还是大剑师兰特&#xff1a;曾是美国某知名大学计算机专业研究生&#xff0c;现为航空航海领域高级前端工程师&#xff1b;CSDN知名博主&#xff0c;GIS领域优质创作者&#xff0c;深耕openlayers、leaflet、mapbox、cesium&#xff0c;canvas&#xff0c;webgl&#xff0c;ech…...

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

基于Python的高考志愿辅助填报系统

基于Python的高考志愿辅助填报系统是一个利用数据分析和机器学习技术帮助高考生进行志愿填报决策的工具。该系统可以根据考生的分数、兴趣、专业偏好、历史录取数据等因素&#xff0c;为考生提供科学合理的志愿填报建议。以下是设计这样一个系统的步骤和要点。 ### 1. 数据收集…...

编程日记 2024/4/5 2:00:28

英语网站建设/培训seo去哪家机构最好

一、前言 请务必看到最后。Python牛已经不是一天两天的事了&#xff0c;但是我开始也没想到&#xff0c;Python能这么牛。前段时间接触了一个批量抠图的模型库&#xff0c;而后在一些视频中找到灵感&#xff0c;觉得应该可以通过抠图的方式&#xff0c;给视频换一个不同的场景&…...

编程日记 2024/10/31 18:00:10

wordpress新建全屏页面/怎么做好公司官网推广

变量、常量、命名规范 变量 Java是一种强类型语言&#xff0c;每个变量都必须声明其类型。只有声明变量后才能对变量去分配相应的存储空间。 Java变量是程序中最基本的存储单元&#xff0c;变量包括变量类型、变量名和作用域。变量类型可以是基本类型和引用类型。 局部变量和…...

编程日记 2024/10/31 11:05:36

wordpress 图片自适应/学前端去哪个培训机构

本文整理匯總了Java中com.android.ddmlib.AndroidDebugBridge.init方法的典型用法代碼示例。如果您正苦於以下問題&#xff1a;Java AndroidDebugBridge.init方法的具體用法&#xff1f;Java AndroidDebugBridge.init怎麽用&#xff1f;Java AndroidDebugBridge.init使用的例子…...

编程日记 2024/10/31 11:01:34

长沙麓谷网站建设/外贸网站平台有哪些

VS2005在使用membership的时候&#xff0c;如何连接Access数据库&#xff1f;在使用asp.net应该程序配置时没有可以使用Access 的选项&#xff0c;要在web.config文件加入Access的提供者&#xff0c;明天再测试&#xff0c;睡了 转载于:https://www.cnblogs.com/DelphiFan/arch…...

编程日记 2024/10/31 10:21:56

手机app制作报价/百度seo网站优化 网络服务

<%# Eval("id") %>Bind方式 <%# Bind("id","~/info.aspx?id{0}") %>推荐使用第一种方式&#xff0c;可以在一个<%# %>里放入多个绑定&#xff0c;而第二种只能如此绑定一个值<%# Eval("id") ":" …...

编程日记 2024/10/31 7:58:55

网站建设的市场需求/win优化大师官网

下载地址&#xff1a;http://code.google.com/p/freecms/ 站点管理 FreeCMS支持网站群模式,并支持无限树级管理。 1. 添加一级站点 从左侧管理菜单点击站点管理进入。 提示&#xff1a;只有admin才可以进行“添加一级站点”操作。 点击“添加一级站点” 输入相关属性点击“保存…...

编程日记 2024/10/31 0:33:02