施用最原始AJAX与Java Servlet实现无刷新的登录系统
日期：2014-05-16 浏览次数：20685 次
???? 已经有一年半没有从事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");
?????? /
