Ajax的简单使用

Ajax技术：即在后台与服务器交换少量的数据，在不重新加载整个页面的情况下，部分更新网页内容。
该技术主要使用了一个API：XMLHttpRequest对象，通过这个对象的属性和方法，调用Ajax引擎，和服务器交换数据。
主要的属性：

• onreadystatechange,存储函数（或函数名），每当readyState的属性改变时，就会调用该函数

• readyState属性有五个状态值。

  0：是uninitialized，未初始化。已经创建了XMLHttpRequest对象但是未初始化。
  1：是loading，send for request but not called .已经开始准备好要发送了。即XHR对象实例已调用了open方法
  2：是loaded, send called,headers and status are available。已经发送，但是还没有收到响应。
  3：是interactive，downloading response,but responseText only partial set.正在接受响应，但是还不完整。
  4：是completed，finish downloading.接受响应完毕。
  

• responseText：服务器返回的响应文本。只有当readyState>=3的时候才有值，根据readyState的状态值，可以知道，当readyState=3，返回的响应文本不完整，只有readyState=4，完全返回，才能接受全部的响应文本。

• responseXML：response as Dom Document object。响应信息是xml，可以解析为Dom对象。

• status：服务器的Http状态码，若是200，则表示OK，404，表示为未找到。

• statusText：服务器http状态码的文本。比如OK，Not Found。

主要的方法：

open（method，url，boolean）：打开XMLHttpRequest对象。其中method方法有get，post，delete，put。若是查数据，从服务器中得到一定的数据，则使用get。若是直接提交到服务器中，更新一定的数据，则使用post；url是请求资源的地址。第三个参数表示是否使用异步。默认情况是true，因为Ajax的特点就是异步传送。若使用同步则false。
method:get&post

send（body）：发送请求Ajax引擎，让Ajax引擎操作。其中发送的内容可以是需要的参数，若是没有参数，直接send（null)
setRequestHeader（ label，value），将标签/值对添加到要发送的HTTP标头。
getResponseHeader( headerName )返回指定HTTP标头的值。
getAllResponseHeaders()，以字符串形式返回完整的HTTP标头集。

下面是主要的流程：

• 首先，有客户端事件触发Ajax事件。

• 然后，创建xmlHttpRequest对象，根据浏览器不同，创建的xmlHttpRequest对象不同。用open调用，用send发送请求给Ajax引擎。(在后台向服务器发送数据)

• 最后，执行完毕后，把结果返回给客户端。（从服务器接收数据）

• 更新网页而不重新加载

创建xmlHttpRequest对象：（用于在后台与服务器交换数据）

function createXMLHttpRequest() {
      var xmlHttp;
//表示当前浏览器不是i5，6e,　所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
	if(window.XMLHttpRequest) {
		xmlHttp = new XMLHttpRequest();
	} else if (window.ActiveXObject) {
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
}

  客户端事件触发：  
function validate(field){
   if(trim(field.value).length!=0){
	 //创建XMLHttpRequest
	 createXMLHttpRequest() ;
	 var url="user_validate.jsp?userId=" + trim(field.value)+"×tampt="+new Date().getTime();
	 // alert(url);
	 xmlHttp.open("GET", url, true);
	 //方法地址。处理完成后自动调用，回调。
	 xmlHttp.onreadystatechange=callback ;
	 xmlHttp.send(null);//将参数发送到Ajax引擎
	 } else{ 
         document.getElementById("userIdSpan").innerHTML = ""; 
     }  
 }

结果返回操作：

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