美文网首页
XMLHttpRequest实现终止请求和超时

XMLHttpRequest实现终止请求和超时

作者: 破罐子苏 | 来源:发表于2018-03-16 17:42 被阅读0次

    这里是使用的XMLHttpRequest2中的API,口蹄疫通过XMLHttpRequest对象的 abort( )方法 来取消正在进行的HTTP请求,abort( )方法是在XMLHttpRequest和XMLHttpRequest2中都可用的,调用abort( )方法在这个对象上触发abort事件。

    调用abort( )的主要原因是完成像取消或超时请求消耗的是啊进太长或当响应变得无关时的情况 

    例如:使用XMLHttpRequest为文本输入域请求自动完成推荐,如果用户在服务器的建议到达之前输入了新的字符,这时等待请求就不再有用了,所有应该终止

    XMLHttpRequest2中定义了 timeout 属性来指定请求自动终止的毫秒数,也定义了timeout事件用于超时发生时触发,但是到目前位置,浏览器还不支持这些自动超时, 

    但是我们可以使用setTimeout( )和abort( )方法来实现自己的超时

    /*

    发起HTTP GET请求获取指定URL的内容

    如果响应成功到达,则传入responseText给回调函数

    如果响应在timeout时间内没有到达,则中止请求

    浏览器可能会在abort()后出啊发readystatechange

    如果部分请求结果到达,甚至可能设置status属性

    所有需要设置一个标记,当部分且超时的响应到达时不会调用回调函数

    如果使用load(当请求完成时触发)事件就没有这个风险

    /*

    发起HTTP GET请求获取指定URL的内容

    如果响应成功到达,则传入responseText给回调函数

    如果响应在timeout时间内没有到达,则中止请求

    浏览器可能会在abort()后出啊发readystatechange

    如果部分请求结果到达,甚至可能设置status属性

    所有需要设置一个标记,当部分且超时的响应到达时不会调用回调函数

    如果使用load(当请求完成时触发)事件就没有这个风险*/

    function (url,timeout,callback) {

    var request =new XMLHttpRequest();

    var time =false;//是否超时

        var timer =setTimeout(function(){

        timeout =true;

        request.abort(); / /请求中止

     },timeout);

    request.open("GET",url);

    request.onreadystatechange =function(){

    if(request.readyState !==4)continue;//忽略未完成的请求

            if(timeout)return;//忽略中止请求

            clearTimeout(timer);//取消等待的超时

            if(request.status ===200)

    callback(request.responseText);

    }

    request.send(null);

    }

    相关文章

      网友评论

          本文标题:XMLHttpRequest实现终止请求和超时

          本文链接:https://www.haomeiwen.com/subject/iwsrqftx.html