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('服务器启动成功');