重新请求 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			  #result {
				  width: 300px;
				  height: 100px;
				  border: 1px solid red;
			  }
		</style>
	</head>
	<body>
		<button>点击，显示内容</button>
		<div id="result">
			
		</div>
	</body>
	<script>
	//当网络存在延迟/异常的特殊处理
		const btm = document.getElementsByTagName('button')[0];
		const result = document.getElementById('result');
		btm.addEventListener('click',function(){
			const xhr = new XMLHttpRequest();
			xhr.open('GET','http://127.0.0.1:8000/delly');
			//超时设置为两秒
			xhr.timeout = 2000;
			//超时回调
			xhr.ontimeout = function(){
				alert('网络异常')
			}
			//网络异常断网
			xhr.onerror= function(){
				alert('网络断开');
			}
			
			
			
			xhr.send();
			xhr.onreadystatechange = function(){
				if(xhr.readyState === 4){
					if(xhr.status >= 200 && xhr.status < 300){
						result.innerHTML = xhr.response;
					}
				}
			}
		})
	</script>
</html>

　　

 

posted on 2023-02-08 23:51  爱前端的小魏  阅读(18)  评论(0)  编辑  收藏  举报

导航