AjaxAnywhere

kidiaoer

浏览: 822589 次
性别:
来自: 深圳

最近访客更多访客>>

nandyweb

lehmann_ding

dniahf

wxn_yxm

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

iteye AjaxAnywhere

AjaxAnywhere

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

分享到：