<!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>
标签：function,status,const,请求,网络,xhr,result,重新 From： https://blog.51cto.com/u_15722979/6148294