Ajax的複習

距離剛開始學ajax那會有一段時間了，然後用得又比較少。都有些生疏了呢￣へ￣，現在剛好要實現一個用Ajax檢驗重複的功能，順便複習一下Ajax。

關於Ajax

1. 作用 ：通過Ajax可以無需更新整個網頁，而只更新部分內容，優化使用者體驗；
2. 原理：
3. AjaxEngine， 通常使用XMLHtttpRequest物件與伺服器端進行傳輸互動；

建立步驟

1. 建立非同步互動物件： 對不同瀏覽器做相容處理，IE7+, Firefox, Chrome, Opera, Safari 瀏覽器用，xmlhttp=new XMLHttpRequest();IE6, IE5 瀏覽器用xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);

2. 設定監聽： 根據返回的狀態作出對前端的響應。 當 readyState 改變時，就會觸發 onreadystatechange 事件，觸發事件後就可以XMLHtttpRequest物件呼叫readyState屬性獲得返回值然後進行響應了。readyState 共有5種狀態如下： XMLHtttpRequest物件呼叫status屬性可獲得伺服器返回的 HTTP 狀態碼 –200：請求成功 –404：沒有發現檔案、查詢或url –400~499：客戶端問題 –500 ：服務端問題

3. 開啟連結： 使用方法open(method,url,async)，三個引數如下： – method：請求的型別；GET 或 POST – url：檔案在伺服器上的位置 – async：true（非同步）或 false（同步）

4. 傳送： 如是post請求，使用send(string)；

程式碼部分

JavaScript

<script>
	/*
	 *非同步檢驗使用者名稱是否被註冊
	 */
	 function checkUsername(){
		//獲取使用者名稱
		var username = document.getElementById("username").value;
		//1.建立非同步互動物件
		var xhr = createXmlHttp();
		//2.設定監聽
		xhr.onreadystatechange = function(){
			if(xhr.readyState ==
 
 4){
				if(xhr.status == 200){
					document.getElementById("checkReport").innerHTML = xhr.responseText;
				}
			}
		}
		//3.開啟連結
		xhr.open("GET","${pageContext.request.contextPath}/user_findByName.action?time="+new Date().getTime()+"&username="+username,true);
		//4.傳送
		xhr.send(null);
	}
	
	 function createXmlHttp(){
		   var xmlHttp;
		   try{ // Firefox, Opera 8.0+, Safari
		        xmlHttp=new XMLHttpRequest();
		    }
		    catch (e){
			   try{// Internet Explorer
			         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
			      }
			    catch (e){
			      try{
			         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
			      }
			      catch (e){}
			      }
		    }
			return xmlHttp;
		 }
</script>

注：這裡Ajax請求時，加了個一時間戳，目的是防止瀏覽器使用快取。因為在瀏覽器開了快取的情況下，對同一連結的相同引數，瀏覽器會使用快取。

表單

<div>
	<form action="index.html" onsubmit="return checkForm();">
		<ul>
			<li>暱&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;稱：
				<input type="text" id="username" placeholder="您使用者名稱" onblur="checkUsername();"/>
				<span id="checkReport"></span>
			</li>
			<li>設定密碼：<input type="password" id="password" placeholder="至少兩種字元組合" /></li>
			<li>確認密碼：<input type="password" id="repassword" placeholder="再次輸入您的密碼" /></li>
			<li>驗證郵箱：<input type="text" id="email" placeholder="輸入郵箱" /></li>
			<div class="check">
				<input type="checkbox" id="accept" onclick="isAccepted()" /> 同意
				<a href="index.html" style="text-decoration: none;">《使用者註冊協議》</a>
			</div>
			<input class="rbtn" type="submit" id="submit" value="確認註冊" disabled="disabled"/>
		</ul>
	</form>
</div>

使用SHH作為後端。