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状态码: 表示请求的处理结果,是服务器端返回的
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgchkka
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01