AJAX超时处置-AJAX教程-爱易网页

AJAX超时处置

日期：2014-05-16　浏览次数：20586 次

AJAX超时处理

<!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('');

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

AJAX超时处置

相关资料更多>

推荐阅读更多>