???? 已经有一年半没有从事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();
}
?
?