本案例主要用AJAX技术实现无刷新登录
login.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<title>用AJAX技术实现无刷新登录</title>
<script type="text/javascript">
var XMLHttpRequest = false;
//4.创建XMLHttpRequest对象
function createXMLHttpRequest() {
//创建XMLHttpRequest对象
if (window.XMLHttpRequest) {
//IE7,IE8,FireFox,Mozillar,Opera浏览器
xmlHttpReq = new XMLHttpRequest();
//当头的设置不是text/xml形式时，则要重新设置为text/xml
if (xmlHttpReq.overrideMimeType) {
xmlHttpReq.overrideMimeType("text/xml");
}
} else if (window.ActiveXObject) {
//IE6,IE5,IE5.5,因为所有浏览器都是基于ActiveXObject所以放置在后面实现效能会好些
var activexName = [ "MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP",
"Miscrosoft.XMLHTTP" ];
for ( var i = 0; i < activexName.length; i++) {
try {
xmlHttpReq = new ActiveXObject(activexName[i]);
break;//一但创建成功就不需要再进行判断
} catch (e) {
//异常不需要处理
}
}
}
}
//3.用于发送请求数据
function sendRequest(url) {
//调用创建XMLHttpReqeust对象的函数
createXMLHttpRequest();
alert(url);
xmlHttpReq.open("GET", url, true);
//调用回调函数(当状态发生改变时调用回调函数)
xmlHttpReq.onreadystatechange = proccessReqeust;
//发送请求
xmlHttpReq.send(null);
}
//2.创建回调函数
function proccessReqeust() {
//根据状态
alert("当前状态为:" + xmlHttpReq.readyState);
//判断对象状态
if (xmlHttpReq.readyState == 4) {
//判断响应是否成功
if (xmlHttpReq.status == 200) {
//1、以XML接收响应数据
var respInfomation = xmlHttpReq.responseXML
.getElementsByTagName("res")[0].firstChild.data;
//2、以文本方式接收返回数据
//var respInfomation = xmlHttpReq.responseText;
alert(respInfomation);
} else {
alert("响应异常");
}
}
}
//1.得到表单信息
function sendInfo() {
var username = form1.username.value;
var password = form1.password.value;
sendRequest('checkLogin?username=' + username + '&password=' + password);
}
</script>
</head>
<body>
<form action="checkLogin" method="post" name="form1">
<table align="center" border="1">
<tr>
<td colspan="2" align="center">
<H1>
请登录
</H1>
</td>
</tr>
<tr>
<td>
用户名：
</td>
<td>
<input type="text" name="username" />
</td>
</tr>
<tr>
<td>
密 码：
</td>
<td>
<input type="text" name="password" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="登录" onClick="sendInfo()" />
<input type="reset" value="重置" />
</td>
</tr>
</table>
</form>
</body>
</html>
CheckLoginServlet
package com.LJ.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class CheckLoginServlet extends HttpServlet {
/**
* 提供一个Servlet独有的ID
*/
private static final long serialVersionUID = 6991271447420179202L;
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//设置请求和响应的编码格式
request.setCharacterEncoding("UTF-8");
//设置响应格式应为XML
response.setContentType("text/xml;charset=UTF-8");
response.setHeader("Cache-Control","no-cache");
//得到表单提交过来的用户名跟密码
PrintWriter out = response.getWriter();
out.println("<respData>");
String username = request.getParameter("username");
String password = request.getParameter("password");
//验证结果并做出相应的响应
if("LJ".equals(username) && "LJ".equals(password)){
//转发（用不了）
//request.getRequestDispatcher("index.jsp").forward(request,response);
// out.println("<script>alert('登录成功');</script>");
out.println("<res>" + "登录成功" + "</res>");
}else{
//重定向（用不了）
//response.sendRedirect("login.jsp");
// out.println("<script>alert('登录失败');</script>");
out.println("<res>" + "登录失败" + "</res>");
}
out.println("</respData>");
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}
web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <!-- 配置登陆时的servlet --> <servlet> <servlet-name>checkLoginServlet</servlet-name> <servlet-class>com.LJ.servlet.CheckLoginServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>checkLoginServlet</servlet-name> <url-pattern>/checkLogin</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>
index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<title>用AJAX实现登录后成功页面</title>
</head>
<body>
<h1>登录成功</h1>
</body>
</html>