- AjaxAnywhere
- 读者可以从AjaxAnywhere的官方网站下载demo演示包,它是一个war工程包,可以直接部署在5.0以上版本的Tomcat服务器上。演示包中包含十二个AjaxAnywhere应用案例,包括级联的下拉列表、Web选项卡应用、JSF集成等,其部署到Tomcat后的首页效果如图11-28所示。
- 演示包中不涉及JSF的案例全部都是用单纯的JSP代码编写的,或者内嵌在JSP页面中的Java代码块。虽然从MVC分离的角度看这种方式不尽合理,不过可以使案例尽量简单,不依赖于任何的MVC框架。AjaxAnywhere本身对此并无要求。
- 而且,其中全部的JSP页面中的表单都提交到页面本身,比如,忽略form的action属性。在实际的应用程序中,可以将表单提交到任何URL中,只要保证这个URL最终将导向(forward,不是redirect)包含指定刷新区域的JSP页面。
- 接下来将AjaxAnywhere部署到本章的开发目录中,并且用AjaxAnywhere改造一下案例1数据校验。复制ajaxanywhere-1.1.0.6.jar到{APPLICATION_HOME}\webapps\ WEB-INF\lib文件夹,复制aa.js到AjaxCh11文件夹。修改案例1中例程6-5的sample6_2.jsp如例程11-37所示。
- 例程11-37 修改后的数据校验ajaxRegister.jsp
- <%@ page contentType="text/html; charset=gb2312"%>
- <%@ page import="com.ajaxlab.ajax.*"%>
- <%@ taglib uri="http://ajaxanywhere.sourceforge.net/" prefix="aa" %>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
- <title>Ch11——案例:数据校验</title>
- <link href="../css/style.css" rel="stylesheet" type="text/css">
- <script language="javascript" src="aa.js"></script>
- <script language="javascript">
- ajaxAnywhere.formName = "form1";
- ajaxAnywhere.getZonesToReload = function() {
- return "feedback_info";
- }
- function doCheck() {
- var f = document.forms[0];
- if((f.username.value!="")||(f.email.value!="")) {
- if(f.email.value!="") {
- var pattern = /^[\w\.\-\_]+@{1}\w+(\.{1}\w+)+$/;
- var result = pattern.exec(f.email.value);
- if(result==null) window.alert("电子邮件格式错误,请按标准email名称格式填写,如:hello@sohu.com。");
- }
- f.action = "ajaxRegister.jsp";
- ajaxAnywhere.submitAJAX();
- }
- }
- function formSubmit() {
- var f = document.forms[0];
- f.action = "login.jsp";
- f.submit();
- }
- </script>
- </head>
- <body><center>
- <form name="form1" method="post" action="login.jsp">
- <table width="500" border="0" cellspacing="0" cellpadding="4">
- <caption>用户注册</caption>
- <tr>
- <td width="70">用户名称:</td>
- <td width="414"><input name="username" type="text" class="f orm_ text" id="username" size="40">
- <input name="userCheck" type="button" class="button" id= " userCheck" value="惟一性检查" onClick="doCheck()">
- </td>
- </tr>
- <tr>
- <td>密码:</td>
- <td><input name="password" type="password" class="form_tex t" id="password" size="40"></td>
- </tr>
- <tr>
- <td>电子邮件:</td>
- <td><input name="email" type="text" class="form_text" id= "email" size="40">
- <input name="emailCheck" type="button" class="button" id= "emailCheck" value="惟一性检查" onClick="doCheck()">
- </td>
- </tr>
- <tr>
- <td colspan="2">
- <font color="#FF0000">
- <aa:zone name="feedback_info">
- <%
- String username = request.getParameter("username");
- String email = request.getParameter("email");
- UserService service = new UserService();
- if((username!=null)&&(!"".equals(username))) {
- UserValue user = service.findUserByName(username);
- if(user!=null) out.println("用户名称["+username+"]已经被注册,请更换其他用户名称再注册。<br>");
- else out.println("用户名称["+username+"]尚未被注册,您可以继续。<br>");
- }
- if((email!=null)&&(!"".equals(email))) {
- UserValue user = service.findUserByEmail(email);
- if(user!=null) out.println("电子邮件["+email+"]已经被注册,请更换其他用户名称再注册。");
- else out.println("电子邮件["+email+"]尚未被注册,您可以继续。");
- }
- %>
- </aa:zone>
- </font>
- </td>
- </tr>
- <tr align="center">
- <td colspan="2"><input name="Submit" type="submit" class= "button" value="提交" onClick="formSubmit();return false;"></td>
- </tr>
- </table>
- </form>
- </center>
- </body>
- </html>
- 例程11-37引用了AjaxAnywhere的Javascript库文件aa.js,并设置AjaxAnywhere对象的formName为form1,重载其getZonesToReload方法指定更新区域为feedback_info。事件处理函数doCheck()调用AjaxAnywhere对象的submitAJAX()方法,向服务器提交Ajax请求,并进行数据校验。页面上则使用了<aa:zone name="feedback_info"></aa:zone>标签指定原来<label>标记所定义的区域为页面可刷新区域,该标签最终被解析成<span id="feedback_ info"></span>。原来在register.jsp中的数据校验逻辑也整合到ajaxRegister.jsp中了。当单击“惟一性检查”按钮的时候,AjaxAnywhere向服务器提起数据校验请求,随后将校验结果显示在可刷新区域feedback_info
ajaxanywhere
最新推荐文章于 2018-08-31 10:16:45 发布