《Ajax开发精要》关于ajaxanywhere 教程六
来源:互联网 发布:ipad乐器软件 编辑:程序博客网 时间:2024/05/28 18:45
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>
<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,如图11-29所示。
图11-29 用AjaxAnywhere改造后的数据校验
- 《Ajax开发精要》关于ajaxanywhere 教程六
- 《Ajax开发精要》关于ajaxanywhere 教程一
- 《Ajax开发精要》关于ajaxanywhere 教程二
- 《Ajax开发精要》关于ajaxanywhere 教程三
- 《Ajax开发精要》关于ajaxanywhere 教程四
- 《Ajax开发精要》关于ajaxanywhere 教程五
- 《Ajax开发精要》关于ajaxanywhere 教程七
- Ajaxanywhere
- ajaxanywhere
- 《软件开发技能实训教程 .NET篇》 - 书摘精要
- Ajax.net系列教程六:使用PopupControlExtender
- jQuery 教程 (六) AJAX快餐 .NET
- jQuery 教程 (六) AJAX快餐2 .NET
- Android 日历开发教程[六]
- AJAX教程系列六:ajax无刷新上传
- 关于ajax开发
- Android开发精要
- Androiod 开发精要 笔记
- ORACLE分页查询SQL语法
- 主题:[CSS HACK]IE6、IE7、IE8、Firefox兼容性问题
- 《Ajax开发精要》关于ajaxanywhere 教程五
- 软通
- 搜索自动完成功能的优化 分析篇
- 《Ajax开发精要》关于ajaxanywhere 教程六
- 《Ajax开发精要》关于ajaxanywhere 教程七
- C程序100实例之八
- java内存泄漏原因、判定及解决方法
- java内存泄漏原因、判定及解决方法
- [资源]汇编资源网站收录
- javascript学习笔记《一》
- cobit成功案例
- Linux设备驱动程序学习