ajaxanywhere

最新推荐文章于 2018-08-31 10:16:45 发布

yh3301

最新推荐文章于 2018-08-31 10:16:45 发布

阅读量1k

点赞数

分类专栏： HTML/CSS/JS 文章标签： email javascript stylesheet button jsp input

HTML/CSS/JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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