学步园

AJAX异步传输(采用非匿名函数)　：

 
		//创建xmlhttpRequest对象 
	    var xmlHttp;
	    //有了这个对象就可以和引擎打交道,发送相关的参数.
		function createXMLHttpRequest() {
			//表示当前浏览器不是ie,如ns,firefox
			if(window.XMLHttpRequest) {
				xmlHttp = new XMLHttpRequest();
			} else if (window.ActiveXObject) {
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
		 }
		 
		 
		 //完成检查,动态的检查用户代码是否已经存在.
		 function validate(field)
		 {
		 	//alert(document.getElementById("userId").value);
		 	//alert(field.value);
		 	//如果用户中取得了用户代码的数据,且不为空.
		 	if(trim(field.value).length != 0)
		 	{
		 		//创建Ajax核心对象.
		 		createXMLHttpRequest();
		 		//三个参数,第一个是提交方式get或post,url
		 		//防止缓存.
		 		var url = "user_validate.jsp?userId=" + trim(field.value) + "×=" + new Date().getTime();
		 		//设置请求方式为get,设置请求的url,设置为异步提交true
		 		xmlHttp.open("GET",url,true);
		 		
		 		//将方法地址复制给onreadystatechange属性.
		 		//类似于电话号码.
		 		xmlHttp.onreadystatechange=callback;
		 		
		 		//get请求参数为null. 将设置信息发送到Ajax引擎.(像手机短信一样,同时给他一个url(电话号码),打着这个座机,说明这件事完成了)
		 		xmlHttp.send(null);
		 				 		
		 		 		 		
		 	}
		 	else
		 	{
		 		//开始就清除我们的显示标记.
		 		document.getElementById("spanUserId").innerHTML = "";
		 	}
		 }
		 
		 function callback()
		 {
		 	//Ajax的引擎发生改变.
		 	//alert(xmlHttp.readyState);
		 	
		 	//查看引擎的状态.Ajax引擎状态为成功.
		 	if(xmlHttp.readyState == 4){
		 	    //无论是请求成功还是不成功,为4是有响应,200是成功,其他的状态都表示失败.
		 	    //http协议状态为成功.
		 		if(xmlHttp.status ==200)
		 		{
		 			//判断返回的东西. 如果不为空的话,显示span的提示用户存在的标签.
		 			if(trim(xmlHttp.responseText) !="")
		 			{
		 				//alert(xmlHttp.responseText);
		 			//设置提示的标签内容.
		 			document.getElementById("spanUserId").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>";
		 			}
		 			else
		 			{
		 				//如果为空.清除span标签.
		 				document.getElementById("spanUserId").innerHTML = "";
		 			}
		 			
		 		}else
		 		{
		 			//错误代码,例如404没有找到页面.
		 			alert("请求失败,错误码" + xmlHttp.status);
		 		}
		 	}
		 	
		 }

AJAX异步传输(采用匿名函数)：

 //完成检查,动态的检查用户代码是否已经存在.
		 function validate(field)
		 {
		 	
			
			
		 	//alert(document.getElementById("userId").value);
		 	//alert(field.value);
		 	//如果用户中取得了用户代码的数据,且不为空.
		 	if(trim(field.value).length != 0)
		 	{
			 		var xmlHttp=null;
			 	//表示当前浏览器不是ie,如ns,firefox
				if(window.XMLHttpRequest) {
					xmlHttp = new XMLHttpRequest();
				} else if (window.ActiveXObject) {
					xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
		 		
		 		
		 		
		 		//三个参数,第一个是提交方式get或post,url
		 		//防止缓存.
		 		var url = "user_validate.jsp?userId=" + trim(field.value) + "×=" + new Date().getTime();
		 		//设置请求方式为get,设置请求的url,设置为异步提交true
		 		xmlHttp.open("GET",url,true);
		 		
		 		//将方法地址复制给onreadystatechange属性.
		 		//类似于电话号码.
		 		//xmlHttp.onreadystatechange=callback;
		 		//采用匿名函数的方式.
		 		xmlHttp.onreadystatechange=function()
		 		{
		 			//Ajax的引擎发生改变.
		 	//alert(xmlHttp.readyState);
		 	
		 	//查看引擎的状态.Ajax引擎状态为成功.
		 	if(xmlHttp.readyState == 4){
		 	    //无论是请求成功还是不成功,为4是有响应,200是成功,其他的状态都表示失败.
		 	    //http协议状态为成功.
		 		if(xmlHttp.status ==200)
		 		{
		 			//判断返回的东西. 如果不为空的话,显示span的提示用户存在的标签.
		 			if(trim(xmlHttp.responseText) !="")
		 			{
		 				//alert(xmlHttp.responseText);
		 			//设置提示的标签内容.
		 			document.getElementById("spanUserId").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>";
		 			}
		 			else
		 			{
		 				//如果为空.清除span标签.
		 				document.getElementById("spanUserId").innerHTML = "";
		 			}
		 			
		 		}else
		 		{
		 			//错误代码,例如404没有找到页面.
		 			alert("请求失败,错误码" + xmlHttp.status);
		 		}
		 	}
		 	
		 		}
		 		
		 		
		 		//get请求参数为null. 将设置信息发送到Ajax引擎.(像手机短信一样,同时给他一个url(电话号码),打着这个座机,说明这件事完成了)
		 		xmlHttp.send(null);
		 				 		
		 		 		 		
		 	}
		 	else
		 	{
		 		//开始就清除我们的显示标记.
		 		document.getElementById("spanUserId").innerHTML = "";
		 	}
		 }

为什么采用匿名函数？

　　　我们可以看到，采用非匿名函数中的XMLHttpRequest对象必须是一个全局变量, 如果我们在用户添加信息这个过程中, 不同的输入要进行不用的验证, 那就要多次调用这个对象了, 如果这个光标进入事件需要调用, 那个也需要, 多个需要的, 他们都能够改动XMLHttpRequest对象的状态, 例如给变url地址,改变提交方式就会变得一片混乱.  所以我们采用匿名函数传输.