Ajax的错误处理+低版本 IE 浏览器的缓存问题

最新推荐文章于 2022-03-27 20:53:03 发布

菜鸟小黄

最新推荐文章于 2022-03-27 20:53:03 发布

阅读量190

点赞数

分类专栏：前端文章标签： ajax nodejs

本文链接：https://blog.csdn.net/weixin_43324141/article/details/105808979

版权

前端专栏收录该内容

16 篇文章 1 订阅

订阅专栏

Ajax 错误处理：

网络畅通，服务器端能接收到请求，服务器端返回的结果不是预期结果。
可以判断服务器端返回的状态码，分别进行处理。xhr.status 获取http状态码
网络畅通，服务器端没有接收到请求，返回404状态码。
检查请求地址是否错误。
网络畅通，服务器端能接收到请求，服务器端返回500状态码。
服务器端错误，找后端程序员进行沟通。
网络中断，请求无法发送到服务器端。
会触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理。

<button id="btn">发送Ajax请求</button>
	<script type="text/javascript">
		var btn = document.getElementById('btn');

		btn.onclick = function () {
			// 1.创建ajax对象
			var xhr = new XMLHttpRequest();
			// 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求
			// 1)请求方式 2)请求地址
			xhr.open('get', 'http://localhost:3000/error');
			// 3.发送请求
			xhr.send();
			// 4.获取服务器端响应到客户端的数据
			xhr.onload = function (){
				// xhr.status 获取http状态码
				console.log(xhr.responseText);

				if (xhr.status == 400) {
					alert('请求出错')
				}
			}
			// 当网络中断时会触发onerrr事件
			xhr.onerror = function () {
				alert('网络中断, 无法发送Ajax请求')
			}
		}

		// Ajax状态码: 表示Ajax请求的过程状态 ajax对象返回的
		// Http状态码: 表示请求的处理结果 是服务器端返回的
	</script>

低版本 IE 浏览器的缓存问题：

问题：在低版本的 IE 浏览器中，Ajax 请求有严重的缓存问题，即在请求地址不发生变化的情况下，只有第一次请求会真正发送到服务器端，后续的请求都会从浏览器的缓存中获取结果。即使服务器端的数据更新了，客户端依然拿到的是缓存中的旧数据。

**解决方案：**在请求地址的后面加请求参数，保证每一次请求中的请求参数的值不相同。

 xhr.open('get', 'http://www.example.com?t=' + Math.random());

ajax代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<button id="btn">发送Ajax请求</button>
	<script type="text/javascript">
		var btn = document.getElementById('btn');

		btn.onclick = function () {
			// 1.创建ajax对象
			var xhr = new XMLHttpRequest();
			// 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求
			// 1)请求方式 2)请求地址    t等于一个随机字符串
			xhr.open('get', 'http://localhost:3000/cache?t=' + Math.random());
			// 3.发送请求
			xhr.send();
			// 4.获取服务器端响应到客户端的数据
			xhr.onreadystatechange = function (){
				//服务器响应数据接收完  + http状态码200
				if (xhr.readyState == 4 && xhr.status == 200) {
					alert(xhr.responseText);
				}
			}
			
		}
	</script>
</body>
</html>

app.js代码：

// 1.引入express框架（快速创建服务器）
const express = require('express');
// 2.路径处理模块（处理静态资源文件夹目录）
const path = require('path');
// 读取系统文件模块导入
const fs = require('fs');
// 3.创建web服务器
const app = express();


// 4.静态资源访问服务功能 定义public文件夹
app.use(express.static(path.join(__dirname, 'public')));

// 对应08html文件   cache代表缓存的意思
app.get('/cache', (req, res) => {
	// 读取文件   回调函数
	fs.readFile('./test.txt', (err, result) => {
		//err+文件读取结果
		res.send(result);//文件内容响应到客服端
	});
});

// 5.监听端口
app.listen(3000);
// 控制台提示输出
console.log('服务器启动成功');

菜鸟小黄

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax的错误处理+低版本 IE 浏览器的缓存问题

Ajax 错误处理：网络畅通，服务器端能接收到请求，服务器端返回的结果不是预期结果。可以判断服务器端返回的状态码，分别进行处理。xhr.status 获取http状态码网络畅通，服务器端没有接收到请求，返回404状态码。检查请求地址是否错误。网络畅通，服务器端能接收到请求，服务器端返回500状态码。服务器端错误，找后端程序员进行沟通。网络中断，请求无法发送到服务器端。会触发xhr...
复制链接

扫一扫