征服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的格式返回客戶端的。