Ajax基础：获取http状态码与Ajax缓存问题

Ajax请求状态码：0，1，2，3，4

Http状态码：表示请求的处理结果，是服务器端返回的200/304/404/500等

可以使用Ajax对象的status对状态码进行获取

我们可以使用onreadystatechange()或onload()来获取服务器端响应的数据

当使用onload时，触发条件：对服务器端的响应数据接收完毕

如果网络中断，将不能从客户端发送到服务器端，也就不能被触发onload事件

但是会触发 onerror 事件，网络中断时触发这个事件，可以用于给用户做出提示

客户端 07ajax.html 代码：

<body>
    <button id="btn">发送Ajax请求</button>
    <script>
        var btn = document.getElementById('btn');
        btn.onclick = function() {
            var aj = new XMLHttpRequest();
            aj.open('get', 'http://localhost:3000/error');
            aj.send();

            aj.onload = function() {
                // 可以通过aj.status来获取状态码
                console.log(aj.responseText);
                if (aj.status == 400) {
                    alert('请求出错-400');
                }
            }

            aj.onerror = function() {
                alert('网络中断，无法发送Ajax请求');
            }
        }
    </script>
</body>

服务器端 app.js 代码：

const express = require('express');
const path=require('path');
 
const app = express();
 
//指明静态文件目录位置，以便浏览器中对（客户端）静态文件的加载
app.use(express.static(path.join(__dirname, 'public')));
 
app.get('/error', (req, res) => {
    res.status(400).send('not ok');
})
 
app.listen(3000);
console.log('3000已启动');

测试请求出错：

服务器端设置了对/error以状态码400进行响应，响应内容是"not ok"

客户端对响应数据进行了输出，并通过status获取到了状态码，也针对400状态码进行了提示

测试网络中断：

可以将网络中的Offline选项打勾来断开网络连接，经测试，会触发onerror事件，客户端进行提示

缓存问题

在IE低版本中，如果请求地址相同，会从缓存中拿取数据

就算源文件内容已更改，也不会更新缓存

所以保证每一次请求的地址不同即可(可以添加一个请求参数，一个随机数)

客户端 08ajax.html 代码：

<body>
    <button id="btn">发送Ajax请求</button>
    <script>
        var btn = document.getElementById('btn');
        btn.onclick = function() {
            var aj = new XMLHttpRequest();
           
            aj.open('get', 'http://localhost:3000/cache?t=' + Math.random());
            aj.send();

            aj.onreadystatechange = function() {
                if (aj.readyState == 4 && aj.status == 200) {
                    alert(aj.responseText);
                }
            }
        }
    </script>
</body>

添加了请求参数 t 为一个随机数，保证了每次的请求地址不同，也就避免了从缓存中拿数据

服务器端 app.js 代码

const express = require('express');
const path=require('path');
const fs = require('fs');
 
const app = express();
 
//指明静态文件目录位置，以便浏览器中对（客户端）静态文件的加载
app.use(express.static(path.join(__dirname, 'public')));
 
app.get('/cache', (req, res) => {
    fs.readFile('./test.txt', (err, result) => {
        res.send(result);
    });
})
 
app.listen(3000);
console.log('3000已启动');

服务器端接收到请求后将会读取当前目录下的test.txt文件，并将读取结果响应给客户端

客户端判断当前已接收完响应数据同时HTTP状态码正常时，再alert出响应的数据信息

原文链接：https://blog.csdn.net/qq_38800316/article/details/120394009