AJAX基础

基本概念

AJAX（Asynchronous JavaScript And XML）异步的JavaScript 与XML技术，是一种广泛应用在浏览器的网页开发技术。页面不用刷新就可以更新内容。

JavaScript：网上说JavaScript是穿了Java的外套，JavaScript在目前我的Web学习一直是用在客户端表单验证，网上还说因为JavaScript调式很麻烦，我的调式方法也只是“alert，alert，alert”

XML（eXtensible Markup Language）可扩展的标记语言，是一种标记语言。

异步：在等待网页的传输过程中，用户依然可以和系统进行交互。

流程

原来客户端请求服务器的执行流程

利用AJAX技术的客户端请求服务器的执行流程

根据两图对比，可以很清晰的看出AJAX Engine存在于客户端浏览器中，客户端请求发送给AJAX Engine，无需等待服务器端的响应。这样可以提高效率，让用户感觉效果更好更方便。

XMLHttpRequest

在使用XMLHttpRequest对象发送请求和处理响应之前，必须先用JavaScript创建一个XMLHttpRequest对象。

//创建XML引擎对象
var xmlHttpRequest;
function createXMLHttpRequest()
{
    
   //不同的浏览器创建的方式不同
   if(window.XMLHttpRequest){
       xmlHttpRequest=new XMLHttpRequest();
   }else if(window.ActiveXObject){
       xmlHttpRequest=new ActioveXObject("Microsoft.XMLHTTP");
   }

}

XMLHttpRequest Method

XMLHttpRequest Properties

//XMLHttpRequest的onreadystatechange属性调用的函数
function callback(){
          //Ajax引擎初始化成功
	 if(xmlHttpRequest.readyState==4){
	                //http协议成功  
	       if(xmlHttpRequest.status == 200){ 
	        document.getElementById("userIdSpan").innerHTML = "<font color='red'>" + xmlHttpRequest.responseText + "</font>";    
	     }else{
	        alert("请求失败，错误码="+xmHttRequestp.status);
	        
	     }
	  }
}

//验证函数
function validate(field)
		{
		      if(trim(field.value).length!=0){
		      //创建XMLHttpRequest对象
		      createXMLHttpRequest();
		
		            //XMLHttpRequest的Open方法第二个参数
	            var url = "user_validate.jsp?userId=" + trim(field.value)+"×tamp="+new Date().getTime();
	                   
	                   //open方法的第三个参数，默认是true（异步），false为同步
		      xmlHttpRequest.open("get",url,true);
		    
		      //方法地址，处理完成后自动调用，就是回调。
		      xmlHttpRequest.onreadystatechange=callback;
		   
		      //将参数发送到Ajax引擎，不是去真正的执行
		      xmlHttpRequest.send(null);
		   }else{
		      document.getElementById("userIdSpan").innerHTML ="";
		   }
		}