匿名函数验证用户代码实例解析Ajax技术原理

Ajax技术并不是什么划时代的新技术,该技术的核心仍然是javascript.我们应用ajax技术所要实现的功能主要有两个，一个是实现数据的异步通讯，另外一个是实现页面的无刷新数据更新。那么为什么使用ajax技术能够达到这种效果呢？通过下面两幅图片来揭示ajax技术的工作原理。

传统的前后台数据交换：

从图中我们可以看出浏览器与服务器的交互是同步式进行的。也就是说当浏览器和服务器进行交互的时候，浏览器提交的请求必须经过服务器处理并得到服务器端的回应后才可以进行下一步的操作。这种情况所带来的后果是即使客户端提交的请求在服务器端处理所需要的时间很长，那么用户也不可以进行其他的操作，只能等待直到请求被处理。

ajax前后台数据交换：

对比两幅图我们可以发现在web ui和服务器之间多了一层，这一层就是ajax引擎。也就是多出的这一层就完全可以解释ajax技术实现异步数据交互和无刷新实现数据更新的原因了：

（1）ajax实现异步数据传输的原理。当我们使用ajax技术通过页面与服务器交换数据的时候，web ui实际上是将请求交给了ajax引擎去处理。这样就使得ajax引擎充当了中转站的角色。只要ajax接受了web ui提交过来的请求，那么与后台交互的责任就落在了ajax引擎的身上。由于将交互工作交给了ajax引擎，使得web ui可以不必再等待服务器端产生回应后再进行其他操作，所以用户不必再等待而可以进行其他操作。

（2）ajax实现页面无刷新数据更新的原理。当服务器将提交的请求处理完毕后返回结果也将返回给ajax引擎（注意，返回给ajax引擎的结果为文本形式，要么是xml文件，要么是纯文本），然后通过使用javascript从ajax引擎中取出数据，并操作DOM对象进行页面数据的更新。由于并不是从服务器端重新发回页面，而是通过javascript取出浏览器内置的ajax引擎中的数据来渲染页面，所以页面将不刷新而进行数据的更新。

了解完Ajax技术的原理后，下面我们将通过验证用户代码是否存在的实例来讲解Ajax技术的具体应用。用例描述：在添加用户的过程中，首先要判断所添加的用户的用户代码是否存在，如果存在则不允许添加。

add_user.jsp页面ajax异步数据交互的js代码：

1 function validate(field){
2	if(trim(field.value).length != 0){
3		//根据是IE浏览器还是FireFox来创建XMLHttpRequest对象
4		var xmlHttp = null;
5		//表示当前浏览器不是IE，ns，firefox
6		if(window.XMLHttpRequest){
7			xmlHttp = new XMLHttpRequest();
8			}else if(window.ActiveXObject){
9				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
10			}
11			
12			var url = "user_validate.jsp?userId=" + trim(field.value) + "&time=" 
13						+ new Date().getTime();
14			
15			/*
16			     设置XMLHttpRequest对象的相关属性，提交的方式，提交给的jsp或servlet的url，
17			     以及是不是异步提交（true表示异步提交，是默认值,false表示同步）
18			*/
19			xmlHttp.open("GET",url,true);
20			
21			//将方法地址赋值给onreadystatechange属性
22			//类似于电话号码
23			xmlHttp.onreadystatechange = function(){
24				//alert(xmlHttp.readyState);
25				//Ajax引擎状态为成功
26				if(xmlHttp.readyState == 4){
27					//HTTP协议状态为成功
28					if(xmlHttp.status == 200){
29						if(trim(xmlHttp.responseText) != ""){
30							/*
31							   jsp或者servlet接受到ajax引擎传过来的数据并处理后，会将处理结果
32							   输出到ajax引擎中（只是文本型的东西，要么纯文本，要么xml）
33							*/
34							//从ajax引擎中将jsp或servlet的处理结果从ajax引擎中取出来
35							document.getElementById("spanUserId").innerHTML = "<font color = 'red'>" 
36																37				                        + xmlHttp.responseText + "</font>";
38						}else{
39							document.getElementById("spanUserId").innerHTML = "";
40						}
41					}else{
42						alert("请求失败，错误码：" + xmlHttp.status);
43					}
44				}
45			}
46			
47			/*
48				将设置信息发送到Ajax引擎(如果是get方式提交，在send()方法中的参数值为null，
49				如果是post提交方式则参数不一样)
50			*/
51			xmlHttp.send(null);
52			
53		}else{
54			document.getElementById("spanUserId").innerHTML ="";
55		}

本段js代码可以由不同的事件触发，以文本框失去焦点触发本段函数为例:

<td width="78%">
	<input name="userId" type="text" class="text1" id="userId"
		size="10" maxlength="10" value="<%=userId %>" onKeyPress="userIdOnKeyPress()" 
		οnblur="validate(this)" >
	<span id="spanUserId"></span>
</td>

1.客户端触发该函数后，首先执行的根据浏览器的版本创建XMLHttpRequest对象，该对象时ajax中的最核心的对象，它具有一系列的属性和方法其中比较重要的有以下几种：

(1).readyState属性。该属性有5种不同的值，这5种值分别代表了该对象的不同状态如下：

状态值	所代表的含义
0 UNINITIALIZED	XMLHttpRequest尚未初始化,还没有调用open()方法之前的状态
1 LOADING	已经调用了open()方法，但是还没有调用send()方法之前
2 LOADED	调用了send()方法后的状态
3 INTERACTIVE	交互状态，正在接收response
4 COMPLETED	Response接收完成

(2).responseText属性。该属性返回的是服务器端处理数据后的回应，返回结果是纯文本形式的。

(3).responseXML属性。该属性返回的也是服务器端处理数据后的回应，返回结果是xml文件形式的。

(4).status属性。表示http协议状态。由于ajax引擎和服务器端的数据交互也是通过http协议传输的，所以数据是否传输成功同样是需要标记的。而status属性便是标记是否成功的，当该属性的值为200的时候表示传输成功，为404的时候，表示未找到相应页面，为500的时候表示系统发生内部错误。

2.创建完XMLHttpRequest对象后，设置提交的方式（get或者post），提交的对象（将数据提交给乃个jsp或servlet进行处理）以及提交是否是异步形式的。第19行代码完成该项设置，注意其中的url项（第12行代码），加时间戳的目的是为了排除缓存的干扰，避免出现一些未知错误。同时我们看到其实ajax除了异步数据交换外也是支持同步形式的数据交换的，只要更改设置参数即可，当设置为同步形式的数据交换后，与未使用ajax时的效果是一样的。

3.匿名函数监听onreadystatechange事件，每当readyState的发生一次的时候便触发执行一次该匿名函数。当监听到XMLHttpRequest对象的status属性为4的时候表示ajax引擎状态为成功状态，当传输状态也为成功的时候，ajax引擎会将服务器端返回的处理结果取出来显示的页面上。

 

总结：ajax技术并不是传说中的那么抽象，其实它就是我们所用的javascript，只不过多了一个XMLHttpRequest对象和一个所谓的ajax引擎概念。从上文的分析中我们也已经明白了ajax实现页面无刷新数据更新和异步数据传输的原理，明白了使用ajax技术的好处，但是我们应该清楚，ajax技术也不可以随意滥用，因为它并不是线程安全的，尤其是在提交多个请求的时候一定要为每一个线程创建一个XMLHttpRequest对象，防止出现意外错误情况。