用过jquery的人都知道里面的$.ajax能设置超时处理及各种错误的抛出,确实好用。原生的js没有对应的方法,还得写各种兼容。在实际运用中,不管请求是否成功都应该做容错处理,

不然用户不知道到底发生了什么,体验非常不好。超时就是一种情况,不可能请求失败了还让用户在那傻傻等待,是谁都受不了。下面就介绍一下用setTimeout来实现请求的超时处理。

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;
} function ajax(xmlhttp,_method, _url, _param, _callback) {
if (typeof xmlhttp == 'undefined') return;
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
_callback(xmlhttp);
}
}
xmlhttp.open(_method, _url, true);
if (_method == "POST") {
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-Length", _param.length);
xmlhttp.send(_param);
}
else {
xmlhttp.send(null);
}
}
//使用举例

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://10.1.2.187/adduser.cgi","act=do&user=abc",adduserok);
t1 = setTimeout(connecttoFail,30000);
}
else {
alert ("Init xmlhttprequest fail");
}

利用setTimeoutc处理javascript ajax请求超时的更多相关文章

  1. ajax请求超时判断(转载)

    ajax请求时有个参数可以借鉴一下 var ajaxTimeOut = $.ajax({ url:'', //请求的URL timeout : 1000, //超时时间设置,单位毫秒 type : ' ...

  2. ajax请求超时解决方案

    设置timeout的时间,通过检测complete时status的值判断请求是否超时,如果超时执行响应的操作. var ajaxTimeoutTest=$.ajax({ url:'',//请求地址 t ...

  3. ajax请求超时时间

    http://www.cnblogs.com/charling/p/3356216.html get post 请求 http://www.cnblogs.com/oneword/archive/20 ...

  4. javascript ajax请求

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. Javascript Ajax 请求

    var XMLHttpReq; function createXMLHttpRequest() { try { XMLHttpReq = new ActiveXObject("Msxml2. ...

  6. spring security:ajax请求的session超时处理

    当前端在用ajax请求时,如果没有设置session超时时间并且做跳转到登录界面的处理,那么只是靠后台是很难完成超时的一系列动作的:但是如果后台 没有封装一个ajax请求公共类,那么在ajax请求上下 ...

  7. ajax请求web容器控制超时

    1.项目用到超时控制,针对ajax请求超时,可以参照如下解决方案 tomcat容器 web.xml 中配置 <session-config> <session-timeout> ...

  8. 学习AJAX必知必会(3)~自动重启工具nodemon、缓存问题、请求超时和网络异常、取消重复请求

    1.nodemon 自动重启工具(自动重启基于nodejs开发的服务端应用) ■ nodemon 是一个工具,通过在检测到目录中的文件更改时自动重新启动node应用程序来帮助开发node.js. // ...

  9. Ajax实现的长轮询不阻塞同一时间内页面的其他Ajax请求(同域请求)

    最近要做一个来电的弹屏功能,利用OM 系统的接口,OM系统发送请求到接口程序,分析数据添加到mysql数据库中,然后把最新的数据id 跟今日来电的总的数量存储到memcache 中.弹屏程序根据读取的 ...

随机推荐

  1. P3994 高速公路

    题目链接 题意分析 这是一道树上斜率优化题 首先 \[dp[i]=min\{dp[j]+(dis[i]-dis[j])* p[i]+q[i]\}(j∈Pre_i)\] 那么就是 \[p[i]=\fra ...

  2. css第一篇:元素选择器

    1:多个选择器 h1, h2 {}       ——h1或h2标签的所有元素 2:通配选择器 * {}     ——所有元素 3:元素选择器 div {}   ——所有div元素 4:类选择器 .te ...

  3. tomcat在bin下的startup.bat下启动报错

    测试环境是否安装配置好. 如果环境配置好.报错如下:或者是730013 -----------解决问题:是因为tomcat端口被占用.查看是否启动两个tomcat

  4. idea没有tomcat选项在setting也没有Application Servers

    原因:dea未正常关闭,重启后发现,Tomcat的选项不见了,File->Setting->Build,Excution,Deployment里面Application Servers也不 ...

  5. ffmpeg intro - pull and push

    ffmpeg -i rtmp://rtmp.test.com/live/livestream -c:v copy -c:a copy -f flv rtmp://172.31.11.53/myhls/ ...

  6. day1-Python擅长的领域+学习内容

    Python擅长的领域 WEB开发 Django   Pyramid     Tornado       Bottle    Flask    WebPy 网络编程 Twisted        Re ...

  7. C++下混合编译c语言方法总结

    最近在读SGI STL源码,感觉对C++的学习很有帮助,之前对于泛型.iterator.traits等等各种特性的概念非常模糊,通过这两天的琢磨,再加上<STL 源码剖析>的帮助,对C++ ...

  8. 带有Apache Spark的Lambda架构

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 目标 市场上的许多玩家已经建立了成功的MapReduce工作流程来每天处理以TB计的历史数据.但是谁愿意等待24小时才能获得最新的分析结果? ...

  9. Struts2入门介绍(二)

    一.Struts执行过程的分析. 当我们在浏览器中输入了网址http://127.0.0.1:8080/Struts2_01/hello.action的时候,Struts2做了如下过程: 1.Stru ...

  10. Android OpenGL教程-第三课【转】

    第三课 给多边形上色: 作为第二课的扩展,我将叫你如何使用颜色.你将理解两种着色模式,在左图中,三角形用的是光滑着色,四边形用的是平面着色. 这次增加的代码不算多. 增加一个color的buffer ...