利用setTimeoutc处理javascript ajax请求超时

用过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");
}
时间: 2024-11-03 16:16:21

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

【php】利用原生态的JavaScript Ajax为php进行MVC分层设计,兼容IE6

MVC只是一种设计模式而已,一度被认为Model 1,也就是服务器语句与HTML语句杂糅的php,其实不用任何框架,仅仅利用原生态的JavaScript Ajax也可以对其进行MVC设计.由于什么都没有用,因此对IE6的兼容性是非常强的.还是<[php]数据库的增删改查和php与javascript之间的交互>(点击打开链接)那个页面的,对数据库增删改查的内容,希望各位能推广到整个网站. 一.基本目标 整个网页实现效果如下,用户输入完表单马上就有效果. 二.基本思想 首先,在test数据库中有

javascript ajax请求(一般处理程序)

<script type="text/javascript"> var xmlHttp = null; function create() { //创建ajax技术核心对象XmlHttpRequest if (window.ActiveXObject) xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); else xmlHttp = new XMLHttpRequest(); } function sum(

ajax 请求超时 取消请求

var ajaxTimeoutTest = $.ajax({ url:'',  //请求的URL timeout : 1000, //超时时间设置,单位毫秒 type : 'get',  //请求方式,get或post data :{},  //请求所传参数,json格式 dataType:'json',//返回的数据格式 success:function(data){ //请求成功的回调函数 alert("成功"); }, complete : function(XMLHttpReq

javascript ajax请求

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> </head> <body> <input id=&qu

Javascript Ajax 请求

var XMLHttpReq; function createXMLHttpRequest() { try { XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");//IE高版本创建XMLHTTP } catch(E) { try { XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");//IE低版本创建XMLHTTP } catch(E) { XMLHttpReq =

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

最近要做一个来电的弹屏功能,利用OM 系统的接口,OM系统发送请求到接口程序,分析数据添加到mysql数据库中,然后把最新的数据id 跟今日来电的总的数量存储到memcache 中.弹屏程序根据读取的memcache 中的数据  比对,比较是不是有新的请求到来.中间遇到问题是:前台在轮询等待数据的时候,页面中的其他请求被阻塞,查了好多资料,包括 apache 的mpm 模式,都没有找到原因.后来 在论坛里边查到原因:如下 实际上是不能并发访问同一个站点使用了session的页面,因为访问A页面时

利用CSS、JavaScript及Ajax实现图片预加载的三大方法

原文:3 Ways to Preload Images with CSS, JavaScript, or Ajax 译文:利用CSS.JavaScript及Ajax实现图片预加载的三大方法 预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性.

javascript中Ajax请求的封装代码

/****************************ajax请求 start**************************************/ function ajaxClass(_url, _successCallback, _failureCallback, _urlParameters, _callbackParams, _async, _charset, _timeout, _frequency, _requestTimes, _frame) { /** * AJAX

javaScript(拼写树形)+ajax请求,去后台查找数据

第一步:页面加载完成时,利用jquery中的一函数,调用js方法,js方法,发送ajax请求,去后台查找父类权限集合,响应回来json格式的数据,对数据进行操作,往页面上添加内容 1 //页面初始化加载菜单内容 2 $(document).ready(function(){ 3 loadPower(0); 4 }); 5 6 //加载一级权限菜单 7 function loadPower(pId){ 8 $.ax({ 9 type: "get", 10 url: "<%