“e拍”在线拍卖系统 的项目的案例6.pptVIP

项目案例6 “e拍”在线拍卖系统（四） 问题描述 使用AJAX技术升级用户登录功能 在不刷新页面的情况下登录 功能不变： 用户名、密码正确，提示“登录成功”，刷新登录区域，显示登录后的内容 用户名、密码不正确，提示错误，重新登录 问题分析-1 Ajax代码框架 问题分析-2 服务器端代码 难点分析-1 处理返回结果 阶段划分 第一阶段（20分钟） 修改UserAction的doLogin方法 第二阶段（25分钟） 编写页面Ajax代码 第三阶段（25分钟） 处理返回结果 第一阶段 第一阶段（20分钟） 修改UserAction的doLogin方法 要求学员自己动手操作，教员巡视，解答学员提出的问题 阶段检查 针对第一阶段抽查学员的操作结果 教员给出点评或集中演示难点部分 第一阶段结果演示 第一阶段操作的结果： 通过浏览器访问，在URL中传入username和password参数，正确则提示：“登录成功”，否则提示错误 第二阶段 第二阶段（25分钟） 编写页面Ajax代码 要求学员自己动手编写代码，教员巡视，解答学员提出的问题 阶段检查 针对第二阶段抽查学员的编码结果 教员给出点评或集中演示难点部分 第二阶段结果演示 最终效果 点输入用户名、密码，点登录，弹出提示信息 第三阶段 第三阶段（25分钟）： 处理返回结果 要求学员自己动手编写代码，教员巡视，解答学员提出的问题 阶段检查 针对第三阶段抽查学员的编码结果 抽查学员编写的完整代码，要求学员上台讲解，并演示运行结果 教员给出点评 第三阶段标准代码演示 处理返回结果 总结 巩固的知识点： Ajax 得到页面控件数据 异步发送请求 处理返回结果 * * * * * * var xmlHttpRequest; function createXmlHttpRequest(){ ... } function doLogin(){ var usr = document.getElementById(usr); var pwd = document.getElementById(pwd); var url = user.do?operate=doLoginusername= + 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 得到返回字符串并处理 // 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(用户名或密码错误，登陆失败！); }