上QQ阅读APP看书，第一时间看更新
10.2 传统Web应用与Ajax应用对比
基于Ajax的Web应用于传统Web应用的最大优势在于Ajax提供的强大的用户体验。下面使用传统Web应用实现用户登录案例，以及使用Ajax技术实现用户登录，并说明传统Web应用与Ajax应用对比。
10.2.1 传统Web应用实现用户登录
下面使用传统Web应用实现用户登录判断。其代码和以前写的登录代码没有很大的改动。首先新建登录页面，该登录页面同时包含登录表单以及登录结果判断。如果用户登录成功则弹出登录成功提示框，否则弹出登录失败提示框，代码如下所示。
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<html>
<head>
<title>用户登录</title>
</head>
<body>
<%
String result = (String)session.getAttribute("login");
//判断用户是否合法
if(result ! = null && result ! = ""){
if(result.equals("true")){
out.println("<script>window.alert(’登录成功！' )</script>");
}else{
out.println("<script>window.alert(’对不起，登录失败！' )</script>");
}
session.invalidate();
}
%>
<center>
<h2>简单同步登录</h2><hr>
<%--登录表单--%>
<form action="Login" method="post">
<table>
<tr>
<td>用户名：</td>
<%--接收用户输入的用户名，其name属性为uname--%>
<td><input type="text" name="uname"></td>
</tr>
<tr>
<%--接收用户输入的密码，其name属性为upassword--%>
<td>密  ；码：</td>
<td><input type="password" name="upassword"></td>
</tr>
<tr>
<td colspan="2">
<%--登录按钮和重置按钮--%>
<input type="submit" value="登录">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
新建登录判断Servlet，该Servlet通过调用业务逻辑类来判断用户的合法性。如果用户合法，则在session范围中添加属性login，其属性值为true，否则设置其属性值为false，代码如下所示。
package net.hncu.servlet;
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;
import net.hncu.service.LoginCheck;
public class LoginConf extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//接收用户参数
String name = request.getParameter("uname");
String password = request.getParameter("upassword");
//new一个LoginCheck对象
LoginCheck lc = new LoginCheck();
String target = "";
HttpSession session = request.getSession();
//调用业务逻辑组件的判断功能来判断
if(lc.isLogin(name, password)){
//如果为合法用户，在session范围中添加属性login，其属性值为true
session.setAttribute("login", "true");
target = "login.jsp";
}else{
//如果为非法法用户，在session范围中添加属性login，其属性值为false
session.setAttribute("login", "false");
target = "login.jsp";
}
//使用重定向跳转（客户端跳转）
response.sendRedirect(target);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
新建业务逻辑组件，判断用户合法性，代码如下所示。
package net.hncu.service;
public class LoginCheck {
//判断是否为合法用户
public boolean isLogin(String name, String password){
if("xiaoqiang".equals(name)&&"xiaoqiang".equals(password)){
return true;
}else{
return false;
}
}
}
运行登录页面，输入合法的用户信息，单击“登录”按钮进行登录，如图10.5所示。
通过页面进度条可以看出，整个页面在执行刷新操作。同样，当输入非法的用户信息进行提交时，页面同样执行了刷新，如图10.6所示。
图10.5 登录成功
图10.6 登录失败
10.2.2 使用Ajax技术实现用户登录
下面来看如何使用Ajax技术实现用户登录。只需修改建登录判断Servlet，通过判断用户的合法性来输出不同的XML文件代码，代码如下所示。
package net.hncu.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;
import javax.servlet.http.HttpSession;
import net.hncu.service.LoginCheck;
public class LoginConf extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//设置接收信息的字符集
request.setCharacterEncoding("UTF-8");
//接受用户参数
String name = request.getParameter("uname");
String password = request.getParameter("upassword");
//new一个LoginCheck对象
LoginCheck lc = new LoginCheck();
response.setContentType("text/xml; charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
//创建输出流对象
PrintWriter out = response.getWriter();
//依据验证结果输出不同的数据信息
out.println("<response>");
//调用业务逻辑组件的判断功能来判断
if(lc.isLogin(name, password)){
//如果为合法用户
out.println("<date>" + "登录成功！" + "</date>");
}else{
//如果为非法法用户
out.println("<date>" + "对不起，登录失败！" + "</date>");
}
out.println("</response>");
out.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
修改用户登录页，该页面通过XMLHttpRequest对象向服务器发送请求，并处理服务器返回的结果，代码如下所示。
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<html>
<head>
<title>用户登录</title>
</head>
<script language="javascript">
var XMLHttpReq = false;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
//Mozilla 浏览器
if(window.XMLHttpRequest) {
XMLHttpReq = new XMLHttpRequest();
}
// IE浏览器
else if (window.ActiveXObject) {
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
}
//发送请求函数
function sendRequest(url) {
createXMLHttpRequest();
XMLHttpReq.open("GET", url, true);
//指定响应函数
XMLHttpReq.onreadystatechange = processResponse;
// 发送请求
XMLHttpReq.send(null);
}
// 处理返回信息函数
function processResponse() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
var res=XMLHttpReq.responseXML.getElementsByTagName("date")[0].firstChild.data;
window.alert(res);
} else {
window.alert("您所请求的页面有异常。");
}
}
}
// 身份验证函数
function userCheck() {
var uname = document.myform.uname.value;
var psw = document.myform.upassword.value;
if(uname=="" —— upassword=="") {
window.alert("用户名或密码不能为空。");
document.myform.uname.focus();
return false;
}
else {
sendRequest(' Login? uname=' + uname + ' &upassword=' + psw);
}
}
</script>
<body>
<center>
<h2>Ajax异步登陆</h2><hr>
<%--登录表单--%>
<form action="Login" method="post" name="myform">
<table>
<tr>
<td>用户名：</td>
<%--接收用户输入的用户名，其name属性为uname--%>
<td><input type="text" name="uname"></td>
</tr>
<tr>
<%--接收用户输入的密码，其name属性为upassword--%>
<td>密  ；码：</td>
<td><input type="password" name="upassword"></td>
</tr>
<tr>
<td colspan="2">
<%--登录按钮和重置按钮--%>
<input type="button" value="登录" onclick="userCheck()">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
运行登录页面，输入合法的用户信息，单击“登录”按钮进行登录，如图10.7所示。
通过页面进度条可以看出，整个页面并没有在执行刷新操作。页面并没有执行刷新操作，而只是在页面中输出了登录的结果。同样当输入非法的用户信息进行提交，页面同样没有执行刷新，如图10.8所示。
图10.7 登录成功