一、巨集觀Ajax

二、原理

無Ajax訪問瀏覽器：

 

通過Ajax訪問瀏覽器：

　　從圖中我們可以看出，使用Ajax和不使用Ajax最大的區別是：在使用者和伺服器之間加了—箇中間層(AJAX引擎),個人覺得它就像一個緩衝池，不用等待服務端的響應後才能進行下一步動作，將響應跟使用者操作解耦和。

　　Ajax的原理：由事件觸發，建立一個XMLHttpRequest物件，把HTTP方法（Get/Post）、目標URL、是否非同步以及請求返回後的回撥函式callback()設定到XMLHttpRequest物件，通過XMLHttpRequest向伺服器傳送請求，請求傳送後繼續響應使用者的介面互動，只有等到請求真正從伺服器返回的時候才呼叫callback()函式，對響應資料進行處理。

三、Ajaxdemo

1.非同步重新整理（無匿名函式）demo1

<span style="font-size:14px;"><span style="font-size:18px;">　　　//1.建立Ajax核心物件XMLHttpRequest
	var xmlHttp;
	function createXMLHttpRequest(){
		//表示當前瀏覽器不是ie,如firefox
		if(window.XMLHttpRequest){
			xmlHttp=new XMLHttpRequest();
		}else if(window.ActiveXObject){
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	
	//2.建立Ajax物件，完成使用者程式碼的判斷
	function validate(field){
		//alert(document.getElementById("userId").value);
		alert(field.value+"validate");
		if(trim(field.value).length !=0){
			//建立Ajax核心物件XMLHttpRequest
			createXMLHttpRequest();	
			//新增一個時間，就不會讀取過期快取了
			var url="user_validate.jsp?userId="+ trim(field.value)+"&time="+new Date().getTime();
			//設定請求方式為get,請求的url,非同步提交
			xmlHttp.open("GET",url,true);
			//將方法的地址賦值給onreadystatechange屬性,
<span style="font-family:Microsoft YaHei;">                                        </span>把callback函式的指標（地址）作為引數傳遞給另一個函式，當這個指標被用來呼叫其所指向的函式。
			xmlHttp.onreadystatechange=callback;
			
			//將設定資訊傳送到Ajax引擎
			xmlHttp.send(null);
		}else{
		
			document.getElementById("spanUserId").innerHTML="";
		}
	
	}
	
	function callback(){
		alert(xmlHttp.readyState+"callback");
		//設定Ajax引擎狀態為成功
		if (xmlHttp.readyState==4){
		//Http協議狀態為成功
			if(xmlHttp.status==200){
				//取得相應文字
				//alert(xmlHttp.responseText);	
				if(trim(xmlHttp.responseText)!=""){
					document.getElementById("spanUserId").innerHTML="<font color='red'>"+ xmlHttp.responseText+"</font>";	
				}else{
					document.getElementById("spanUserId").innerHTML="";
				}
					
			}else{
				alert("請求失敗，錯誤碼="+xmlHttp.status);
			}
		
	}</span></span>

2.非同步重新整理（包含匿名函式）demo2

<span style="font-size:14px;"><span style="font-size:18px;">function validate(field){
		
		if(trim(field.value).length !=0){
			//建立Ajax核心物件XMLHttpRequest
	
			var xmlHttp=null;
			//表示當前瀏覽器不是ie,如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();
			alert(xmlHttp.readyState);
			
			//設定請求方式為get,請求的url,非同步提交，readystate狀態為1			
			xmlHttp.open("GET",url,true);
			
			//將方法的地址賦值給onreadystatechange屬性,每個狀態改變後，都要觸發的事件
			xmlHttp.onreadystatechange=function(){	
				alert(xmlHttp.readyState);		
				//設定Ajax引擎狀態為成功
				if (xmlHttp.readyState==4){
					//Http協議狀態為成功
					if(xmlHttp.status==200){
					//取得相應文字
					//alert(xmlHttp.responseText);	
						if(trim(xmlHttp.responseText)!=""){
							//從伺服器進行返回的DOM相容的文件資料物件
							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="";
		}
	
	}</span></span>

　　結論：這個兩個demo不僅僅是對上述Ajax原理的一個驗證，新增了列印xmlHttp.readyState的列印，也讓我們更加清晰的看到Ajax不同狀態的改變。以第二個例子舉例，alert的結果是0,1,2,3,4.沒用呼叫open方法之前，readyState的狀態是0，隨後每調匿名函式一次，狀態值都會發生改變，依次是1,2,3,4.

　　匿名函式，顧名思義，就是沒有名字的函式。在demo1中沒有使用匿名函式，demo2把XMLHttpRequest例項化放到了validate類裡面，callback函式變成了匿名函式，var xmlHttp，全域性變數放到了類裡面。匿名函式可以有效的保證在頁面上寫入JavaScript,而不會造成全域性變數的汙染。

四、總結

　　Ajax挺好玩的，讓我們不用彈出框就能看到輸入資訊的反映，使用者體驗度不錯。因為只需要進行區域性的重新整理，所以呼叫的服務端的資源是很有針對性的，不會存在費力不討好的現象。網上看到一些言論，說Ajax也有缺點，將web網站的站內資訊暴漏了出來，安全問題需要謹慎對待。

       很久之前，學習Ajax真的雲裡霧裡，現在真的有一種，驀然回首，那人卻在燈火闌珊處的感覺。