AJAX —— 学习（二）

目录

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

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

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

相关文章

QA测试开发工程师面试题满分问答8: mysql数据库的索引定义、用途和使用场景

QA测试开发工程师面试题满分问答8: mysql数据库的索引定义、用途和使用场景

MySQL数据库索引是一种数据结构&#xff0c;用于提高数据库的查询效率。索引是基于表中的一个或多个列构建的&#xff0c;它们允许数据库系统快速定位和访问表中的特定数据&#xff0c;而无需扫描整个表。 索引的定义 在MySQL中&#xff0c;可以使用CREATE INDEX语句定义索引…
阅读更多...
Linux：进程终止和等待

Linux：进程终止和等待

一、进程终止 main函数的返回值也叫做进程的退出码&#xff0c;一般0表示成功&#xff0c;非零表示失败。我们也可以用不同的数字来表示不同失败的原因。 echo $?//打印最近一次进程执行的退出码 而作为程序猿&#xff0c;我们更需要知道的是错误码所代表的错误信息&#x…
阅读更多...
【信号与系统 - 2】傅里叶变换与反变换

【信号与系统 - 2】傅里叶变换与反变换

1 傅里叶变换与频谱密度函数 非周期信号可以看成是 T → ∞ T\to{\infty} T→∞ 的周期信号 由于 w ↓ 2 π T ↑ w\downarrow\frac{2\pi}{T\uparrow} w↓T↑2π​&#xff0c; T T T 无限大&#xff0c;则基波频率 w w w 无限小&#xff0c;可以视为 d w dw dw 在频谱图…
阅读更多...
电工技术学习笔记——直流电路及其分析方法

电工技术学习笔记——直流电路及其分析方法

一、直流电路 电路的组成 1. 电压和电流的参考方向 电压&#xff08;Voltage&#xff09;&#xff1a;电压是电场力对电荷产生的作用&#xff0c;表示为电荷单位正电荷所具有的能量。在电路中&#xff0c;电压通常被定义为两点之间的电势差&#xff0c;具有方向性&#xff0c;…
阅读更多...
HomePlug AV

HomePlug AV

目录 HomePlug AV的基本概念基本术语网络概念网络实例 HomePlug AV物理层&#xff08;PHY&#xff09;HomePlug AV OFDM收发器架构PHY的调制模式FC调制和ROBO调制物理层的特点OFDM频域/时域转换开窗/槽式OFDM信号和噪声PHY发送控制——信道自适应PHY帧格式&#xff08;Symbol&a…
阅读更多...
中间件复习之-RPC框架

中间件复习之-RPC框架

什么是RPC框架&#xff1f; RPC(Remote Procedure Call):远程过程调用。当多个应用部署在多个服务器上时&#xff0c;由于他们不在一个内存空间上&#xff0c;因此需要网络来进行通信&#xff0c;而RPC允许它像调用本地方法一样调用远程服务。 RPC原理 服务消费方通过RPC客户…
阅读更多...
Unity类银河恶魔城学习记录12-3 p125 Limit Inventory Slots源代码

Unity类银河恶魔城学习记录12-3 p125 Limit Inventory Slots源代码

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili Inventory.cs using Newtonsoft.Json.Linq; using System.Collections; us…
阅读更多...
【面试八股总结】进程（一）

【面试八股总结】进程（一）

参考资料 &#xff1a;小林Coding、阿秀、代码随想录 一、什么是进程&#xff1f; 1. 基本概念 进程是具有独立功能的程序在一个数据集合上运行的过程&#xff0c;是系统进行资源分配和调度的一个独立单位。 2. 进程控制块 系统通过进程控制块PCB描述进程的进本情况…
阅读更多...
20.2k stars项目搭建私人网盘界面美功能全

20.2k stars项目搭建私人网盘界面美功能全

Nextcloud是一套用于创建网络硬盘的客户端&#xff0d;服务器软件。其功能与Dropbox相近&#xff0c;但Nextcloud是自由及开放源代码软件&#xff0c;每个人都可以在私人服务器上安装并执行它。 GitHub数据 20.2k stars561 watching3.2k forks 开源地址:https://github.com/ne…
阅读更多...
利用Python将TXT文件中的经纬度数据转换为JSON格式

利用Python将TXT文件中的经纬度数据转换为JSON格式

在处理地理空间数据时&#xff0c;经常需要将数据从一种格式转换为另一种格式&#xff0c;以便于后续的分析或可视化。本文将介绍如何使用Python脚本将存储在TXT文件中的经纬度数据转换为JSON格式。 一、背景介绍 经纬度数据是地理信息系统&#xff08;GIS&#xff09;中的基…
阅读更多...
Redis 全景图（3）--- Redis 应用于缓存

Redis 全景图（3）--- Redis 应用于缓存

前言 这是关于 Redis 全景图的最后一篇文章。因为一次写太多会限流&#xff0c;我也是没办法&#xff0c;才分成三篇文章来写。这篇文章是关于 Redis 应用于缓存的。 其实为什么要讲这个话题呢&#xff1f; Redis 应用在很多地方呀&#xff0c;为什么一定要挑着这个话题来讲呢…
阅读更多...
如何从屏幕破损的 Android 手机恢复数据？

如何从屏幕破损的 Android 手机恢复数据？

假设您不小心将智能手机掉落在地上&#xff0c;导致手机显示屏破裂&#xff1b;或者&#xff0c;如果Android手机由于日常生活中的病毒攻击等其他原因而损坏或死机&#xff0c;如何从损坏的Android手机中完全提取保存的联系人、消息甚至更多文件&#xff1f;如何在手机上恢复所…
阅读更多...
使用 Prisma ORM 和 Cloudflare D1 构建应用程序

使用 Prisma ORM 和 Cloudflare D1 构建应用程序

自 2017 年推出 Workers 以来&#xff0c;Cloudflare 一直引领边缘计算领域。Cloudflare 最近通过 D1 发布了本机无服务器数据库。我们现在可以使用 Prisma ORM 与 D1 一起构建应用程序。 将数据库部署到边缘 Cloudflare Workers 是一种分布在全球范围内的轻量级无服务器计算形…
阅读更多...
Centos7安装Docker与Docker-compose【图文教程】

Centos7安装Docker与Docker-compose【图文教程】

个人记录 查看一下系统是否已经安装了Docker yum list installed | grep docker如下图代表没有安装Docker 卸载已有Docker yum remove docker docker-common docker-selinux docker-engine切换目录 cd /etc/yum.repos.d/查看当前目录所有的镜像源 ll安装yum-util与devi…
阅读更多...
基于springboot实现影城管理系统项目【项目源码+论文说明】

基于springboot实现影城管理系统项目【项目源码+论文说明】

基于springboot实现影城管理系统演示 摘要 随着现在网络的快速发展&#xff0c;网上管理系统也逐渐快速发展起来&#xff0c;网上管理模式很快融入到了许多生活之中&#xff0c;随之就产生了“小徐影城管理系统”&#xff0c;这样就让小徐影城管理系统更加方便简单。 对于本小…
阅读更多...
C语言-realloc函数的使用

C语言-realloc函数的使用

语法格式 1. realloc 函数用于动态地改变之前分配的内存块的大小。其函数原型如下&#xff1a; void *realloc(void *ptr, size_t size);- ptr: 指向之前分配的内存块的指针。如果 ptr 为 NULL&#xff0c;那么 realloc 行为与 malloc 相同。 - size: 新分配的大小&#xff0…
阅读更多...
前端三剑客 —— CSS （上）

前端三剑客 —— CSS （上）

上节内容中提到了 前端三剑客 —— HTML 超文本标记语言&#xff0c;这节内容 跟大家讲述三剑客中的第二个 CSS。 CSS 什么是CSS Cascading Style Sheel&#xff0c;简称CSS&#xff0c;中文叫层叠样式表&#xff0c;也叫级联样式表。主要作用是来修饰HTML页面的一种技术。 …
阅读更多...
案例：非功能性需求的设计

案例：非功能性需求的设计

在咨询中看到很多项目组对于非功能性需求没有做设计&#xff0c;很多项目组在设计文档中仅仅是把非功能性需求的描述拷贝到设计文档的非功能性章节。因此特地设计了两个简单的需求给大家参考&#xff0c;希望能够引导设计人员重视非功能性需求的设计。
阅读更多...
视觉大模型--deter的深入理解

视觉大模型--deter的深入理解

但对于transformer用于目标检测领域的开创性模型&#xff0c;该模型言简意赅&#xff0c;但是但从论文理解&#xff0c;有很多细节都不清楚&#xff0c;尤其是解码器的query和二分图匹配(Bipartite Matching)和匈牙利算法(Hungarian Algorithm)相关&#xff0c;本文将根据代码详…
阅读更多...
32. UE5 RPG使用增强输入激活GameplayAbility（二）

32. UE5 RPG使用增强输入激活GameplayAbility（二）

在上一篇文章中&#xff0c;我们实现了Tag和InputAction的数据对应&#xff0c;后面&#xff0c;我们会通过InputAction触发对应的Tag&#xff0c;然后在GameplayAbility身上设置对应的Tag&#xff0c;然后通过Tag遍历角色身上的所有应用的技能去激活。为了实现这个功能&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023