1. 程式人生 > >(二)AJAX非同步傳輸(採用非匿名函式和匿名函式) 例項.

(二)AJAX非同步傳輸(採用非匿名函式和匿名函式) 例項.

AJAX非同步傳輸(採用非匿名函式) 

 
		//建立xmlhttpRequest物件 
	    var xmlHttp;
	    //有了這個物件就可以和引擎打交道,傳送相關的引數.
		function createXMLHttpRequest() {
			//表示當前瀏覽器不是ie,如ns,firefox
			if(window.XMLHttpRequest) {
				xmlHttp = new XMLHttpRequest();
			} else if (window.ActiveXObject) {
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
		 }
		 
		 
		 //完成檢查,動態的檢查使用者程式碼是否已經存在.
		 function validate(field)
		 {
		 	//alert(document.getElementById("userId").value);
		 	//alert(field.value);
		 	//如果使用者中取得了使用者程式碼的資料,且不為空.
		 	if(trim(field.value).length != 0)
		 	{
		 		//建立Ajax核心物件.
		 		createXMLHttpRequest();
		 		//三個引數,第一個是提交方式get或post,url
		 		//防止快取.
		 		var url = "user_validate.jsp?userId=" + trim(field.value) + "×=" + new Date().getTime();
		 		//設定請求方式為get,設定請求的url,設定為非同步提交true
		 		xmlHttp.open("GET",url,true);
		 		
		 		//將方法地址複製給onreadystatechange屬性.
		 		//類似於電話號碼.
		 		xmlHttp.onreadystatechange=callback;
		 		
		 		//get請求引數為null. 將設定資訊傳送到Ajax引擎.(像手機簡訊一樣,同時給他一個url(電話號碼),打著這個座機,說明這件事完成了)
		 		xmlHttp.send(null);
		 				 		
		 		 		 		
		 	}
		 	else
		 	{
		 		//開始就清除我們的顯示標記.
		 		document.getElementById("spanUserId").innerHTML = "";
		 	}
		 }
		 
		 function callback()
		 {
		 	//Ajax的引擎發生改變.
		 	//alert(xmlHttp.readyState);
		 	
		 	//檢視引擎的狀態.Ajax引擎狀態為成功.
		 	if(xmlHttp.readyState == 4){
		 	    //無論是請求成功還是不成功,為4是有響應,200是成功,其他的狀態都表示失敗.
		 	    //http協議狀態為成功.
		 		if(xmlHttp.status ==200)
		 		{
		 			//判斷返回的東西. 如果不為空的話,顯示span的提示使用者存在的標籤.
		 			if(trim(xmlHttp.responseText) !="")
		 			{
		 				//alert(xmlHttp.responseText);
		 			//設定提示的標籤內容.
		 			document.getElementById("spanUserId").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>";
		 			}
		 			else
		 			{
		 				//如果為空.清除span標籤.
		 				document.getElementById("spanUserId").innerHTML = "";
		 			}
		 			
		 		}else
		 		{
		 			//錯誤程式碼,例如404沒有找到頁面.
		 			alert("請求失敗,錯誤碼" + xmlHttp.status);
		 		}
		 	}
		 	
		 }


AJAX非同步傳輸(採用匿名函式):

 //完成檢查,動態的檢查使用者程式碼是否已經存在.
		 function validate(field)
		 {
		 	
			
			
		 	//alert(document.getElementById("userId").value);
		 	//alert(field.value);
		 	//如果使用者中取得了使用者程式碼的資料,且不為空.
		 	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");
				}
		 		
		 		
		 		
		 		//三個引數,第一個是提交方式get或post,url
		 		//防止快取.
		 		var url = "user_validate.jsp?userId=" + trim(field.value) + "×=" + new Date().getTime();
		 		//設定請求方式為get,設定請求的url,設定為非同步提交true
		 		xmlHttp.open("GET",url,true);
		 		
		 		//將方法地址複製給onreadystatechange屬性.
		 		//類似於電話號碼.
		 		//xmlHttp.onreadystatechange=callback;
		 		//採用匿名函式的方式.
		 		xmlHttp.onreadystatechange=function()
		 		{
		 			//Ajax的引擎發生改變.
		 	//alert(xmlHttp.readyState);
		 	
		 	//檢視引擎的狀態.Ajax引擎狀態為成功.
		 	if(xmlHttp.readyState == 4){
		 	    //無論是請求成功還是不成功,為4是有響應,200是成功,其他的狀態都表示失敗.
		 	    //http協議狀態為成功.
		 		if(xmlHttp.status ==200)
		 		{
		 			//判斷返回的東西. 如果不為空的話,顯示span的提示使用者存在的標籤.
		 			if(trim(xmlHttp.responseText) !="")
		 			{
		 				//alert(xmlHttp.responseText);
		 			//設定提示的標籤內容.
		 			document.getElementById("spanUserId").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>";
		 			}
		 			else
		 			{
		 				//如果為空.清除span標籤.
		 				document.getElementById("spanUserId").innerHTML = "";
		 			}
		 			
		 		}else
		 		{
		 			//錯誤程式碼,例如404沒有找到頁面.
		 			alert("請求失敗,錯誤碼" + xmlHttp.status);
		 		}
		 	}
		 	
		 		}
		 		
		 		
		 		//get請求引數為null. 將設定資訊傳送到Ajax引擎.(像手機簡訊一樣,同時給他一個url(電話號碼),打著這個座機,說明這件事完成了)
		 		xmlHttp.send(null);
		 				 		
		 		 		 		
		 	}
		 	else
		 	{
		 		//開始就清除我們的顯示標記.
		 		document.getElementById("spanUserId").innerHTML = "";
		 	}
		 }

為什麼採用匿名函式?

 我們可以看到,採用非匿名函式中的XMLHttpRequest物件必須是一個全域性變數, 如果我們在使用者新增資訊這個過程中, 不同的輸入要進行不用的驗證, 那就要多次呼叫這個物件了, 如果這個游標進入事件需要呼叫, 那個也需要, 多個需要的, 他們都能夠改動XMLHttpRequest物件的狀態, 例如給變url地址,改變提交方式就會變得一片混亂.  所以我們採用匿名函式傳輸.