案例4-3 Ajax的響應(yīng)處理
在Eclipse中新建一個(gè)項(xiàng)目，項(xiàng)目的名稱為“P43_Response”。首先，新建一個(gè)HTML文檔，頁面名稱為“login.jsp”。 該頁面實(shí)現(xiàn)的效果如圖4-5所示。用戶輸入對應(yīng)的登錄信息，單擊“登錄”按鈕，頁面中將顯示登錄是否成功的提示信息。
對應(yīng)的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;
//創(chuàng)建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) {}
}
}
}
//發(fā)送請求函數(shù)
function sendRequest(url) {
createXMLHttpRequest();
XMLHttpReq.open("GET", url, true);
XMLHttpReq.onreadystatechange = processResponse;//指定響應(yīng)函數(shù)
XMLHttpReq.send(null); // 發(fā)送請求
}
// 處理返回信息函數(shù)
function processResponse() {
if (XMLHttpReq.readyState == 4) { // 判斷對象狀態(tài)
if (XMLHttpReq.status == 200) { // 信息已經(jīng)成功返回，開始處理信息
var res=XMLHttpReq.responseText;
window.alert(res);
} else { //頁面不正常
window.alert("您所請求的頁面有異常。");
}
}
}
// 身份驗(yàn)證函數(shù)
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="登錄" onclick="userCheck()" >
</form>
在上面的頁面中，當(dāng)用戶輸入用戶名及密碼信息，單擊“登錄”按鈕后，將調(diào)用“userCheck()”函數(shù)，在該函數(shù)中將首先獲取用戶填寫的信息，進(jìn)行最基本的數(shù)據(jù)有效性檢查，如果檢查通過，將借助Ajax發(fā)送請求，并等待服務(wù)器端的響應(yīng)，一旦接收到服務(wù)器端的響應(yīng)數(shù)據(jù)，則通過LHttpReq.responseText返回對應(yīng)的數(shù)據(jù)信息，然后顯示在提示窗口中。
該Web應(yīng)用的配置文件web.xml對應(yīng)的代碼如下所示。從該配置文件中可以了解到，當(dāng)瀏覽器端提交“login”請求，服務(wù)器端類名為“classmate.LoginAction”的Servlet程序進(jìn)行處理。
<?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>
下面關(guān)注一下服務(wù)器端Servlet程序LoginAction.java中對應(yīng)的程序代碼。當(dāng)接收到瀏覽器端提交的請求后，Servlet程序?qū)⑹紫全@取瀏覽器端提交的用戶名及密碼信息，然后進(jìn)行身份驗(yàn)證，本例中為了關(guān)注Ajax，沒有引入與數(shù)據(jù)庫相關(guān)的操作。
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 {
//設(shè)置接收信息的字符集
request.setCharacterEncoding("UTF-8");
//接收瀏覽器端提交的信息
String uname = request.getParameter("uname");
String psw = request.getParameter("psw");
//設(shè)置輸出信息的格式及字符集
response.setContentType("text/xml; charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
//創(chuàng)建輸出流對象
PrintWriter out = response.getWriter();
//依據(jù)驗(yàn)證結(jié)果輸出不同的數(shù)據(jù)信息
if(uname.equals("jenny") && psw.equals("hi")){
out.println("熱烈的歡迎您!");
}else{
out.println("對不起,登錄失??！");
}
out.close();
}
}
如果驗(yàn)證通過，將返回“熱烈的歡迎您！”的提示，如果驗(yàn)證失敗，將顯示“對不起，登錄失??！”的信息，信息是以responseText的格式返回客戶端的。
聯(lián)系客服
