学习AJAX必知必会(3)~自动重启工具nodemon、缓存问题、请求超时和网络异常、取消重复请求

简介: 学习AJAX必知必会(3)~自动重启工具nodemon、缓存问题、请求超时和网络异常、取消重复请求

1、nodemon 自动重启工具(自动重启基于nodejs开发的服务端应用)

■ nodemon 是一个工具,通过在检测到目录中的文件更改时自动重新启动node应用程序来帮助开发node.js。

//安装nodemon命令(全局安装):
npm install -g nodemon


2、解决缓存问题:当请求资源不变(地址栏的url),不再发送新的请求

  • 解决:通过添加一个随机的请求参数新请求】---通过时间撮new Date( ).getTime( ) 或者 Data.now( )添加随机数
  • 一般不需要咱手动添加,工具都有自动生成一个时间撮
xhr.open('get', 'http://127.0.0.1:8000/server?t=Date.now()');//通过添加一个随机的请求参数【新请求】解决缓存问题


3、Ajax请求超时和网络异常处理

(1)Ajax请求超时:

  • 客户端html处理:设置超时时间timeout和超时回调函数ontimeout
//设置超时为2s
  xhr.timeout = 2000;
 //超时回调
  xhr.ontimeout = function () {
      alert('网络异常,请稍后再试!')
  }
  • 服务端进行延时提醒:
app.get('/server', (request, response) => {
    //设置响应头(允许跨域)
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应头(允许自定义请求头)
    response.setHeader('Access-Control-Allow-Headers', '*');
  //设置响应体
    setTimeout(() => {
        response.send('服务端延时响应');  
    }, 3000)
});


(2)网络异常:

  • 客户端html处理:设置网络异常回调函数onerror
xhr.onerror = function () {
      alert('你的网络似乎除了问题!');
  }


4、Ajax取消请求

■ 通过abort方法
xhr.abort();
■ 取消重复请求(通过一个布尔的标识变量)
  • isSending初始值为false, send方法执行之后,isSending值为true,获取响应数据,判断状态值为4时,当前请求完成,isSending为false
  • 通过判断isSending 是否为true,为true 执行 abort方法
//是否正在发送ajax请求
  let isSending = false;
  if(isSending) {
        //console.log('正在请求')
        xhr.abort();
  }
  isSending = true;
 //3、发送Ajax请求
 xhr.send();
 //4、事件绑定,处理服务端返回结果
 xhr.onreadystatechange = function () {
    //处理前判断服务端是否返回所有结果和服务端的状态码是2**
    if (xhr.readyState === 4) {
         isSending = false;
    }
 }
目录
相关文章
|
2天前
|
人工智能 网络协议 IDE
使用通义灵码AI高效学习muduo网络库开发指南
Muduo 是一个基于 C++11 的高性能网络库,支持多线程和事件驱动,适用于构建高效的服务器和应用程序。它提供 TCP/IP 协议支持、异步非阻塞 I/O、定时器、异步日志等功能,并具备跨平台特性。通过 Git 克隆 muduo 仓库并切换至 C++17 分支可开始使用。借助 AI 工具如 Deepseak-v3,用户可以更便捷地学习和理解 Muduo 的核心模块及编写测试用例,提升开发效率。
|
1月前
|
缓存 NoSQL Java
Mybatis学习:Mybatis缓存配置
MyBatis缓存配置包括一级缓存(事务级)、二级缓存(应用级)和三级缓存(如Redis,跨JVM)。一级缓存自动启用,二级缓存需在`mybatis-config.xml`中开启并配置映射文件或注解。集成Redis缓存时,需添加依赖、配置Redis参数并在映射文件中指定缓存类型。适用于查询为主的场景,减少增删改操作,适合单表操作且表间关联较少的业务。
|
5月前
|
监控 网络协议 Linux
网络学习
网络学习
168 68
|
3月前
|
编解码 安全 Linux
网络空间安全之一个WH的超前沿全栈技术深入学习之路(10-2):保姆级别教会你如何搭建白帽黑客渗透测试系统环境Kali——Liinux-Debian:就怕你学成黑客啦!)作者——LJS
保姆级别教会你如何搭建白帽黑客渗透测试系统环境Kali以及常见的报错及对应解决方案、常用Kali功能简便化以及详解如何具体实现
|
3月前
|
安全 网络协议 算法
网络空间安全之一个WH的超前沿全栈技术深入学习之路(8-1):主动信息收集之ping、Nmap 就怕你学成黑客啦!
网络空间安全之一个WH的超前沿全栈技术深入学习之路(8-1):主动信息收集之ping、Nmap 就怕你学成黑客啦!
|
3月前
|
网络协议 安全 NoSQL
网络空间安全之一个WH的超前沿全栈技术深入学习之路(8-2):scapy 定制 ARP 协议 、使用 nmap 进行僵尸扫描-实战演练、就怕你学成黑客啦!
scapy 定制 ARP 协议 、使用 nmap 进行僵尸扫描-实战演练等具体操作详解步骤;精典图示举例说明、注意点及常见报错问题所对应的解决方法IKUN和I原们你这要是学不会我直接退出江湖;好吧!!!
网络空间安全之一个WH的超前沿全栈技术深入学习之路(8-2):scapy 定制 ARP 协议 、使用 nmap 进行僵尸扫描-实战演练、就怕你学成黑客啦!
|
3月前
|
网络协议 安全 算法
网络空间安全之一个WH的超前沿全栈技术深入学习之路(9):WireShark 简介和抓包原理及实战过程一条龙全线分析——就怕你学成黑客啦!
实战:WireShark 抓包及快速定位数据包技巧、使用 WireShark 对常用协议抓包并分析原理 、WireShark 抓包解决服务器被黑上不了网等具体操作详解步骤;精典图示举例说明、注意点及常见报错问题所对应的解决方法IKUN和I原们你这要是学不会我直接退出江湖;好吧!!!
网络空间安全之一个WH的超前沿全栈技术深入学习之路(9):WireShark 简介和抓包原理及实战过程一条龙全线分析——就怕你学成黑客啦!
|
5月前
|
缓存 JavaScript 中间件
优化Express.js应用程序性能:缓存策略、请求压缩和路由匹配
在开发Express.js应用时,采用合理的缓存策略、请求压缩及优化路由匹配可大幅提升性能。本文介绍如何利用`express.static`实现缓存、`compression`中间件压缩响应数据,并通过精确匹配、模块化路由及参数化路由提高路由处理效率,从而打造高效应用。
266 15
|
4月前
|
SQL 缓存 Java
JVM知识体系学习三:class文件初始化过程、硬件层数据一致性(硬件层)、缓存行、指令乱序执行问题、如何保证不乱序(volatile等)
这篇文章详细介绍了JVM中类文件的初始化过程、硬件层面的数据一致性问题、缓存行和伪共享、指令乱序执行问题,以及如何通过`volatile`关键字和`synchronized`关键字来保证数据的有序性和可见性。
67 3
|
4月前
|
存储 安全 网络安全
浅谈网络安全的认识与学习规划
浅谈网络安全的认识与学习规划
67 6

热门文章

最新文章