征服Ajax——Web 2.0快速入门与项目实践（Java）
案例4-3 Ajax的响应处理
在Eclipse中新建一个项目，项目的名称为“P43_Response”。首先，新建一个HTML文档，页面名称为“login.jsp”。 该页面实现的效果如图4-5所示。用户输入对应的登录信息，单击“登录”按钮，页面中将显示登录是否成功的提示信息。
图4-5 登录验证的效果
对应的Web页面的代码如下：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
</head>
<script language="javascript">
var XMLHttpReq = false;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if(window.XMLHttpRequest) { //Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
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.responseText;
window.alert(res);
} else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
// 身份验证函数
function userCheck() {
var uname = document.myform.uname.value;
var psw = document.myform.psw.value;
if(uname=="") {
window.alert("用户名不能为空。");
document.myform.uname.focus();
return false;
}
else {
sendRequest('login?uname='+ uname + '&psw=' + psw);
}
}
</script>
<body vLink="#006666" link="#003366" bgColor="#E0F0F8">
<img height="33" src="enter.gif" width="148">
<form action="" method="post" name="myform">
用户名： <input size="15" name="uname"><p>
密 码： <input type="password" size="15" name="psw"><p>
<input type="button" value="登录" οnclick="userCheck()" >
</form>
在上面的页面中，当用户输入用户名及密码信息，单击“登录”按钮后，将调用“userCheck()”函数，在该函数中将首先获取用户填写的信息，进行最基本的数据有效性检查，如果检查通过，将借助Ajax发送请求，并等待服务器端的响应，一旦接收到服务器端的响应数据，则通过LHttpReq.responseText返回对应的数据信息，然后显示在提示窗口中。
该Web应用的配置文件web.xml对应的代码如下所示。从该配置文件中可以了解到，当浏览器端提交“login”请求，服务器端类名为“classmate.LoginAction”的Servlet程序进行处理。
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<servlet-name>ms1</servlet-name>
<servlet-class>classmate.LoginAction</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ms1</servlet-name>
<url-pattern>/login</url-pattern>
</servlet-mapping>
<!-- The Welcome File List -->
<welcome-file-list>
<welcome-file>login.jsp</welcome-file>
</welcome-file-list>
</web-app>
下面关注一下服务器端Servlet程序LoginAction.java中对应的程序代码。当接收到浏览器端提交的请求后，Servlet程序将首先获取浏览器端提交的用户名及密码信息，然后进行身份验证，本例中为了关注Ajax，没有引入与数据库相关的操作。
package classmate;
import java.io.IOException;
……
public class LoginAction extends HttpServlet {
public void init(ServletConfig config) throws ServletException {
}
/*
* 处理<GET> 请求方法
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//设置接收信息的字符集
request.setCharacterEncoding("UTF-8");
//接收浏览器端提交的信息
String uname = request.getParameter("uname");
String psw = request.getParameter("psw");
//设置输出信息的格式及字符集
response.setContentType("text/xml; charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
//创建输出流对象
PrintWriter out = response.getWriter();
//依据验证结果输出不同的数据信息
if(uname.equals("jenny") && psw.equals("hi")){
out.println("热烈的欢迎您!");
}else{
out.println("对不起,登录失败！");
}
out.close();
}
}
如果验证通过，将返回“热烈的欢迎您！”的提示，如果验证失败，将显示“对不起，登录失败！”的信息，信息是以responseText的格式返回客户端的。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
