整個註冊過程在 Ajax 技術的支持下，利用 JavaScript的 HTML 操縱能力，使得用戶不需要進行額外的操作。用戶體驗的效果逼近 C/S 結構。而整個案例的改進，僅僅是改良了客戶端的 register.html文件，添加了 JavaScript代碼和 HTML元素。
首先還是編寫一個 HTML 表單來接收用戶輸入。
源代碼如下（register.html）：
<H1>Demo 郵件系統 - 用戶註冊</H1> <form name="regForm" id="regForm" action="DoRegister.jsp" method="post"> 註冊用戶名： <input type="text" name="userName" id="userName" onblur="checkUser();"/> <label id="checkResult"></label> <br/> 註冊密碼： <input type="password" name="password" id="password"/><br/> 確認密碼： <input type="password" name="password2" id="password2"/><br/> <input type="submit" value="提交"/> </form>
在 HTML文件中對id 爲 userName的文本框元素添加了 onblur 事件。這樣，當這個文本框失去焦點，即用戶填完了註冊用戶名，準備繼續填寫註冊密碼時，事件被觸發。JavaScript方法checkUser()被調用。下面是checkUser()的定義：
var req;function checkUser(){var checkResult = document.getElementById("checkResult");checkResult.innerHTML="正在檢測用戶名...";var userName=document.getElementById("userName").value;//得到瀏覽器中可以發送http請求的對象，本例只對IE5.5+有效req=new ActiveXObject("Microsoft.XMLHttp");req.open("get","http://localhost:8080/test1/CheckUserName.jsp? checkUserName="+userName);//javascript特殊語法，表明req的狀態改變將調用handleRequest方法req.onreadystatechange=handleRequest;req.send(null);}
爲了便於理解，JavaScript方法checkUser()被寫得很簡單。其中最關鍵的步驟就是方法將會生成一個XMLHttpRequest對象在IE瀏覽器中，這個對象以ActiveX控件的形式出現。有了XMLHttpRequest對象之後，JavaScript方法可以利用它直接發送異步請求到服務器端而不需要刷新當前瀏覽器頁面。當服務器端返回處理結果時， XMLHttpRequest對象的狀態將會發生改變，這樣會觸發相應的 JavaScript方法被調用。在案例中，handleRequest()方法就是用來處理服務器端返回的結果。
編寫 handleRequest 方法：
function handleRequest(){var checkResult = document.getElementById("checkResult"); //判斷就緒狀態if(req.readyState==4){if(req.status==200){checkResult.innerHTML=req.responseText;}else{alter("An error occurred:"+req.statusText);}}}
HandlerRequest()方法的邏輯也比較簡單，當服務器端有正常返回值時，就在 id 爲 checkResult 的 label 元素中添加一段HTML，其值就是由服務器端返回的數據。
整個註冊過程在 Ajax 技術的支持下，利用 JavaScript的 HTML 操縱能力，使得用戶不需要進行額外的操作。用戶體驗的效果逼近 C/S 結構。而整個案例的改進，僅僅是改良了客戶端的 register.html文件，添加了 JavaScript代碼和 HTML元素。
首先還是編寫一個 HTML 表單來接收用戶輸入。
源代碼如下（register.html）：
<H1>Demo 郵件系統 - 用戶註冊</H1> <form name="regForm" id="regForm" action="DoRegister.jsp" method="post"> 註冊用戶名： <input type="text" name="userName" id="userName" onblur="checkUser();"/> <label id="checkResult"></label> <br/> 註冊密碼： <input type="password" name="password" id="password"/><br/> 確認密碼： <input type="password" name="password2" id="password2"/><br/> <input type="submit" value="提交"/> </form>
在 HTML文件中對id 爲 userName的文本框元素添加了 onblur 事件。這樣，當這個文本框失去焦點，即用戶填完了註冊用戶名，準備繼續填寫註冊密碼時，事件被觸發。JavaScript方法checkUser()被調用。下面是checkUser()的定義：
var req;function checkUser(){var checkResult = document.getElementById("checkResult");checkResult.innerHTML="正在檢測用戶名...";var userName=document.getElementById("userName").value;//得到瀏覽器中可以發送http請求的對象，本例只對IE5.5+有效req=new ActiveXObject("Microsoft.XMLHttp");req.open("get","http://localhost:8080/test1/CheckUserName.jsp? checkUserName="+userName);//javascript特殊語法，表明req的狀態改變將調用handleRequest方法req.onreadystatechange=handleRequest;req.send(null);}
爲了便於理解，JavaScript方法checkUser()被寫得很簡單。其中最關鍵的步驟就是方法將會生成一個XMLHttpRequest對象在IE瀏覽器中，這個對象以ActiveX控件的形式出現。有了XMLHttpRequest對象之後，JavaScript方法可以利用它直接發送異步請求到服務器端而不需要刷新當前瀏覽器頁面。當服務器端返回處理結果時， XMLHttpRequest對象的狀態將會發生改變，這樣會觸發相應的 JavaScript方法被調用。在案例中，handleRequest()方法就是用來處理服務器端返回的結果。
編寫 handleRequest 方法：
function handleRequest(){var checkResult = document.getElementById("checkResult"); //判斷就緒狀態if(req.readyState==4){if(req.status==200){checkResult.innerHTML=req.responseText;}else{alter("An error occurred:"+req.statusText);}}}
HandlerRequest()方法的邏輯也比較簡單，當服務器端有正常返回值時，就在 id 爲 checkResult 的 label 元素中添加一段HTML，其值就是由服務器端返回的數據。