<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
<style type="text/css">
body,#colorup{
font-family:Tahoma,"宋体";
font-size:12px;
}
</style>
<script type="text/javascript" src="./ajax.js"></script>
<script type="text/javascript">
function $(s){
return document.getElementById(s);
}
function jsonDecode(s){
return (new Function("return " + s))();
}
function test1(){
(new Ajax()).get("./process.php?test=1",'',$("view"),"test1正在读取数据……"); // 这里可以传入一个loading的图片地址
}
function test2(){
(new Ajax(function(){
$("view").innerHTML = "test2正在读取数据，请稍候";
},function(s){
$("view").innerHTML = s;
},function(){
$("view").innerHTML = "Sorry,请求超时！";
},5000) ).send("./process.php?test=2",{author:"fyland",mail:"ichenshy@gmail.com",date:"2010-06-03"},"POST");
}
function test3(){
var jx = new Ajax();
jx.before = function(){
$("view").innerHTML = "test3正在读取数据，请稍候";
}
jx.after = function(s){
var r = jsonDecode(s);
for ( var k in r ){
alert(k + ' : ' + r[k]);
}
$("view").innerHTML = "test3数据读取完毕";
}
jx.timeout = function(){
$("view").innerHTML = "Sorry,TEST3请求超时！";
}
jx.time = 5000;
var data = {
author: "fyland",
mail : "ichenshy@gmail.com",
date : "2010-06-03"
};
jx.send("./process.php?test=3",data,"GET");
}
</script>
</head>
<body>
<div id="view"></div>
<div>
<input type="button" onclick="test1();" value=" TEST1 " />
<input type="button" onclick="test2();" value=" TEST2 " />
<input type="button" onclick="test3();" value=" TEST3 " />
</div>
</body>
</html>
/*!
* 一个简单的Ajax类
* author: ichenshy@gmail.com
* date: 2010/06/04 Friday
*
* @param function fnBefore 用户自定义函数 Ajax开始前执行，若无则为null
* @param function fnAfter 用户自定义函数 Ajax完成后执行，若无则为null
* @param function fnTimeout 用户自定义函数 Ajax请求超时后执行，若无则为null
* @param integer iTime 设置超时时间 单位毫秒
* @param boolean bSync 是否为同步请求，默认为false
*/
function Ajax(fnBefore,fnAfter,fnTimeout,iTime,bSync){
this.before = fnBefore;
this.after = fnAfter;
this.timeout = fnTimeout;
this.time = iTime ? iTime : 10000;
this.async = bSync ? false : true;
this._request = null;
this._response = null;
}
Ajax.prototype = {
/**
* 将需要发送的数据进行编码
*
* @param object data JSON格式的数据，如: {username:"fyland",password:"ichenshy"}
*/
formatParam : function( data ){
if ( ! data || typeof data != "object" ) return data;
var k,r = [];
for ( k in data ) {
r.push([k,'=',encodeURIComponent(data[k])].join(''));
}
return r.join('&');
},
/**
* 创建 XMLHttpRequest对象
*/
create : function(){
if( window.XMLHttpRequest ) {
this._request = new XMLHttpRequest();
} else {
try {
this._request = new window.ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {}
}
},
/**
* 发送请求
*
* @param string url 请求地址
* @param object or string data 可以是字符串或JSON格式的数据，如: {username:"fyland",password:"ichenshy"}
* @param string method 请求方式 ： GET or POST
* @param boolean ifCache 返回数据是否在浏览器端缓存，默认为false;
*/
send : function(url,data,method,ifCache){
if ( typeof this.before == "function" ) this.before();
method = method.toUpperCase();
this.create();
var self = this;
var timer = setTimeout(function(){
if ( typeof self.timeout == "function" ) self.timeout();
if ( self._request ) {
self._request.abort();
self._request = null;
}
return true;
},this.time);
var sendBody = this.formatParam(data);
if ( 'GET' == method ) {
url = [url, ( url.indexOf('?') == -1 ? '?' : '&') ,sendBody].join('');
sendBody = null;
}
if ( ! ifCache ) {
url = [url, ( url.indexOf('?') == -1 ? '?' : '&') , "ajaxtimestamp=" , (new Date()).getTime()].join('');
}
this._request.open(method,url,this.async);
if ( "POST" == method ) this._request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
this._request.onreadystatechange = function(){
if( self._request.readyState==4 ){
if ( self._request.status==200 ){
if ( timer ) clearTimeout(timer);
self._response = self._request.responseText;
if ( typeof self.after == "function") self.after(self._response);
}
}
}
this._request.send( sendBody );
},
/**
* 简单的GET请求
*
* @param string url 请求地址
* @param null or string or object data
* @param object html element or string id e
* @param string loading loading时在e中的显示
* @param boolean ifCache 浏览器是否缓存
*/
get : function(url,data,e,loading,ifCache){
if ( typeof e == "string" ) e = document.getElementById(e);
if ( loading ) {
var rg = /\.(gif|jpg|jpeg|png|bmp)$/i;
if ( rg.test(loading) ){
loading = ['<img src="', loading , '" align="absmiddle" />'].join('');
}
this.before = function(){e.innerHTML = loading;}
}
this.after = function(s){e.innerHTML = s;}
this.timeout = function(){e.innerHTML = ' 请求超时! ';}
this.send(url,data,"GET",ifCache ? true : false);
}
};
ajax超时处理重点关注红色部分，包括jquery、Prototype处理都一样，如下例：
request: function(){//AJAX请求
//获得传输数据
var data = this.getData();
//2，ajax请求
var self = this;
var timer = setTimeout(function(){
alert("超时咯");
},5000);
new Ajax.Request(
this.url,{
method :'post',
encoding : 'GBK',
parameters : data,
onLoading : this.onLoading(),
onComplete : function(t){self.callBack(t);},
on404 : this.on404
}
);
}
如果是调用成功，则需要去掉超时，如下：
request: function(){//AJAX请求
//获得传输数据
var data = this.getData();
//2，ajax请求
var self = this;
var timer = setTimeout(function(){
alert("超时啦！！")
},5000);
new Ajax.Request(
this.url,{
method :'post',
encoding : 'GBK',
parameters : data,
onLoading : this.onLoading(),
onComplete : function(t){
if( t.readyState==4 ){
if ( t.status==200 ){
if ( timer ) clearTimeout(timer);
}
}
self.callBack(t);},
on404 : this.on404
}
);
}
分享到：
相关推荐
Ajax请求session超时处理流程 java服务器端处理： SessionValidateFilter中修改： if (ServerInfo.isAjax(request)) { request.setAttribute("statusCode", 301); request.setAttribute("message", "Session ...
jQuery作为一个广泛使用的JavaScript库，简化了从客户端到服务器的数据交互，而Ajax超时的设置则是保证请求响应时效性的重要手段。当客户端向服务器发送Ajax请求时，如果服务器没有在合理的时间内响应，就会造成用户...
在jQuery中可以通过$.ajax方法设置请求超时处理，这样如果用户在设定时间内未能完成点击操作，可以给出相应的提示，或者返回到一个安全的状态。 jQuery的$.ajax方法是一种在页面中执行异步HTTP（Ajax）请求的方法。...
NULL 博文链接：https://ait.iteye.com/blog/1867548
因此，我们需要编写超时检查脚本来确保Ajax请求在预定时间内得到响应，否则将执行相应的错误处理。 以下是一个用于检查Ajax请求是否超时的脚本代码分析： 1. 首先，创建一个名为Ajax的构造函数，用于初始化...
在Web开发中，Session超时处理是一个常见的需求，特别是在用户长时间无操作或系统设定的特定时间后，为了保护用户的数据安全，系统会自动结束用户的会话。对于传统的HTTP请求，服务器端可以通过重定向来提示用户重新...
总结来说，解决Ajax请求在数据量大的时候出现超时问题，关键在于平衡服务器处理能力、优化数据传输方式以及提升客户端的处理效率。同时，应结合具体应用场景选择合适的策略，以实现最佳的用户体验。在实际开发中，...
总结AJAX响应信息的处理涉及请求状态的检查、响应数据的解析和应用，以及错误处理和用户体验优化。理解这些概念并能有效地处理响应信息，对于构建交互性强、响应速度快的Web应用至关重要。通过示例代码，我们可以...
本文将详细介绍如何使用全局方法来处理AJAX提交时的Session超时，并跳转到特定页面。 首先，我们可以在服务器端设置一个过滤器（Filter）来检测Session的状态。在Java Web开发中，过滤器可以拦截每个HTTP请求，包括...
3.在ERROR回调函数中写 有关于 超时 处理 的函数:例如，可以在超时的情况下再次调用取数据函数。 ——————————————————- ——————————————————- 这个ajax 里有个success的函数
AJAX请求应包含适当的错误回调函数，以处理可能出现的网络中断、超时或服务器错误。 7. **进度反馈**：对于需要较长时间的处理任务，提供进度条或百分比完成度反馈能提升用户体验，这可以通过在AJAX请求中设置事件...
本文将详细讨论如何使用jQuery实现一个AJAX加载超时提示的方法。 首先，我们需要引入jQuery库。在HTML文档的`<head>`部分，通过`<script>`标签引入jQuery的CDN链接，如以下代码所示： ```html ...
11. **jQuery AJAX设置**：可以通过全局设置或者在每次调用中指定，来调整AJAX的行为，如超时、缓存控制、数据类型等。 综上所述，AJAX开发结合jQuery库，能高效地实现在不刷新页面的情况下进行数据交互，提高网页...
在开发Web应用时，我们经常会遇到 AJAX（Asynchronous JavaScript and XML）请求的超时问题。在某些情况下，长时间运行的后台任务可能导致用户等待过久，这时设置适当的超时时间是必要的，以避免用户界面无响应或者...
- 超时处理：设置请求超时时间，超时后自动取消请求或提示用户。 - 请求缓存：对于不经常变化的数据，可以启用缓存机制，减少不必要的服务器请求。 综上所述，`ajax.js`作为一个超轻量级的Ajax库，提供了一种简单...
在实际应用中，Ajax池通常是一个JavaScript对象或模块，它维护了一个队列，用于存储待处理的Ajax请求。当一个请求被创建时，它会被添加到队列中。然后，池会按照预设的并发限制（比如，最多同时发送5个请求）来执行...