前置知识
HTML、Java、JavaScript、servlet、tomcat 基础知识
AJAX框架
<html>
<body>
<SCRIPT language="JavaScript">
function findbook(){
// 1、AJAX 实例化浏览器内置对象xmlHttp
var xmlHttp = false;
if(window.XMLHttpRequest){ // Mozilla等浏览器
xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject){
try{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); // IE浏览器
}catch (e) {
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
window.alert("该浏览器不支持AJAX");
}
}
}
var bookname = document.addbookform.bookname.value;
var url = "servlets/FindBook?bookname="+bookname;
// 2、指定异步提交的目标和提交方式
xmlHttp.open("POST",url,true);
// xmlHttp.open("GET","showbooks.jsp",true);
// 3、指定当xmlHttp状态改变时需要进行的处理
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
booklist.innerHTML=xmlHttp.responseText;
}
else{
booklist.innerHTML+="正在搜索,请稍后......"
}
}
// 4、发出请求
xmlHttp.send();
}
</SCRIPT>
<form name="addbookform">
书名:<input type="text" name="bookname"><br>
<input type="button" value="查询" onclick="findbook()"><br>
</form>
<div id="booklist"></div>
</body>
</html>
在请求过程中,xmlHttp的状态不断改变,其状态保存在xmlHttp的readyState属性中,用xmlHttp.readyState表示:
- 0:未初始化状态,对象已创建,尚未调用 open()
- 1:已初始化状态,调用 open() 方法以后
- 2:发送数据状态,调用 send() 方法以后
- 3:数据传送中状态,已经接收到部分数据,但接收尚未完成
- 4:完成状态,数据全部接收完成。
AJAX实例
使用AJAX的 登录表单验证 简单案例
以登录界面为例,首先编写登录页面 login.jsp
如果登录成功,则界面显示登录成功后的页面
如果登录失败,则界面显示登录失败后的页面
在登录时,浏览器窗口不刷新,浏览器地址栏上的地址不变,网页上其他部分的浏览不受影响。
文件结构
![](https://i-blog.csdnimg.cn/blog_migrate/2ba2be7736ffbef1ddf5962fdfa44535.png#pic_center)
代码编写
登录页面 login.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" import="java.util.*" %>
<html>
<head>
<title>登录</title>
</head>
<body>
<SCRIPT language="JavaScript">
function login(){
var xmlHttp = false;
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject){
try{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
window.alert("该浏览器不支持AJAX");
}
}
}
var account = document.loginForm.account.value;
var password = document.loginForm.password.value;
var url = "http://localhost:8080/pro/servlets/LoginServlet?account="+account+"&password="+password;
xmlHttp.open("POST",url,true);
// xmlHttp.open("GET","loginSuccess.jsp",true);
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
resultDiv.innerHTML=xmlHttp.responseText;
}
else{
resultDiv.innerHTML+="正在登录,请稍后......"
}
}
xmlHttp.send();
}
</SCRIPT>
欢迎登录学生管理系统.<hr>
<div id="resultDiv">
<form name="loginForm">
请你输入账号:<input type="text" name="account"><br>
请你输入密码:<input type="password" name="password"><br>
<input type="button" onclick="login()" value="登录">
</form>
</div>
</body>
</html>
登录成功页面 loginSuccess.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>登录成功</title>
</head>
<body>
欢迎${account}登录成功!<br>
您可以选择以下功能:<br>
<a href="">查询学生</a>
<a href="">修改学生资料</a>
<a href="">退出</a>
</body>
</html>
登录失败页面 loginFail.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>登录失败</title>
</head>
<body>
对不起,登录失败!<br>
请你检查是否写错<br>
账号名写错<br>
密码写错
</body>
</html>
servlet 登录验证代码 LoginServlet.java
package servlets;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
public class LoginServlet extends HttpServlet{
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String account = req.getParameter("account");
String password = req.getParameter("password");
String loginState = "Fail";
String targetUrl = "/loginFail.jsp";
// 简化的登录验证,对DAO的简化
if(account.equals(password)){
loginState="Success";
targetUrl="/loginSuccess.jsp";
HttpSession session = req.getSession();
session.setAttribute("account",account);
}
req.setAttribute("loginState",loginState);
ServletContext application = this.getServletContext();
RequestDispatcher rd = application.getRequestDispatcher(targetUrl);
rd.forward(req,resp);
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
}
web.xm文件配置
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<servlet>
<servlet-name>LoginServlet</servlet-name>
<servlet-class>servlets.LoginServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>LoginServlet</servlet-name>
<url-pattern>/servlets/LoginServlet</url-pattern>
</servlet-mapping>
</web-app>
网页效果
登录界面
![](https://i-blog.csdnimg.cn/blog_migrate/93ed16d9e2747a08d95fbc0763a612ea.png#pic_center)
当账号和密码相同时,认为登录成功,显示登录成功界面,但浏览器窗口不刷新,地址栏不变
![](https://i-blog.csdnimg.cn/blog_migrate/f6b7fe340cd1e6a9eecbe4509c49d13a.png#pic_center)
当账号和密码不相同时,认为登录失败,显示登录失败界面,但浏览器窗口不刷新,地址栏不变
![](https://i-blog.csdnimg.cn/blog_migrate/784cf90898eb003203a6788e0aa0e0fa.png#pic_center)