JavaScript实践——AJAX封装工具

写了一个javascript程序，把ajax封装了在一个js文件中，供大家参考，请多多指教。

先声明几个变量：

var AJAXUtil = new Object();//工具对象
var xmlHttpRequest;//XMLHttpRequest对象
var sateChangeMethod; //方法变量

 创建xmlHttpRequest对象：

AJAXUtil.createXMLHttpRequest = function(){
	try {
		xmlHttpRequest = new XMLHttpRequest();
	}
	catch (trymicrosoft) {
		try {
			xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (othermicrosoft) {
			try {
				xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (failed) {
				xmlHttpRequest = false;
			}
		}
	}
}

 执行Get/Post的请求中传入的方法：

/*执行Get/Post的请求中传入的方法*/
AJAXUtil.handleStateChange = function(){
	if(xmlHttpRequest.readyState == 4){
		if(xmlHttpRequest.status == 200){
			//这里加上(),执行sateChangeMethod方法，这种方式叫做自调用
			//参考,http://xiayuanfeng.iteye.com/blog/304565
			sateChangeMethod();
		}
	}
}

 Get请求方式：

/* Get请求方式stateChange传入的业务方法，url地址，isAsynch是否异步*/
AJAXUtil.doRequstUsingGet = function(stateChange,url,isAsynch){
	sateChangeMethod = stateChange;
	AJAXUtil.createXMLHttpRequest();
	xmlHttpRequest.onreadystatechange = AJAXUtil.handleStateChange;
	xmlHttpRequest.open("GET",url,isAsynch);
	xmlHttpRequest.send(null);
}

 Post请求方式：

/* Post请求方式stateChange传入的业务方法，url地址，isAsynch是否异步，queryString参数串*/
AJAXUtil.doRequstUsingPost = function(stateChange,url,isAsynch,queryString){
	sateChangeMethod = stateChange;
	AJAXUtil.createXMLHttpRequest();
	xmlHttpRequest.onreadystatechange = AJAXUtil.handleStateChange;
	xmlHttpRequest.open("POST",url,isAsynch);
	xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded;")
	xmlHttpRequest.send(queryString);
}

 测试代码：

String validateAction = contextPath + "/RF/ExchangePointValidate.html";

 

function $(id){
		return document.getElementById(id);
	}
	
	function keyupCheck(obj){
		obj.value = obj.value.replace(/[^\d.]/g,'');
		$("RFInput").value = obj.value*<%=rate%>;
		$("validateMessage").innerHTML = "";
		var url = "<%=validateAction%>?uid="+<%=id%>;
		AJAXUtil.doRequstUsingGet(stateChange,url,true);
	}
	
	function stateChange(){
		var xmlDoc = xmlHttpRequest.responseXML;
		var info = xmlDoc.getElementsByTagName('message');
		var leftMoney = info[0].firstChild.data;
		if(parseFloat(leftMoney) < parseFloat($("exchange").value)){
			$("validateMessage").innerHTML = "<font color='red'>兑换的金额大于账户余额！</font>";
			$("exchange").value="";
			$("RFInput").value="";
			$("exchange").focus();
			comFlag = false;
		}
	}

 

<font color="#ffcc00">&nbsp;<input id="exchange" type="text" style="width:80px" onkeyup="keyupCheck(this);" />&nbsp;元</font>

 

 

 

 

评论

3 楼 hrsvici412 2009-02-22  

zhoujj303030 写道

这两天刚刚开始学习JS，想请教一下lz：“xmlHttpRequest.send(null)"是干什么用的啊？我看了很多js源码里面都有这句话!

send是发送http请求，有两中http请求方式，get和post。get请求的参数放在url上面，post请求通过send("参数")传递、你可以搜索这两者的区别。

2 楼 zhoujj303030 2009-02-22  

这两天刚刚开始学习JS，想请教一下lz：“xmlHttpRequest.send(null)"是干什么用的啊？我看了很多js源码里面都有这句话!

1 楼 hrsvici412 2009-02-20  

一开始在ie6上不行，XMLHttpRequest对象不能创建！