DRP项目（八）----AJAX运行原理

一：认识Ajax 

         AJAX：Asynchronous JavaScript and XML（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

         Ajax的核心是JavaScript对象XmlHttpRequest，XmlHttpRequest使您可以使用javaScript向服务器提出请求并处理相应，而不阻塞用户。

         Ajax不是一种新的编程语言，而是一种用于创建更好更快以及交互更强的Web应用程序的技术。JavaScript可使用JavaScript的XMLHttpRequest对象来直接与服务器进行通信。通过这个对象，您的javaScript课在不重载页面的情况下与Web服务器交换数据。

        Ajax在浏览器与Web服务器之间使用一部数据传输（HTTP请求），这样就可使页面从服务器强求少量的信息，而不是整个页面。

       XMLHttpRequest对象在大部分浏览器上已经实现而且拥有一个简单的接口允许数据从客户端传递到服务端，但并不打断当前用户的操作。

二：原理图：

     

      注： 未使用Ajax，Web浏览器的单击事件事件直接调用，客户端的处理程序，要想进行检测表单关键字是否重复，必须等到提交以后的返回信息。

      

       注：使用Ajax，当Web端输入数据以后，由浏览器中的Ajax自动开启验证关键字表单的引擎，这样不用提交表单就可以进行表单关键字的验证。换句话来说：ajax引擎起到了一个异步验证的作用。      

        Ajax的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作和服务器响应异步化。这样把以前的一些服务器负担的工作转嫁客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。

三：实例演示：

       1.在html中存在一个text         

   <input type=”text” id=”userId” οnblur=”validate(this)”> //onblur:失去焦点时触发        

        2.这时候我们就可以用Ajax写一个异步处理程序去检测是否这个用户名重复。Ajax的判断是用javaScript写的

        

	function validate(field){
				
		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");
		}
		var url="user_validate.jsp?userId="+trim(field.value)+"&time="+new Date().getTime();
		//设置请求方式，设置url，设置异步请求
		xmlHttp.open('get',url,true);
		//将方法地址复制给onreadystatechange属性
		//类似有手机号码
		xmlHttp.onreadystatechange=function(){
			//Ajax引擎状态为成功
			if(xmlHttp.readyState==4){					
				//HTTP协议状态为成功
				if(xmlHttp.status==200){
					if(trim(xmlHttp.responseText) !=""){
						document.getElementById("spanUserId").innerHTML="<font color='red'>"+xmlHttp.responseText+"</font>";
					}else{
						document.getElementById("spanUserId").innerHTML="";
					}
									
								
			 	}else{
					alert("请求失败，错误码="+xmlHttp.status);
				}
		 	}
						
		}
		//将设置信息发送到ajax引擎
	 	xmlHttp.send(null);
		}else{
			document.getElementById("spanUserId").innerHTML="";
		}
	}		

         当丢失焦点以后，自动提交到url地址并且传参数这样就可以在服务器业务逻辑层的

         3.ajax这一层的代码     

<%
//调用服务器业务逻辑程序
	String userId=request.getParameter("userId");
	if (UserManager.getinstance().findUserById(userId) !=null){
		out.println("用户代码已经存在");
	}
%>

四：深入学习

         XmlHttpRequest对象中：重点掌握：         

XmlHttpRequest中onreadystatechange拥有五种状态进行判断执行的步骤：

0: (Uninitialized) the send( ) method has not yet been invoked

1: (Loading) the send( ) method has been invoked, request in progress

2: (Loaded) the send( ) method has completed, entire response received

3: (Interactive) the response is being parsed

4: (Completed) the response has been parsed, is ready for harvesting

0 － （未初始化）还没有调用send()方法

1 － （载入）已调用send()方法，正在发送请求

2 － （载入完成）send()方法执行完成，已经接收到全部响应内容

3 － （交互）正在解析响应内容

4 － （完成）响应内容解析完成，可以在客户端调用了

总结：Ajax就是实现一个异步执行判断，这样可以节省很多时间，尤其是注册的时候（现在账号都是唯一的），有了Ajax这个过程，使页面无数刷新就可以与服务器之间通信。不过Ajax也存在一些缺点：比如说：ajax干掉了back按钮，安全问题等等。总之，Ajax异步执行，不打断用户的操作，这一点还是有可取之处的。

         Ajax我我认为不涉及到更多的客户端客户的秘密信息的就可以用，也可以企业内部应用，这一点我们要权衡利弊看得失，其实每一项技术给我们带来方便的同时也会存在一定的负面影响（只不过我们有些知道有些未知而已）。