日期:2014-05-16  浏览次数:20671 次

使用Ajax与后台Servlet异步通信
function createXmlHttpRequest(){
	var oXmlHttp;
	if(window.XMLHttpRequest){
		//非IE浏览器
		oXmlHttp = new XMLHttpRequest();
		if(oXmlHttp.overrideMimeType){
			//针对于FireFox浏览器,传参数出现的问题,设置MimeType
			oXmlHttp.overrideMimeType('text/xml');
		}
		
		return oXmlHttp;
	}
	else if(window.ActiveXObject){
		var aVersions = ["MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0",
		"MSXML2.XMLHttp.3.0","MSXML2.XMLHttp","Microsoft.XMLHttp"];
		
		for(var i in aVersions){
			try{
				oXmlHttp = new ActiveXObject(aVersions[i]);
				return oXmlHttp;
			}
			catch(oError){
			}
		}
	}
	return null;
}

/*
 * Function:向服务器发出异步请求
 * @param:url 服务器地址(包括用post方法提交的参数)
 * @param:param 向服务器提交的内容
 * 当header值为null时,设置了application/x-www-form-urlencoded后,
 * 可以通过Form进行Post提交,在后台用getParameter方法接收参数
 * 当header值不为null时,采用字符流传递参数,使用getReader方法获得参数,
 * 此方式扩展后可以用来文件上传,使用getInputStream方法获得文件流
 */
function SendHttpAync(url, param, callbackfunc, header){

	if (navigator.onLine == false){
		return "Off Line!"
	}
	
	var xmlhttp = createXmlHttpRequest();

	if(callbackfunc != null ){
		
		//异步调用,open方法的第三个参数为true
		xmlhttp.open("post", url, true);
		
		if(callbackfunc instanceof AjaxCallBackModule){
			
			xmlhttp.onreadystatechange = function(){
				callbackfunc.firstEvent(xmlhttp);
			};
		}
		else{
			
			xmlhttp.onreadystatechange = function(){
				callbackfunc(xmlhttp);
			};
		}
	}

	if(header == null){
		// 设置了application/x-www-form-urlencoded后,可以通过form进行post提交,
		// 在后台使用getParameter方法获得参数,否则需要使用getReader方法获得参数
		// 可以扩展后进行文件上传,使用getInputStream方法获得文件流
		xmlhttp.setRequestHeader("Content-Type",
                                "application/x-www-form-urlencoded");
	}
	
	try{
		//向服务器发送数据
		xmlhttp.send(param);
	}
	catch (exception){
		alert(xmlhttp.parseError.reason);
	}
}

/*
 * Function:异步调用返回函数
 * @param:sfunc 返回成功函数
 * @param:ffunc 返回失败函数
 */
function AjaxCallBackModule(sfunc,ffunc){

	if(sfunc != null){
		//存在成功函数
		this.onSuccess = sfunc;
	}
	else{
		//不存在成功函数,自定义一个成功函数(仅打印一个字符串,以示展示)
		this.onSuccess = function(xmlhttp){
			alert("Request Successful. Result:[" + xmlhttp.responseText + "]");
		};
	}
	
	if(ffunc != null){
		//存在失败函数
		this.onFail = ffunc;
	}
	else{
		//不存在失败函数,自定义一个失败函数(仅打印一个字符串,以示展示)
		this.onFail = function(xmlhttp){
			alert("Request Failed.");
		};
	}
	
	
	this.firstEvent = function(xmlhttp){
		if(xmlhttp.readyState == 4){
			if(xmlhttp.status == 200){
				alert("default success function");
				setTimeout(this.onSuccess,5000)
				//this.onSuccess(xmlhttp);
			}
			else{
				alert("default failed function");
				this.onFail(xmlhttp);
			}
		}
	};
}

function SendAyncByCallBackModule(){
	var param = "{\"hreflist\":[{\"maxpage\":7,\"pageid\":1}]}";
	var myData = JSON.parse(param);
	
	//另一种解析JSON的方法
	//var myData = eval("("+param+")");
	
	var url = "http://" + location.host + "/ajaxapp/initAction.do?pageid=1";
	
	
	//创建CallBack函数
	var module = new AjaxCallBackModule(moduleSuccess,moduleFailed);
	
	//异步调用,用模板方法返回
	SendHttpAync(url, JSON.stringify(myData), module, "");

}

function SendAyncByCallBackCustomed(){
	var param = "{\"hreflist\":[{\"maxpage\":7,\"pageid\":1}]}";
	var myData = JSON.parse(param);
	
	//另一种解析JSON的方法
	//var myData = eval("("+param+")");
	
	var url = "http://" + location.host + "/ajaxapp/initAction.do?pageid=1";

	//异步调用,用自定义方法返回
	SendHttpAync(url, JSON.stringify(myData), myfunc, "");

}

// 自定义CallBack函数
var myfunc = function(xmlhttp){
	if(xmlhttp.readyState == 4){
		if(xmlhttp.status == 200){
			alert("自定义成功方法");
		}
		else{
			alert("自定义失败方法");
		}
	}
}

function moduleSuccess(){
	alert("模板成功方法");
}

function moduleFailed(){
	alert("模板失败方法");
}

?