Ajax 错误处理 以及ajax状态码和http状态码的区别

1. 网络畅通，服务器端能接收到请求，服务器端返回的结果不是预期结果

• 在服务器端，通过res.status()方法来设置 http 状态码
• 可以判断服务器端返回的状态码，分别进行处理。xhr.status获取 http 状态码

先设定服务器端传递 非 200 状态码，如下app.js:

// 对应07 html
// 规定客户端以get请求方式访问，服务器端的响应状态码是 非 200 状态码
app.get('/error', (req, res) => {
    res.status(400).send('not ok') // 这是服务器端的方法，用来设置 http 状态码的
    
    // 客户端会得到400 状态码，在客户端需要对错误进行处理，至少要给用户一个提示信息
    // 因此要通过ajax 获取 http 状态码
})

07-Ajax错误处理.html：

<button id="btn">发送 Ajax 请求</button>

    <script type="text/javascript">
        // 当点击 button 按钮时，就会发送 ajax请求
        var btn = document.getElementById('btn')
        
            // 给按钮添加点击事件
        btn.onclick = function() {
            var xhr = new XMLHttpRequest()
            
            xhr.open('get', 'http://localhost:3000/error')
            
            xhr.send()
            
            xhr.onload = function() {
                // xhr.status // 这个属性中存储了 http 状态码
                console.log(xhr.responseText);
                
                if (xhr.status == 400) {
                    // 如果获取到的状态码 是400， 客户端就给客户提示：请求出错
                    alert('请求出错')
                    
                        // 具体的提示内容 需要 根据项目需求来定
                }
            }
        }
    </script>

在浏览器中 访问 07html 页面得到如下：

2. 网络畅通，服务器端没有接收到请求，返回404 状态码

• 404 代表请求地址不存在，因此我们检查地址是否拼写错误
• 404 （Not Found）
• 检查请求地址是否错误

3. 网络畅通，服务器端能接收到请求，服务器端返回500状态码

• 500 状态码代表服务器端错误
• 500（Internal Server Error）
• 如果遇到这种错误，不需要自己去解决，去找后端开发人员沟通

修改app.js 代码使服务器端代码运行出错：

app.get('/error', (req, res) => {
    console.log(abc); // 服务器端会输出一个不存在的变量，则代码运行会出错，就会给客户端返回500 状态码
    res.status(400).send('not ok') // 这是服务器端的方法，用来设置 http 状态码的
})

则在浏览器中显示：

4. 网络中断，请求无法发送到服务器端

首先，我们需要知道，因为请求都没有发送到服务器端，那么服务器端肯定不会响应数据。所以，这种情况是不会触发 xhr 下面的onload 事件的。

但是，这种情况 会触发xhr对象下面的 onerror 事件

解决办法：在 onerror 事件处理函数中对错误进行处理

现在来模拟这种错误发生的情况，如何模拟断网的情况？

在浏览器的开发者工具当中，有一个选项----network（网络），在network当中有一个Offline 选项，就是离线的意思。勾选上这个选项，就可以模拟断网的情况。

• 下面来处理网络中断时的错误，在onerror 事件处理函数中 对错误进行处理
• 处理方式有多种，根据需求来写，这里只是举例而已

// 当网络中断时，会触发error 事件
            xhr.onerror = function() {
                alert('网络中断，无法发送 Ajax 请求')
            }

浏览器访问会如下显示：

Ajax 状态码 和 Http 状态码

Ajax 状态码： 表示Ajax 请求的过程，是ajax对象返回的
Http状态码： 表示请求的处理结果，是服务器端返回的