项目案例 6
“e 拍”在线拍卖系统（四）
问题描述
使用 AJAX 技术升级用户登录功能
在不刷新页面的情况下登录
功能不变：
用户名、密码正确，提示“登录成功”，刷新登录区域，显示登录后的
内容
用户名、密码不正确，提
示错误，重新登录
问题分析 -1
Ajax 代码框架
var xmlHttpRequest;
function createXmlHttpRequest(){ ... }
function doLogin(){
var usr = document.getElementById("usr");
var pwd = document.getElementById("pwd");
var url = "user.do?operate=doLogin&username=" + usr.value +
"&password=" + pwd.value;
xmlHttpRequest = createXmlHttpRequest();
xmlHttpRequest.onreadystatechange = haoLeJiaoWo;
xmlHttpRequest.open("GET",url,true);
xmlHttpRequest.send(null);
}
function haoLeJiaoWo(){
if(xmlHttpRequest.readyState == 4){
if(xmlHttpRequest.status == 200){
var str = xmlHttpRequest.responseText;
// 在这儿处理返回结果
}
}
}
从输入框中取值
请求 URL
得到返回字符串并处理
问题分析 -2
服务器端代码
// UserAction 中 doLogin 方法
public ActionForward doLogin( ... ) {
request.getSession().removeAttribute("user");
String username = request.getParameter("username");
String password = request.getParameter("password");
User item = this.userBiz.login(username, password);
if (null!=item &&
item.getUserStatus()!=UserBiz.USER_STATUS_FORBID){
// 登录成功
request.getSession().setAttribute("user", item);
response.setCharacterEncoding("GBK");
response.getWriter().printf(" 登录成功 ");
}else{
response.setCharacterEncoding("GBK");
response.getWriter().printf(" 用户名或密码错误，登陆失败！ ");
}
return null;
}
直接返回字符串
难点分析 -1
处理返回结果
var str = xmlHttpRequest.responseText;
alert(str);
if (" 登录成功 "==str){
document.getElementById("spUsername").innerText = curUserN
ame;
document.getElementById("dvLogin").style.display = "none";
document.getElementById("dvOnline").style.display = "block";
}
登录框和登录后显示内容放在两
个 <div> 中，一个隐藏，一个显
示
