使用jQuery检测当前网络是否异常等

当页面发起ajax请求,发生异常时捕获。如页面正在进行一个ajax轮询,在这过程中发生异常,这时就能给用户一个友好提示。或当用户把一个页面放着一段时间不操作,而用户的网络已经发生异常时再进行操作,此时也给用户一个提示。



首先要引入jQuery,然后ajax全局设置,捕获错误。如下:

$.ajaxSetup({
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        var state = XMLHttpRequest.readyState;
        if (state == 4) { //(完成)响应内容解析完成,可以在客户端调用了。时报错。
            alert('HTTP错误,访问当前域的页面不存在400,程序内部错误500等');
    
        }
        else if (state == 0) {//(未初始化)还没有调用send()方法。时报错。
            alert('网络错误!如断网,跨域问题或连接被拒绝。');
        }
        else {            
            alert('其它错误!');
        }
    
    }
});


如:点击按钮时判断当前网络是否异常

先调用一个$.get的方法,可调用当前网站上一个小图片或者空白页之类的,这样几乎不影响加载速度。这样做是为了发起一个ajax请求,从而能在ajaxSetup中捕获到交互的状态。


比如页面放着未刷新,此时用户已经出现网络异常,当点击一个id为btn的元素,这时就会弹出一个ajaxSetup中设置的提示。正常时则会弹“正常”。

$("#btn").click(function () {
    $.get('/Images/loading.gif', function () {//loading.gif为当前网站上的一个小图片
            alert('正常');
            //执行其它代码……
    });
    
});



用setInterval配合就能时时检测到网络状态了。比如:

var t = setInterval(function(){
    $.get('/Images/loading.gif', function () {//loading.gif为当前网站上的一个小图片
         
    });
},3000);



可用断网的方式进行部分测试。

类别:前端脚本   阅读(0)   评论(0)    发表时间:2018-11-13 21:39  星期二

评论区

发表评论

        姓名:
邮箱|网站:
        内容:

  (可按Ctrl+Enter提交)