AjaxAnyWhere+Struts的一个应用(demo/feature crew)

本文介绍AjaxAnywhere框架,一种简化AJAX应用开发的技术。通过自定义标签库实现页面分区刷新,无需大量JavaScript编码。支持多种浏览器,可平滑集成到现有JSP项目中。
[list]
[*]AjaxAnywhere介绍:
[/list]
[color=blue]AjaxAnywhere, 是能够把任何一套现存的JSP组件转换成AJAX感知组件而不需要复杂的JavaScript编码.它利用标签把Web页面简单地划分成几个区域,然后使用AjaxAnywhere来刷新那些需要被更新的区域. AjaxAnywhere 并不需要大规模修改原来的既有代码. 相对来说, 比较容易实现. 并且并没有把你的程序和AJAX绑定到一起. 即使是一些不支持AJAX的浏览器,也还可以正常地工作。[/color] [url=http://ajaxanywhere.sourceforge.net/]下载地址[/url]

[list]
[*]AjaxAnywhere使用"分区刷新"的思路,其工作原理如下。
[/list]
[color=red]★ [/color][color=blue]使用AjaxAnywhere自定义标签库将一个Web页面划分为几个可重载的区域(reload-capable zones)。[/color]

[color=red]★ [/color][color=blue]使用AjaxAnywhere Javascript 应用编程接口(API)替代传统通信机制下表单提交方式。[/color]

[color=red]★ [/color][color=blue]当请求在服务器端处理的时候,决定那些页面区域可以刷新(refresh)。这个过程可以使用基于客户端的Javascript或者基于服务器端的AjaxAnywhere应用编程接口(API)。 [/color]

[color=red]★ [/color][color=blue]在服务器端,AjaxAnywhere会生成包含即将更新的HTML代码的XML文档。[/color]

[color=red]★ [/color][color=blue]在客户端,AjaxAnywhere Javascript接受这个XML文档,解析文档,并更新指定的页面区域。[/color]


[list]
[*]技术选型(模型)优势
[/list]
[color=green]★ [/color][color=blue]无须掌握和开发那么多的Javascript代码。

由于缺乏被广泛接受的命名习惯、格式化规则和模式,使得Javascript编码相对Java/JSP复杂许多,尤其在浏览器兼容性方面缺乏有效的调试和单元测试手段。使用AjaxAnywhere可以摆脱这些Javascript的复杂性。[/color]

[color=green]★ [/color][color=blue]方便集成。

使用AjaxAnywhere无须改变底层的应用程序代码。[/color]

[color=green]★ [/color][color=blue]降低技术风险。

可以随时在传统的通信机制和Ajax之间切换,允许Web应用程序同时支持两种通信机制。[/color]

[color=green]★ [/color][color=blue]平滑的兼容性。

再也不用在使用Ajax还是传统的交互方式间摇摆了,使用Ajax AnyWhere的Web应用程序可以兼容两种请求方式。

AjaxAnywhere的客户端脚本经过了IE,Mozilla Firefox和Opera等浏览器的兼容性测试,能够最大程度地保证代码的浏览器兼容性。[/color]


[list]
[*]部分注意事项
[/list]
[color=blue]需要注意的AjaxAnywhere特性是,Ajax接收到的Ajax代码采用特殊的方式处理。AjaxAnywhere通过eval("")的方式执行这些Javascript代码,也可以将所定义的Javascript函数保存在适当的上下文(Context)中。不过,在允许Ajax方式重载的页面区域,不允许执行document.write()之类的Javascript语句。

允许重载的区域可能在提交请求之前就确定了,这种情况下需要重载客户端的AjaxAnywhere.getZonesToReload()的Javascript函数,不需要额外的服务器逻辑处理。

如果希望AjaxAnywhere重载整个文档,则重载后的AjaxAnywhere.getZonesToReload()函数必须返回“document.all”字符串,也可以在服务器端调用AAUtils.setRefreshAll(true)刷新整个页面。

相应的,Ajax请求中的response.sendRedirect()会被转化成Javascript代码的location.replace()命令。 [/color]


下面看Demo:
配置web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="2.4"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee <a href="http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" target="_blank" rel="nofollow">http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd</a>">

<welcome-file-list>
<welcome-file>list.jsp</welcome-file>
</welcome-file-list>

<filter>
<filter-name>SetCharacterEncoding</filter-name>
<filter-class>com.filter.EncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
</filter>

<filter-mapping>
<filter-name>SetCharacterEncoding</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>

<filter>
<filter-name>AjaxAnywhere</filter-name>
<filter-class>org.ajaxanywhere.AAFilter</filter-class>
</filter>

<filter-mapping>
<filter-name>AjaxAnywhere</filter-name>
<url-pattern>*.do</url-pattern>
</filter-mapping>

<filter-mapping>
<filter-name>AjaxAnywhere</filter-name>
<url-pattern>*.jsp</url-pattern>
</filter-mapping>

<servlet>
<servlet-name>action</servlet-name>
<servlet-class>
org.apache.struts.action.ActionServlet
</servlet-class>
<init-param>
<param-name>config</param-name>
<param-value>/WEB-INF/struts-config.xml</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>3</param-value>
</init-param>
<init-param>
<param-name>detail</param-name>
<param-value>3</param-value>
</init-param>
<load-on-startup>0</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>action</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
</web-app>


[color=red]注意上面的最重要的是:设置AjaxAnywhere filter.[/color]

view代码:
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://ajaxanywhere.sourceforge.net/" prefix="aa"%>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>list.jsp</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="inc/aa.js"></script>
<script>
<!-- 所要提交的表单 -->
function doCheck(){
ajaxAnywhere.formName="listForm";
ajaxAnywhere.submitAJAX();
ajaxAnywhere.getZonesToReload = function () {
return "formlist,1"
};

}

</script>


</head>

<body>
<c:set value="Sophia" var="str"></c:set>
<c:out value="${str}"></c:out>
<center>
<div>列表</div>
<!-- 这里标识了一个待局部刷新的区域 -->
<aa:zone name="formlist">
<table>
<tr>
<td>ID编号 </td>
<td>姓名</td>
<td>性别</td>
<td>工作行业</td>
<td>${flag}</td>
</tr>
</table>
</aa:zone>
</center>
<br>
<br>
<hr>
<center>
<div> <h3>录入</h3></div>
<html:form action="/listAction" method="post" >
<table>

<tr>
<td>姓名 :</td><td><input type="text" name="name" /></td>
</tr>
<tr>
<td>性别 :</td><td><input type="text" name="sex" /></td>
</tr>
<tr>
<td>工作行业:</td><td><input type="text" name="work" /></td>
</tr>
<tr>
<td>地址:</td><td><input type="text" name="address" /></td>
</tr>
<tr>
<td> <html:submit value="提 交" styleClass="button" onclick="return doCheck()"/></td ><td><input type="reset" value="取消" /></td >
</tr >

</table>
</html:form>
</center>

</body>
</html>


action代码:

package com.action;


import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.ajaxanywhere.AAUtils;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import com.action.ListForm;

public class ListAction extends Action {
public ActionForward execute(ActionMapping actionMapping,
ActionForm actionForm, HttpServletRequest request,
HttpServletResponse response) throws Exception {
if (actionForm != null) {
ListForm form = (ListForm) actionForm;
System.out.println("name=" + form.getName());
}
//它标识了要刷新的区域.
if (AAUtils.isAjaxRequest(request)) {
AAUtils.addZonesToRefresh(request, "formlist");
System.out.println("AjaxRequest=Ok");
} request.setAttribute("flag", "pass");

return actionMapping.findForward("list");
}

}


最后附加整个demo的打包(war包含source code)
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值