Ajax 错误处理

Ajax 错误处理

也就是当请求结果不是预期结果时我们应该如何处理。

错误处理的四种情况:

第一种情况当网络畅通时也就是连接互联网的时候,请求可以正常的发送出去服务器端能够接收到请求,但是服务器端返回的结果不是预期结果。比如说客户端发送的这个请求参数不符合要求,服务端返回非200状态码。这种错误可以通过判断服务器端返回的状态码分别进行处理

第二种错误就是在网络畅通的时候,服务器端没有接受到请求返回404状态码,这种情况就要去考虑一下检查请求地址是否出错,如果错误改为正确的请求地址即可

第三种错误也是在网络畅通的情况下服务器端能够接收到请求,但是服务器端返回的是500状态码。500状态码代表服务器端错误,也就是说,在服务器端执行代码的过程中出错了。这种错误应交给服务器端开发人员进行处理

第四种错误就是网络中断,请求无法发送到服务器端。这种情况下不会触发xhr对象下面的onload事件,但是会触发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请求')
		}
	}
</script>

再次强调:

Ajax状态值与状态码(http状态码)的区别

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

发布了317 篇原创文章 · 获赞 270 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/qq_44721831/article/details/104410189