原生ajax发送请求超时网络提醒

最新推荐文章于 2023-07-14 09:57:19 发布

我是一个小码农2

最新推荐文章于 2023-07-14 09:57:19 发布

阅读量297

点赞数

分类专栏： ajax 前端

本文链接：https://blog.csdn.net/Pengchao94/article/details/115340012

版权

前端同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

ajax

4 篇文章 0 订阅

订阅专栏

这个示例展示了如何使用JavaScript的XMLHttpRequest对象进行AJAX GET请求，并设置了超时和错误处理函数。当点击按钮时，它会尝试从'http://127.0.0.1:8000/delay'获取数据，如果请求超时或出现网络异常，将显示相应的警告信息。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>AJAX GET 请求</title>
	</head>
	<style type="text/css">
		#result {
			width: 200px;
			height: 100px;
			border: solid 1px pink;
		}
	</style>
	<body>
		<button type="button">点我发送</button>
		<div id="result"></div>
		<script type="text/javascript">
			const btn = document.getElementsByTagName('button')[0];
			const result = document.getElementById('result');

			btn.addEventListener('click', function() {
				const xhr = new XMLHttpRequest();
				// 加一个 2s 的设置
				xhr.timeout = 2000;
				
				// 超时回调
				xhr.ontimeout = function(){
					alert('网络异常 请稍后重试！！');
				}
				
				// 网络异常提醒
				xhr.onerror = function(){
					alert('您的网络似乎出了一点问题！！');
				}
				xhr.open('GET', 'http://127.0.0.1:8000/delay');
				xhr.send();
				xhr.onreadystatechange = function() {
					if (xhr.readyState === 4) {
						if (xhr.status >= 200 && xhr.status < 300) {
							result.innerHTML = xhr.response;
						}
					}
				}
			})
		</script>
	</body>
</html>