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.rhkb.cn/news/297213.html

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

相关文章

计算机网络：数据链路层 - 可靠传输协议

计算机网络：数据链路层 - 可靠传输协议

计算机网络&#xff1a;数据链路层 - 可靠传输协议 可靠传输概念停止-等待协议 SW回退N帧协议 GBN选择重传协议 SR 可靠传输概念 如下所示&#xff0c;帧在传输过程中受到干扰&#xff0c;产生了误码。接收方的数据链路层&#xff0c;通过真伪中的真检验序列 FCS 字段的值&…
阅读更多...
Python环境下基于离散小波变换的信号降噪方法

Python环境下基于离散小波变换的信号降噪方法

Mallat创造了小波分析中的经典理论之一&#xff0c;即多分辨率分析的概念。后来&#xff0c;在Mallat与Meyer的共同努力之下&#xff0c;他们又在这一理论的基础上发明了离散小波变换的快速算法&#xff0c;这就是Mallat塔式算法&#xff0c;这种算法可以大量减少计算时间。在之…
阅读更多...
6、Cocos Creator 2D 渲染组件：​Sprite 组件​

6、Cocos Creator 2D 渲染组件：​Sprite 组件​

Sprite 组件 Sprite&#xff08;精灵&#xff09;是 2D/3D 游戏最常见的显示图像的方式&#xff0c;在节点上添加 Sprite 组件&#xff0c;就可以在场景中显示项目资源中的图片。 属性功能说明Type渲染模式&#xff0c;包括普通&#xff08;Simple&#xff09;、九宫格&#x…
阅读更多...
Android Monkey自动化测试

Android Monkey自动化测试

monkey一般用于压力测试&#xff0c;用户模拟用户事件 monkey 基本用法 adb shell monkey [参数] [随机事件数]monkey常用命令 -v&#xff1a;用于指定反馈信息级别&#xff0c;总共分三个等级-v -v -vadb shell mokey -v -v -v 100-s&#xff1a;用于指定伪随机数生成器的种…
阅读更多...
Apache DolphinScheduler 【安装部署】

Apache DolphinScheduler 【安装部署】

前言 今天来学习一下 DolphinScheduler &#xff0c;这是一个任务调度工具&#xff0c;现在用的比较火爆。 1、安装部署 1.0、准备工作 1.0.1、集群规划 dolphinscheduler 比较吃内存&#xff0c;所以尽量给 master 节点多分配一点内存&#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…
阅读更多...
jupyter Notebook 默认路径修改

jupyter Notebook 默认路径修改

1. anaconda prompt 中运行 jupyter notebook --generate-config 命令&#xff0c;将在 C:\Users\Think\.jupyter文件下生成 jupyter_notebook_config.py 文件。 2.在jupyter_notebook_config.py 文件中&#xff0c;找c.NotebookApp.notebook_dir 这个变量&#xff0c; (1)若…
阅读更多...
【Linux】详解动态库链接和加载对可执行程序底层的理解

【Linux】详解动态库链接和加载对可执行程序底层的理解

一、动静态库链接的几种情况 如果我们同时提供动态库和静态库&#xff0c;gcc默认使用的是动态库。如果我们非要使用静态库&#xff0c;要加-static选项。如果我们只提供静态库&#xff0c;那可执行程序没办法&#xff0c;只能对该库进行静态链接&#xff0c;但程序不一定整体…
阅读更多...
MySQL版本特性和存储引擎选择

MySQL版本特性和存储引擎选择

MySQL版本特性和存储引擎选择 1.说一下MySQL 5.5 5.6 5.7 8.0 各个版本的特性 MySQL 5.5 优点: 稳定性&#xff1a;5.5版本是长期支持&#xff08;LTS&#xff09;版本&#xff0c;因此它非常稳定&#xff0c;被广泛部署在生产环境中。兼容性&#xff1a;与旧版本的MySQL和…
阅读更多...
Golang | Leetcode Golang题解之第3题无重复字符的最长子串

Golang | Leetcode Golang题解之第3题无重复字符的最长子串

题目&#xff1a; 题解&#xff1a; func lengthOfLongestSubstring(s string) int {// 哈希集合&#xff0c;记录每个字符是否出现过m : map[byte]int{}n : len(s)// 右指针&#xff0c;初始值为 -1&#xff0c;相当于我们在字符串的左边界的左侧&#xff0c;还没有开始移动r…
阅读更多...
【C++常用函数介绍】isalpha,isalnum、isdigit、islower、isupper 用法

【C++常用函数介绍】isalpha,isalnum、isdigit、islower、isupper 用法

首先 isalpha,isalnum、isdigit、islower、isupper 的使用方法都需要用到一个头文件 #include<ctype.h>其次 系统的介绍以上函数的用法 isalpha()用来判断一个字符是否为字母 isalnum&#xff08;&#xff09;用来判断一个字符是否为数字或者字母&#xff0c;也就是说…
阅读更多...
【数据结构】——二叉树的递归实现，看完不再害怕递归

【数据结构】——二叉树的递归实现，看完不再害怕递归

创作不易&#xff0c;感谢三连加支持&#xff1f;&#xff01; 一 递归理解 递归无非就是相信它&#xff0c;只有你相信它&#xff0c;你才能写好递归&#xff01;为什么&#xff1f;请往下看 在进入二叉树的实现之前&#xff0c;我们得先理解一遍递归&#xff0c;可能很多…
阅读更多...
Android JNI 调用第三方SO

Android JNI 调用第三方SO

最近一个项目使用了Go 编译了一个so库&#xff0c;但是这个so里面还需要使用第三方so库pdfium, 首先在Android工程把2个so库都放好 在jni中只能使用dlopen方式&#xff0c;其他的使用函数指针的方式来调用&#xff0c;和windows dll类似&#xff0c;不然虽然编译过了但是会崩溃…
阅读更多...
SpringBoot -- 外部化配置

SpringBoot -- 外部化配置

我们如果要对普通程序的jar包更改配置&#xff0c;那么我们需要对jar包解压&#xff0c;并在其中的配置文件中更改配置参数&#xff0c;然后再打包并重新运行。可以看到过程比较繁琐&#xff0c;SpringBoot也注意到了这个问题&#xff0c;其可以通过外部配置文件更新配置。 我…
阅读更多...
Android Studio控制台输出中文乱码问题

Android Studio控制台输出中文乱码问题

控制台乱码现象 安卓在调试阶段&#xff0c;需要查看app运行时的输出信息、出错提示信息。 乱码&#xff0c;会极大的阻碍开发者前进的信心&#xff0c;不能及时的根据提示信息定位问题&#xff0c;因此我们需要查看没有乱码的打印信息。 解决步骤&#xff1a; step1: 找到st…
阅读更多...
RUST语言变量与数据类型使用

RUST语言变量与数据类型使用

使用之前了解: fn main() 表示程序入口点 println!("要输出的内容"); 表示格式化输出 变量与常量声明: let 变量:变量类型 变量值;let mut 变量:变量类型 变量值; const 常量:常量类型 常量值 如果 声明时不指定类型,将根据赋值类型自动推导 变量类型参与下…
阅读更多...
词向量模型评估

词向量模型评估

一、既有范式 词向量的语言学特性&#xff1a;这部分主要通过一些具体的指标来评估词向量是否能捕捉到语言的内在规律&#xff0c;包括&#xff1a; 相似度评价指标&#xff1a;检查词向量空间中距离近的词是否与人类直觉一致&#xff0c;例如&#xff0c;利用余弦相似度来评估…
阅读更多...
Kali WSL2(windows下安装了kali)

Kali WSL2(windows下安装了kali)

自从WSL2以来&#xff0c;感觉各方面也挺好的&#xff0c;有时候比vmware workstation方便&#xff0c;特别单独使用一个linux的时候。所以研究了下kali&#xff0c;也是很OK的&#xff0c;以及验证完成了。 本文参考官网&#xff1a; Kali Linux | Penetration Testing and Et…
阅读更多...
鸿蒙手机cordova-plugin-camera不能拍照和图片不显示问题

鸿蒙手机cordova-plugin-camera不能拍照和图片不显示问题

鸿蒙手机cordova-plugin-camera不能拍照和图片不显示问题 一、运行环境 1、硬件 手机型号&#xff1a;NOVA 7 系统&#xff1a;HarmonyOS版本 4.0.0 2、软件 android SDK platforms&#xff1a;14.0(API Level 34)、13.0&#xff08;API Level 33&#xff09; SDK Build-T…
阅读更多...
Linux-Arm GDB调试（本地和远程）

Linux-Arm GDB调试（本地和远程）

目录 问题描述 已有coredump 没有coredump 小结 问题描述 Linux本机调试使用GDB非常方便&#xff0c;但嵌入式Linux设备资源有限&#xff0c;通常并没有交叉编译工具&#xff0c;那嵌入式设备上的应用发生问题如何查找问题&#xff1f;通常IDE有远程DEBUG功能&#xff0c;这…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023