学习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月前
|
XML 前端开发 JavaScript
|
9天前
|
JSON 前端开发 JavaScript
Python中如何判断是否为AJAX请求
AJAX请求是Web开发中常见的异步数据交互方式,允许不重新加载页面即与服务器通信。在Python的Django和Flask框架中,判断AJAX请求可通过检查请求头中的`X-Requested-With`字段实现。Django提供`request.is_ajax()`方法,Flask则需手动检查该头部。本文详解这两种框架的实现方法,并附带代码示例,涵盖安全性、兼容性、调试及前端配合等内容,帮助开发者提升Web应用性能与用户体验。
31 0
|
3月前
|
JSON JavaScript 前端开发
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
75 22
|
3月前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
44 18
|
3月前
|
前端开发 JavaScript Java
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
95 4
|
3月前
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
146 1
|
4月前
|
数据采集 Web App开发 开发工具
|
缓存 前端开发 数据格式
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
90 0
|
8月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
176 0

热门文章

最新文章