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> 


AjaxAnywhere的类库及其用法 AjaxAnywhere使用一个名为aa.js的Javascript文件来处理客户端的全部Ajax操作,包括初始化XMLHttpRequest、获取表单内容、发送Ajax请求、执行回调函数等。aa.js也是使用AjaxAnywhere之前必须了解的,至少应该知道其经常用到的API。Ajax Anywhere的官方网站提供了相应的Javascript Document,方便快速查找和了解这些API。 1.AjaxAnywhere的初始化 aa.js定义了一个AjaxAnywhere对象,针对Ajax的各种操作被抽象成AjaxAnywhere对象的方法,通过这些对象方法完成所需的操作。必要的时候,可以重载这些方法,以便满足个性化的需求。在aa.js文件的末端,AjaxAnywhere对象使用默认的构造方法完成对象实例化。 ajaxAnywhere = new AjaxAnywhere(); ajaxAnywhere.bindById(); 所以,所有引用aa.js的页面都可以在Javascript代码段使用AjaxAnywhere对象的实例ajaxAnywhere。 当AjaxAnywhere初始化的时候,它在默认的构造函数完成XMLHttpRequest对象的创建,并保存在AjaxAnywhere对象属性reqAjaxAnywhere对象默认的构造方法如例程11-23所示。 例程11-23 AjaxAnywhere对象的默认构造方法 function AjaxAnywhere() { this.id = AjaxAnywhere.defaultInstanceName;//id,用于生成更新区域的编号等用途 this.formName = null;//页面表单名称 this.notSupported = false;//是否支持Ajax this.delayBeforeContentUpdate = true;//在更新页面内容之前是否延迟 this.delayInMillis = 100;//延迟时间 //初始化XMLHttpRequest对象--req if (window.XMLHttpRequest) { this.req = new XMLHttpRequest(); } else if (window.ActiveXObject) { try { this.req = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { this.req = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e1) { this.notSupported = true; /* XMLHTTPRequest not supported */ } } } //确定浏览器是否支持Ajax if (this.req == null || typeof this.req == "undefined") this.notSupported = true; }
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值