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

Ajax 错误处理:

  1. 网络畅通,服务器端能接收到请求,服务器端返回的结果不是预期结果。
    可以判断服务器端返回的状态码,分别进行处理。xhr.status 获取http状态码
  2. 网络畅通,服务器端没有接收到请求,返回404状态码。
    检查请求地址是否错误。
  3. 网络畅通,服务器端能接收到请求,服务器端返回500状态码。
    服务器端错误,找后端程序员进行沟通。
  4. 网络中断,请求无法发送到服务器端。
    会触发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
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值