Java EE中Ajax技术实例_H5之家 - 中国HTML5教程资源分享第一站

下面，我们使用Ajax技术实现登录验证问题：

首先，我们需要知道，基本的页面是：首页面（Login.jsp）、登陆成功页面（LoginSuccess.jsp）、登录失败页面(LoginFail.jsp)、Servlet判断代码(LoginServlet.java)

其中，Login.jsp页面代码如下所示：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">　　<html>　　<body>　　<SCRIPT LANGUAGE="JavaScript"> function login() { var user = document.loginForm.user.value;//获取表单中的值 var pass = document.loginForm.pass.value; var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");//初始化IE浏览器，即步骤一 var url = "./LoginServlet?user=" + user + "&pass=" + pass; xmlHttp.open("post", url, true); xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState === 4) { resultDiv.innerHTML = xmlHttp.responseText; } else { resultDiv.innerHTML += "正在登录，请稍候……"; } }; xmlHttp.send(); } </SCRIPT>　　 <marquee>欢迎登录资料管理系统</marquee><hr>　　 <div id="resultDiv" style="text-align:center">　　<form name="loginForm">　　请您输入账号：<input type="text" name="user"><BR>　　请您输入密码：<input type="password" name="pass"><BR>　　<input type="button" value="登录" onclick="login()">　　</form>　　</div>　　</body>　　</html>

LoginSuccess.jsp页面代码如下所示：

<%@ page language="java" contentType="text/html; charset=utf-8"%>　　<html>　　<body><div font="楷体">欢迎${user}登录成功！</div><BR><hr> 您可以选择以下功能：<BR>　　<a href="#">查询资料</a><BR>　　<a href="#">修改资料</a><BR>　　<a href="#">删除资料</a><BR>　　<a href="#">退出</a><BR>　　</body>　　</html>

LoginFail.jsp页面代码如下所示：

<%@ page language="java" contentType="text/html; charset=utf-8"%>　　<html>　　<body>　　对不起，${user}登录失败！<BR>　　请您检查是否：账号名或密码写错　　</body>　</html>

Servlet验证代码LoginSuccess.java，在该Servlet中，进行了数据验证，如果登录成功，跳转到LoginSuccess.jsp,登录失败，跳转到LoginFail.jsp代码如下所示：

package servlets;//包名称import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;public class LoginServlet extends HttpServlet { protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); //设置编码为UTF-8 String user=request.getParameter("user");//在控制台打印用户名和密码 String pass=request.getParameter("pass"); System.out.println("user:"+user); System.out.println("pass:"+pass); HttpSession session=request.getSession();//使用Session保存用户名，用于登录成功之后显示用户名 session.setAttribute("user",user); if(user.equals(pass))//进行简单的验证 { response.sendRedirect("LoginSuccess.jsp"); } else { response.sendRedirect("LoginFail.jsp"); } } // <editor-fold defaultstate="collapsed" desc="HttpServlet methods. Click on the + sign on the left to edit the code."> /** * Handles the HTTP <code>GET</code> method. * * @param request servlet request * @param response servlet response * @throws ServletException if a servlet-specific error occurs * @throws IOException if an I/O error occurs */ @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } /** * Handles the HTTP <code>POST</code> method. * * @param request servlet request * @param response servlet response * @throws ServletException if a servlet-specific error occurs * @throws IOException if an I/O error occurs */ @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } /** * Returns a short description of the servlet. * * @return a String containing servlet description */ @Override public String getServletInfo() { return "Short description"; }// </editor-fold>}

以上就是各部分代码，其实现效果如下面所示：

1、登录界面