AjaxAnyWhere在web中应用
陈实
AjaxAnywhere被设计成能够把任何一套现存的JSP组件转换成AJAX感知组件而不需要复杂的JavaScript编码.它利用标签把Web页面简单地划分成几个区域,然后使用AjaxAnywhere来刷新那些需要被更新地区域．
一、web.xml中配置AjaxAnywhere
<filter>
<filter-name>AjaxAnywhere</filter-name>
<filter-class>org.ajaxanywhere.AAFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>AjaxAnywhere</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<taglib>
<taglib-uri>ajaxanywhere</taglib-uri>
<taglib-location>
/WEB-INF/tlds/ajaxanywhere.tld
</taglib-location>
</taglib>二、passengerNotifyInfoList.jsp调用后台action
<%@ page pageEncoding="utf-8"%>
<%@ include file="/common/taglibs.jsp"%>
<%@ taglib uri="http://www.extremecomponents.org" prefix="ec" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ taglib prefix="aa" uri="http://ajaxanywhere.sourceforge.net/" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><fmt:message key="passengerNotifyInfoList.title"/></title>
<script src="<c:url value='/scripts/common.js'/>"></script>
<script src="<c:url value='/scripts/ajax/aa.js'/>"></script>
</head>
<body leftmargin="0" topmargin="0">
<html:form action="passengerNotifyInfo" styleId="passengerNotifyInfoForm">
<input type="hidden" name="type" value='<c:out value="${param.type}"/>'/>
<input type="hidden" name="workItemId" value='<c:out value="${param.workItemId}"/>'/>
<input type="hidden" name="processinstid" value='<c:out value="${param.processinstid}"/>'/>
<input type="hidden" name="appId" value='<c:out value="${param.appId}"/>'/>
<input type="hidden" name="flightAdjustInfoId2" value='<c:out value="${param.flightAdjustInfoId}"/>'/>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<aa:zone name="NotifyZone">
<!-- ------------------------------------ec start----------------------------------------------- -->
<ec:table styleClass="table"
items="passengerNotifyInfoList"
action=""
imagePath="${pageContext.request.contextPath}/images/table/compact/*.gif"
width="60%"
var="results"
filterable="false"
showPagination="false"
rowsDisplayed="0"
showStatusBar="false"
form="passengerNotifyInfoForm"
autoIncludeParameters="">
<ec:exportXls fileName="passengerNotifyInfoList.xls" />
<ec:row οnmοuseοver="mover(this)" οnmοuseοut="mout(this)">
<ec:column alias="selected" sortable="false" viewsAllowed="html" width="4%" title="<input type='checkbox' name='checkbox' οnclick='javascript:chooseAll(this);'/>">
<input type="checkbox" name="selected_id" value="<c:out value='${results.id}'/>,<c:out value='${results.pi_id}'/>" />
</ec:column>
<ec:column title="序号" sortable="false" cell="rowCount" property="rowcounts"/>
<ec:column property="chineseName" title="旅客姓名" sortable="true"/>
<ec:column property="etNumber" title="票号" sortable="false"/>
<ec:column property="icsNumber" title="PNR" sortable="true"/>
<%--<ec:column property="mobile" title="联系电话" sortable="false"/>--%>
<ec:column property="notifyFlag" title="是否已通知" sortable="true">
<c:if test="${results.notifyFlag==null}"></c:if>
<c:if test="${results.notifyFlag==0}">否</c:if>
<c:if test="${results.notifyFlag==1}">是</c:if>
</ec:column>
<ec:column property="reason" title="未通知原因" sortable="false"/>
<ec:column property="transferFlag" title="是否中转" sortable="true">
<c:if test="${results.transferFlag==null}"></c:if>
<c:if test="${results.transferFlag==0}">否</c:if>
<c:if test="${results.transferFlag==1}">是</c:if>
</ec:column>
<ec:column property="transferFlightNum" title="中转航班号" sortable="true"/>
<ec:column property="transferFlightDate" title="中转航班时刻" cell="date" format="yyMMdd HH:mm:ss" sortable="true"/>
<ec:column viewsAllowed="html" alias="edit" title="编辑" sortable="false">
<img src="./images/edit.gif" style="cursor:hand"
alt="<fmt:message key="button.edit" />"
οnclick="javascript:editRecord('<c:out value="${results.pi_id}"/>','<c:out value="${param.flightAdjustInfoId}"/>');">
</ec:column>
<ec:column viewsAllowed="html" alias="view" title="button.view" sortable="false">
<img src="./images/view.gif" width="14" height="14" οnclick="javascript:viewRecord('<c:out value="${results.pi_id}"/>');"
alt="<fmt:message key="provisionForm.view" />" style="cursor:hand">
</ec:column>
</ec:row>
</ec:table>
<!-- ------------------------------------ec end----------------------------------------------- -->
</aa:zone>
</td>
</tr>
</table>
</html:form>
</body>
<script>
function saveNotify(){
ajaxAnywhere.getZonesToReload = function() {
return "NotifyZone";
}
ajaxAnywhere.getAJAX('passengerNotifyInfo.html?flightAdjustInfoId=<c:out value="${param.flightAdjustInfoId}"/>','NotifyZone')
//ajaxAnywhere.submitAJAX();
}
</script>
</html>
类似资料：