Javascript （Ajax）给XMLHttpRequest设置超时时间

最新推荐文章于 2024-09-04 19:43:42 发布

KylinBL

最新推荐文章于 2024-09-04 19:43:42 发布

阅读量8.5k

点赞数 1

分类专栏： ajax 文章标签： xmlhttprequest ajax javascript function callback jquery

ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在Web开发中，经常要用到Ajax技术，有时因为功能很简单，不想利用现成的框架，就只是想利用XMLHttpRequest来手动处理Ajax功能，这时，会遇到一个很现实的问题，就是Ajax请求的超时问题。如果我们利用Jquery这样的框架，是可以直接设定超时时间的，但是XMLHttpRequest对象并没有设置超时的属性，怎么办呢？总不能让页面一直请求吧？@_@
下面是一种解决方法，就是利用setTimeout和clearTimeout方法，思路如下：在调用XMLHttpRequest的send方法后，调用setTimeout方法，设置超时时间值。在调用成功的方法内，调用clearTimeout()方法清除超时设置。

Code
function createXMLHttpRequest() {
    var request = false;
    if(window.XMLHttpRequest) {
        request = new XMLHttpRequest();
        if(request.overrideMimeType) {
            request.overrideMimeType('text/xml');
        }
    } else if(window.ActiveXObject) {
        var versions = ['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Microsoft.XMLHTTP',

'Msxml2.XMLHTTP.7.0', 'Msxml2.XMLHTTP.6.0', 'Msxml2.XMLHTTP.5.0',

'Msxml2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
        for(var i=0; i<versions.length; i++) {
            try {
                request = new ActiveXObject(versions[i]);
                if(request) {
                    return request;
                }
            } catch(e) {}
        }
    }
    return request;
}

//使用举例

var xmlhttp = createXMLHttpRequest();
var t1; //用来作超时处理

function adduserok(request) {
alert(request.responseText);
if (t1) clearTimeout(t1);
}

function connecttoFail() {
if (xmlhttp) xmlhttp.abort();
alert ('Time out');
}

if (xmlhttp) {
    ajax(xmlhttp,"POST", "http://www.loxiu.com/adduser.cgi","act=do&user=abc",adduserok);
    t1 = setTimeout(connecttoFail,30000);
}
else {
    alert ("Init xmlhttprequest fail");
}
最后说明一点，手动处理Ajax功能，比较适合刚开始接触Ajax时用来学习Ajax的原理。要是想在项目中应用Ajax功能，还是选一个框架使用比较方便，在这里推荐一下jquery，真的很好用哟！@_@