// 登录页 可直接 tomcat部署 测试
1 package com.itheima.login; 2 3 import java.io.IOException; 4 import java.io.PrintWriter; 5 6 import javax.servlet.ServletException; 7 import javax.servlet.http.Cookie; 8 import javax.servlet.http.HttpServlet; 9 import javax.servlet.http.HttpServletRequest; 10 import javax.servlet.http.HttpServletResponse; 11 12 public class LoginServlet extends HttpServlet { 13 14 public void doGet(HttpServletRequest request, HttpServletResponse response) 15 throws ServletException, IOException { 16 response.setContentType("text/html;charset=UTF-8"); 17 PrintWriter out = response.getWriter(); 18 String userName =""; 19 String checked = ""; 20 //得到客户端保存的Cookie数据 21 Cookie[] cookies = request.getCookies(); 22 for (int i = 0;cookies!=null && i < cookies.length; i++) { 23 if("userName".equals(cookies[i].getName())){ 24 userName = cookies[i].getValue(); 25 checked = "checked='checked'"; 26 } 27 } 28 29 out.write("<form action='"+request.getContextPath()+"/servlet/doLogin' method='post'>"); 30 out.write("用户名:<input type='text' name='userName' value='"+userName+"'/><br/>"); 31 out.write("密码:<input type='password' name='pwd'/><br/>"); 32 out.write("<input type='checkbox' name='remember' "+checked+" />记住用户名<br/>"); 33 out.write("<input type='submit' value='登录'/><br/>"); 34 out.write("</form>"); 35 36 } 37 38 public void doPost(HttpServletRequest request, HttpServletResponse response) 39 throws ServletException, IOException { 40 doGet(request, response); 41 } 42 43 }
登录的Loginservlet 接受登录页表单
package com.itheima.login; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.Cookie; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class DoLoginServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); //获取表单数据 String userName = request.getParameter("userName"); String pwd = request.getParameter("pwd"); String remember = request.getParameter("remember"); Cookie ck = new Cookie("userName", userName); ck.setPath("/"); //处理业务逻辑 //分发转向 if("tom".equals(userName)&&"123".equals(pwd)){ if(remember!=null){ ck.setMaxAge(Integer.MAX_VALUE);//设置Cookie的有效保存时间 }else{ ck.setMaxAge(0);//删除 Cookie } response.addCookie(ck);//将Cookie写回到客户端 out.write("登录成功!"); }else{ out.write("登录失败!"); //设置2秒跳到重新登录 response.setHeader("refresh", "2;url="+request.getContextPath()+"/servlet/login"); } } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
一、什么是Ajax
Ajax:(Asynchronous JavaScript And XML)指异步 JavaScript 及 XML
不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术,是基于JavaScript、XML、HTML、CSS新用法
Ajax:只刷新局部页面的技术
l JavaScript:更新局部的网页
l XML:一般用于请求数据和响应数据的封装
l XMLHttpRequest对象:发送请求到服务器并获得返回结果
l CSS:美化页面样式
l 异步:发送请求后不等返回结果,由回调函数处理结果
JavaScript中XMLHttpRequest对象是整个Ajax技术的核心,它提供了异步发送请求的能力
构造方法
不同浏览器,甚至相同浏览器的不同版本,获取该对象的方式是不同的。
方法:
open() "get|post" ,"url?name=tom" ,"true|false"
send() 发送请求 。可以带参数 或 null
setRequestHeader()
属性
readyState:类型short;只读
responseText:类型String;只读
responseXML:类型Document;只读
status:类型short;只读
事件处理器
onreadystatechange
二、常用方法
方法名 | 说 明 |
open(method,URL,async) | 建立与服务器的连接 method参数指定请求的HTTP方法,典型的值是GET或POST URL参数指请求的地址 async参数指定是否使用异步请求,其值为true或false |
send(content) | 发送请求 content参数指定请求的参数 |
setRequestHeader(header,value) | 设置请求的头信息 |
三、常用属性
l onreadystatechange:指定回调函数
l readyState: XMLHttpRequest的状态信息
就绪状态码 | 说 明 |
0 | XMLHttpRequest对象没有完成初始化 即:刚刚创建。 |
1 | XMLHttpRequest对象开始发送请求 调用了open方法,但还没有调用send方法。请求还没有发出 |
2 | XMLHttpRequest对象的请求发送完成 send方法已经调用,数据已经提交到服务器,但没有任何响应 |
3 | XMLHttpRequest对象开始读取响应,还没有结束 收到了所有的响应消息头,但正文还没有完全收到 |
4 | XMLHttpRequest对象读取响应结束 一切都收到了 |
l status:HTTP的状态码
状态码 | 说 明 |
200 | 服务器响应正常 |
400 | 无法找到请求的资源 |
403 | 没有访问权限 |
404 | 访问的资源不存在 |
500 | 服务器内部错误 |
l responseText:获得响应的文本内容
l responseXML:获得响应的XML文档对象 documednt
注:就绪状态是4而且状态码是200,才可以处理服务器数据
使用Ajax验证用户名是否存在实现步骤:
1、 使用文本框的onBlur事件
2、 使用Ajax技术实现异步交互
a) 创建XMLHttpRequest对象
b) 通过 XMLHttpRequest对象设置请求信息
c) 向服务器发送请求
d) 创建回调函数,根据响应状态动态更新页面
四、案例:实现邮箱验证
my.js
register.jsp
servlet
五、案例2:搜索
1、编写显示数据的容器div
2、实现ajax响应数据
//创建XMLHttpRequest对象
//通过事件调用回调函数处理响应结果,
//创建一个服务器连接
//发送请求
servlet