《Ajax开发精要》关于ajaxanywhere 教程六 -

yuanfen860913

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

最近访客更多访客>>

jveqi

aa283818932

wangyy

u012363178

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (136)

社区版块

存档分类

《Ajax开发精要》关于ajaxanywhere 教程六

Ajax JSP JSF JavaScript CSS

11.3.4 试用AjaxAnywhere

读者可以从AjaxAnywhere的官方网站下载demo演示包，它是一个war工程包，可以直接部署在5.0以上版本的Tomcat服务器上。演示包中包含十二个AjaxAnywhere应用案例，包括级联的下拉列表、Web选项卡应用、JSF集成等，其部署到Tomcat后的首页效果如图11-28所示。

图11-28 AjaxAnywhere演示包

演示包中不涉及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>

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>

<tr>

</td>

</tr>

<tr>

</tr>

<tr>

</td>

</tr>

<tr>

<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>

</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，如图11-29所示。