核心提示:案例 4-3 Ajax 的响应处理 在 Eclipse 中新建一个项目,项目的名称为 P43_Response 。首先,新建一个 HTML 文档,页面名称为 login.jsp 。 该页面实现的效果如图 4-5 所示。用户输入对应的登录信息,单击登录按钮,页面中将显示登录是否成功的提示信息。 图
案例4-3 Ajax的响应处理 在Eclipse中新建一个项目,项目的名称为“P43_Response”。首先,新建一个HTML文档,页面名称为“login.jsp”。 该页面实现的效果如图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="登录" onclick="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./xml/ns/j2ee" xmlns:xsi="http://www./2001/XMLSchema-instance" xsi:schemaLocation="http://java./xml/ns/j2ee http://java./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的格式返回客户端的。 |
|