给XMLHttpRequest设置超时时间

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

 

1. function createXMLHttpRequest() {
2.     var request = false;
3.     if(window.XMLHttpRequest) {
4.         request = new XMLHttpRequest();
5.         if(request.overrideMimeType) {
6.             request.overrideMimeType('text/xml');
7.         }
8.     } else if(window.ActiveXObject) {
9.         var versions = ['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Microsoft.XMLHTTP',
11. 'Msxml2.XMLHTTP.7.0', 'Msxml2.XMLHTTP.6.0', 'Msxml2.XMLHTTP.5.0',
13. 'Msxml2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
14.         for(var i=0; i<versions.length; i++) {
15.             try {
16.                 request = new ActiveXObject(versions[i]);
17.                 if(request) {
18.                     return request;
19.                 }
20.             } catch(e) {}
21.         }
22.     }
23.     return request;
24. }
26. function ajax(xmlhttp,_method, _url, _param, _callback) {
27.     if (typeof xmlhttp == 'undefined') return;
28.     xmlhttp.onreadystatechange = function() {
29.         if (xmlhttp.readyState==4 && xmlhttp.status==200) {
30.             _callback(xmlhttp);
31.         }
32.     }
33.     xmlhttp.open(_method, _url, true);
34.     if (_method == "POST") {
35.         xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
36.         xmlhttp.setRequestHeader("Content-Length", _param.length);
37.         xmlhttp.send(_param);
38.     }
39.     else {
40.         xmlhttp.send(null);
41.     }
42. }
45. //使用举例
47. var xmlhttp = createXMLHttpRequest();
48. var t1; //用来作超时处理
51. function adduserok(request) {
52.     alert(request.responseText);
53.     if (t1) clearTimeout(t1);
54. }
56. function connecttoFail() {
57.     if (xmlhttp) xmlhttp.abort();
58.     alert ('Time out');
59. }
61. if (xmlhttp) {
62.     ajax(xmlhttp,"POST", "http://10.1.2.187/adduser.cgi","act=do&user=abc",adduserok);
63.     t1 = setTimeout(connecttoFail,30000);
64. }
65. else {
66.     alert ("Init xmlhttprequest fail");
67. }

最后说明一点，手动处理Ajax功能，比较适合刚开始接触Ajax时用来学习Ajax的原理。要是想在项目中应用Ajax功能，还是选一个框架使用比较方便，在这里推荐一下jquery或AjaxPro ，都比较常用。