超时与网络异常

最新推荐文章于 2021-09-04 14:59:45 发布

Урааа

最新推荐文章于 2021-09-04 14:59:45 发布

阅读量225

点赞数

本文链接：https://blog.csdn.net/weixin_44462482/article/details/109297903

版权

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>超时与网络异常</title>
   <style type="text/css">
    #result{
    width: 200px;
    height: 200px;
    border: #800080 solid 1px;
   }
   </style>
 </head>
 <body>
  
  <button type="button" id="btn">点我</button>
  <div id="result"></div>
  
  
  
  <script type="text/javascript">
   var result = document.getElementById('result');
   var btn = document.getElementsByTagName('button')[0];
   
   btn.addEventListener('click',function(){
    var xhr = new XMLHttpRequest();
    
    //超时设置 2s设置
    xhr.timeout = 2000;
    //超时回调函数
    xhr.ontimeout = function(){
     alert('请求超时');
    };
    //网络异常回调
     xhr.onerror = function(){
     alert('网络异常')
    };
     
    xhr.open('GET','http://127.0.0.1:3000/delay');
    
    xhr.send();
    
    xhr.onreadystatechange = function(){
     if(xhr.readyState === 4){
      if(xhr.status >= 200 && xhr.status < 300){
       result.innerHTML = xhr.response;
      }
     }
    };
    
   });
   
   
  </script>
 </body>
</html>

优惠劵

Урааа

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
超时与网络异常

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>超时与网络异常</title> <style type="text/css"> #result{ width: 200px; height: 200px; border: #800080 solid 1px; } </style> &
复制链接

扫一扫