已經有一年半沒有從事J2ee開發了，各種各樣的Ajax框架JQuery,Prototype ,YUI等都發展到一句話搞定程度了。這篇文章是我在2009年時候寫在QQ空間裏面，現在順便把它copy和大家一起分享。寫的不好，見諒
現在的ajax越賴越先進了，當年10行代碼搞定今天只要一句話搞定了，社會進步，人類的進步，但我想起當年最初最底層的ajax編寫就是玩出來的：
建立登錄界面index.jsp（客戶端）：
該界面很簡單，如圖1所示，但要注意三點：
（1）在<head>與</head>引入外部外部js文件(該文件用於XMLHttpRequest對象收集信息及處理返回結果)：
<script language="JavaScript" type="text/javascript" src="js/loginCheck.js"></script>
（2）登錄用戶名，密碼的ID分別爲userID，userPwd。將登錄按鈕的類型改成button，onClick事件爲checkUserLogin()。即當用戶點擊登錄按鈕時，瀏覽器將調用loginCheck.js文件中的checkUserLogin函數來處理：
<td width="112" align="right">UserID：</td>
<td width="166"><input name="userID" type="text" id="userID"></td>
<td align="right">Password：</td> <td><input name="userPwd" type="password" id="userPwd"></td>
<input type="button" name="login" value="Login" onClick="checkUserLogin();">
（3）在登錄表單下面有一表格，該表格的Style值爲display:none表示該表格以及其中的所有組件在初始化時是隱藏的,只有在用戶登錄成功後才顯示。
<table width="304" align="center" style="display:none " id="loginOKTable"> <tr><td align="center" ><input type="text" name="welcomeUI" size="40" readonly id="welcomeUI"></td> </tr>
</table>
三.建立登錄界面loginCheck.js腳本文件（客戶端）：
該頁面代碼解釋：
（1）創建全局XMLHttpRequest對象實例變量。該對象是IE瀏覽器已定義的，後來又由其他瀏覽器支持,是AJAX中的核心對象。它是一種支持異步請求的技術，通過該技術可以使用JavaScript向服務器提出請求並處理響應，在服務器未返回結果前不阻塞用戶繼續操作。
var httpRequest;
（2）定義創建XMLHttpRequest對象函數
function createHttpReqObj()
{
if(window.XMLHttpRequest) //創建IE之外瀏覽器的XMLHttpRequest對象
{
httpRequest = new XMLHttpRequest();
}
else if (window.ActiveXObject) //創建IE瀏覽器的XMLHttpRequest對象
，不同的IE版本創建不同的對象
{
try
{
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
httpRequest = new ActiveXObject("Microsoft.XMLHTTP")
} catch (e) {}
}
}
}
(3)檢查用戶登錄函數(通過點擊登錄按鈕觸發)
function checkUserLogin()
{
var isValidInput=true;//用戶未輸入用戶名帳號標誌
//獲取用戶輸入的用戶名以及密碼
var userName=document.getElementById("userName");
var userPwd=document.getElementById("userPwd");
//判斷用戶名和密碼是否爲空
if(userName.value=="")
{
window.alert("UserName can not be null.");
userName.focus();
isValidInput =false;
}
if(userPwd.value=="")
{
window.alert("User password can not be null.");
isValidInput.focus();
isCheckInput=false;
}
createHttpReqObj() ; //調用createHttpReqObj函數創建XMLHttpRequest對象
if(isValidInput && httpRequest)
{
var url="servlet/CheckUserLogin";
httpRequest.open("POST",url, true);
// onreadystatechange是XMLHttpRequest對象的參數。用於定義該對象狀態改變時的監聽器，其值對應一個javacript函數。本文將使用handleCheckLogin函數來監聽。
httpRequest.onreadystatechange = handleCheckLogin;
httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//send(body) 函數是XMLHttpRequest對象的內置函數,用於發送請求到http服務器並接收回應，參數body爲請求發送的數據.
httpRequest.send("userName=" + userName.value + "&userPFONT-FAMILY: 'Courier New'; mso-bidi-font-size: 10.5pt; mso-font-kerning: 0pt"> }
}
function handleCheckLogin()
{
if (XMLHttpReq.readyState == 4)
{
if (XMLHttpReq.status == 200)
{
//獲取XMLHttpRequest對象返回的responseXML結果
var result=httpRequest.responseXML;
//獲取返回結果中的所有的loginInfo信息
var loginInfos=result.getElementsByTagName("loginInfo");
//獲取登錄界面上的隱藏表格loginOKTable
var loginOKTable=window.document.getElementById("loginOKTable");
//將表格loginOKTable隱藏
loginOKTable.style.display="none";
for(var i=0;i<loginInfos.length;i++)
{
//使用getElementsByTagName函數獲取所有是否登錄成功loginSuccess標鑑信息：true 或false。因爲返回的loginSuccess標鑑可以有很多個，所以用firstChild屬性獲取第一個loginSuccess標鑑; data屬性獲取loginSuccess標鑑的文本信息。
var isSuccess=loginInfos.getElementsByTagName ("loginSuccess")[0].firstChild.data;
//如果loginSuccess標鑑文本內容爲true,表示登錄成功
if(isSuccess!=null && isSuccess=="true")
{
//獲取第一個userName標鑑的文本信息
var loginUserName=loginInfos.getElementsByTagName ("userName")[0].firstChild.data;
var loginContext=(loginUserName+" login success.Thank you.");
//獲取表格loginOKTable的welcomeUI文本框並在該文本框追加登錄成功信息window.document.getElementById("welcomeUI").value=loginContext;
//將隱藏表格loginOKTabl以及其中所有組件顯示出來
loginOKTable.style.display="block";
}
else
{
window.alert("Login fail!\nYour loginName or password was not correct "); //登錄失敗提示
}
break;
}
}
else {
window.alert("Error happened on server!");//服務器出現錯誤
}
}
}
創建CheckUserLogin（Servlet）類的內容(服務端：
tringBuffer xmlBuffer = new StringBuffer(
"<?xml version='1.0' encoding='UTF-8'?>");
xmlBuffer.append("<loginInfo>");
xmlBuffer.append("<loginSuccess>");
xmlBuffer.append(isLoginSuccess);
xmlBuffer.append("</loginSuccess>");
if (isLoginSuccess) //如果檢驗成功追加userName標鑑
{
xmlBuffer.append("<userName>");
xmlBuffer.append(userName);
xmlBuffer.append("</userName>");
//獲取HttpSession對象並設置登錄成功值，在其他頁面可以通過此頁面來判斷是否已經登錄成功
HttpSession session = request.getSession(true);
session.setAttribute("loginSuccess", true);
}
xmlBuffer.append("</loginInfo>");
PrintWriter out = response.getWriter();
out.println(xmlBuffer.toString());
out.flush();
out.close();
}
