ajaxanywhere_<aa:zone 指定高度-CSDN博客

本文链接：https://blog.csdn.net/QQcjliang/article/details/8535498

ajaxanywhere主要用处就是刷新指定区域，使用<aa:zone name="***"></aa:zone>圈定区域，根据name指定刷新。
具体：
导入ajaxanywhere.jar
导入aa.js ：<script src="<%=request.getContextPath() %>/script/aa.js"></script>
使用ajaxAnywhere.submitAJAX()提交post类型请求，重写ajaxAnywhere.getZonesToReload方法，该方法返回要刷新区域的名字，如：
ajaxAnywhere.getZonesToReload = function (url){
var zones="zone4,zone3";
return zones;
}
如果zones为null，刷新全部。
web.xml配置：
<filter>
<filter-name>ajaxAnyWhere</filter-name>
<filter-class>org.ajaxanywhere.AAFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>ajaxAnyWhere</filter-name>
<url-pattern>*.jsp</url-pattern>
</filter-mapping>
<filter-mapping>
<filter-name>ajaxAnyWhere</filter-name>
<url-pattern>*.do</url-pattern>
</filter-mapping>
详解：
AjaxAnywhere提供两个公共方法处理Ajax请求的发送：submitAJAX(additionalPost Data, submitButton)和getAJAX(url, zonesToRefresh)。前者用于发送POST类型的Ajax请求，后者则用于发送GET类型的请求，可以直接在Web页面的表单中或者Javascript代码段直接使用ajaxAnywhere.submitAJAX(additionalPostData, submitButton)或者ajaxAny where. getAJAX (url, zonesToRefresh)向服务器发送Ajax请求。
ajaxAnywhere对象的属性formName保存Ajax所指向的表单名称，只要为其指定表单名称（如果未指定，则默认是Web页面中的第一个表单），submitAJAX(additionalPost Data,submitButton)就能够自动获取指定表单的全部表单域及其值，组成parameterName1 =value1 &parameterName2=value2字符串，这个过程由私有（private）方法preparePostData (submitButton)完成；preparePostData(submitButton)方法遍历表单中的全部元素，将下拉列表、文本框、复选框、单选框等的值自动加入字符串中；submitAJAX方法的参数additionalPostData代表除了表单域值外还要发送给服务器的内容，submitButton则是代表发送操作是否由提交按钮触发的。
AjaxAnywhere.prototype.submitAJAX = function(additionalPostData, submitButton) {
//如果浏览器不支持Ajax
if (this.notSupported)
return this.onSubmitAjaxNotSupported (additionalPostData);
2
//附加参数为空
if (additionalPostData == null || typeof additionalPostData == "undefined")
additionalPostData = "";
//id绑定
this.bindById();
//获取当前表单对象
var form = this.findForm();
//获取表单的action，确定表单提交目标的url
var actionAttrNode = form.attributes.getNamedItem("action");
var url = actionAttrNode == null?null:actionAttrNode.nodeValue;
//如果表单action未设置，则url为当前页面
if ((url == null) || (url == ""))
url = location.href;
//确定请求成功后要重载刷新的页面区域
var zones = this.getZonesToReload(url, submitButton);
//如果未设置重载刷新区域，则刷新整个页面
if (zones == null) {
if (typeof form.submit_old == "undefined")
form.submit();
else
form.submit_old();
return;
}
//放弃上一次未完成的请求
this.dropPreviousRequest();
//设置请求参数，发送类型为POST，请求为异步方式
this.req.open("POST", url, true);
this.req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
this.req.setRequestHeader("Accept", "text/xml");
//确定要发送给服务器的内容 3
var postData = this.preparePostData(submitButton);
//已设置要重载刷新的区域，将区域名称附加在发送内容中
if (zones != "")
postData = '&aazones=' + encodeURIComponent(zones) + "&" + postData + "&" + additionalPostData;
else
postData += "&" + additionalPostData;
//发送Ajax请求
this.sendPreparedRequest(postData);
}
显然，如果使用AjaxAnywhere自定义标签为Web页面划分指定了刷新区域，则submitAJAX()方法也会将其包含在参数中发送到服务器端。
相对的，getAJAX(url,zoneToRefresh)方法则比较简单。它获取Ajax请求的目标URL，将需要发送的参数附着在这个URL后面，然后调用XMLHttpRequest对象的open()和send()方法将其发送除去。getAJAX(url,zoneToRefresh)方法的代码如下所示。
getAJAX()方法发送GET类型请求
AjaxAnywhere.prototype.getAJAX = function(url, zonesToRefresh) {
//如果浏览器不支持Ajax，则刷新整个页面
if (this.notSupported)
return this.onGetAjaxNotSupported(url);
//id绑定
this.bindById();
//如果为设置刷新区域，则刷新整个页面
if (zonesToRefresh == null || typeof zonesToRefresh == "undefined")
zonesToRefresh = "";
var urlDependentZones = this.getZonesToReload(url);
if (urlDependentZones == null) {
location.href = url;
return;
}
//已经设置多个刷新区域 4
if (urlDependentZones.length != 0)
zonesToRefresh += "," + urlDependentZones;
//放弃上一次未完成的额请求
this.dropPreviousRequest();
//确定请求附加的参数
url += (url.indexOf("?") != -1) ? "&" : "?";
url += "aa_rand=" + Math.random();
// avoid caching
if (zonesToRefresh != null && zonesToRefresh != "")
url += '&aazones=' + encodeURIComponent(zonesToRefresh);
//设置请求参数，发送类型为GET，响应结果为XML文档
this.req.open("GET", url, true);
this.req.setRequestHeader("Accept", "text/xml");
//发送Ajax请求
this.sendPreparedRequest("");
}
AjaxAnywhere处理系统异常的方法:
AjaxAnywhere.prototype.handleException = function(type, details) {
alert(details);
}
AjaxAnywhere处理HTTP请求异常的方法:
AjaxAnywhere.prototype.handleHttpErrorCode = function(code) {
var details = confirm("AjaxAnywhere default error handler. XMLHttp Request HTTP Error code:" + code + " \n\n Would you like to view the response content in a new window?");
if (details) {
var win = window.open("", this.id + "_debug_window");
if (win != null) {
win.document.write("<html><body><xmp>" + this.req.response Text);
win.document.close();
win.focus();
} else {
alert("Please, disable your pop-up blocker for this site fir st.");
}
}
}
设置页面可刷新区域:
AjaxAnywhere使用自定义标签<aa:zone>来划分页面区域，从而动态地指定页面可刷新区域。通过这种方法，只需要在页面适当位置中添加<aa:zone name=""></aa:zone>标签。对于已有的Web应用程序，几乎无须更改原有的代码，只须使用<aa:zone>标签指定更新区域。AjaxAnywhere会将<aa:zone>标签解析为<span id=""></span>的标记，并最终通过更新其innerHTML属性值来达到更新页面的目的。
区域划分好之后，需要告诉AjaxAnywhere哪些区域需要更新，即设置页面可刷新区域。AjaxAnywhere提供两种方式设置页面可刷新区域：客户端重载AjaxAnywhere对象的getZonesToReload()方法，或者服务器端调用AAUtil类的addZonesToRefresh(ServletReq uest request, String commaSeparatedZonesList)方法。
如果使用客户端重载的方式，则需要将<aa:zone name=""></aa:zone>所指定区域的name属性值组织成以逗号“，”分隔的字符串。
重载AjaxAnywhere对象的getZonesToReload()方法:
ref_All = false;
ajaxAnywhere.getZonesToReload = function (url){
if (ref_All)
return "document.all";
var zones="";
var form = this.findForm();
for (var i=0;i<form.elements.length;i++){
var el = form.elements[i];
if (el.type=="checkbox" && el.checked)
zones += el.value+",";
}
return zones;
}
调用AAUtil类的方法保存可刷新区域:
<%
if (AAUtils.isAjaxRequest(request)) {
String[] commaSeparatedZones = request.getParameterValues ("zones");
for (int i = 0; commaSeparatedZones != null && i < commaSeparated Zones.length; i++) {
String zone = commaSeparatedZones[i];
AAUtils.addZonesToRefresh(request, zone);
}
}
%>
定制Ajax请求执行的提示信息(loading....图片):
AjaxAnywhere对象的方法showLoadingMessage()和hideLoadingMessage()用于显示和隐藏这个提示信息，它们分别在Ajax请求发送前和回调函数中被调用.
AjaxAnywhere.prototype.showLoadingMessage = function() {
var div = document.getElementByIdx("AA_" + this.id + "_loading_ div");
if (div == null) {
div = document.createElement("DIV");
document.body.appendChild(div);
div.id = "AA_" + this.id + "_loading_div";
div.innerHTML = " Loading...";
div.style.position = "absolute";
div.style.border = "1 solid black";
div.style.color = "white";
div.style.backgroundColor = "blue";
div.style.width = "100px";
div.style.heigth = "50px";
div.style.fontFamily = "Arial, Helvetica, sans-serif";
div.style.fontWeight = "bold";
div.style.fontSize = "11px";
}
div.style.top = document.body.scrollTop + "px";
div.style.left = (document.body.offsetWidth - 100 - (document.all? 20:0)) + "px";
div.style.display = "";
}
AjaxAnywhere.prototype.hideLoadingMessage = function() {
var div = document.getElementByIdx("AA_" + this.id + "_loading_ div");
if (div != null)
div.style.display = "none";
}

可以重载这两个函数定制loading显示。

-------------------------------------------

ajaxAnywhere使用步骤

2012-03-08 16:16 112人阅读评论(0) 收藏举报

1、把 ajaxanywhere-1.2-RC2.jar 压缩包复制到 \工程名\WebRoot\WEB-INF\lib 目录下。

2、把 ajaxanywhere.tld 文件复制到 \工程名\WebRoot\WEB-INF 目录下。

3、把 js 文件夹复制到 \工程名\WebRoot 目录下。

4、把 log4j-1.2.11.jar 加到WebRoot\WEB-INF\lib 目录下

5、在 web.xml 中添加 ajax 的配置

<filter-name>AjaxAnywhere</filter-name>

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

<init-param>

<param-name>ShowInfo</param-name>

<param-value>false</param-value>

</init-param>

<init-param>

<param-name>encoding</param-name>

<param-value>GB2312</param-value>

</init-param>

<init-param>

<param-name>ajaxencoding</param-name>

<param-value>GB2312</param-value>

</init-param>

</filter>

<filter-mapping>

<filter-name>AjaxAnywhere</filter-name>

<url-pattern>/*</url-pattern>

</filter-mapping>

6、新建 login.jsp 文件，添加 ajax 标签
<%@ page language="java" pageEncoding="gbk"%>

<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>

<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>

<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>

<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>

<%@ taglib uri="/WEB-INF/ajaxanywhere.tld" prefix="ajax"%>

7、导入 ajax 文件

8、定义刷新热区
<label><ajax:zone name="AdminZone"><font color="red">${requestScope.IsAdmin }</font></ajax:zone></label>

9、定义触发事件：<input name="aname" type="text" class="input_normal" id="aname" οnblur="checkuser()">
可以是：失去焦点、点击、双击

10、编写脚本方法：

//ajax 判断用户是否存在

function checkuser(){

var username=document.loginForm.aname.value;

if(username!=""){ //ajaxAnywhere.getAJAX("adminAction.do?methods=isAdmin&aname="+username);

document.loginForm.action="login.do?methods=isAdmin";

ajaxAnywhere.formName="loginForm";

ajaxAnywhere.submitAJAX();

}

</script>

11、建立相应的 form 和 action

/**

* 可以用Ajax来判断用户名是否存在（登陆验证）

* @param mapping

* @param form

* @param request

* @param response

* @return

public ActionForward isAdmin(ActionMapping mapping, ActionForm form,

HttpServletRequest request, HttpServletResponse response){

LoginForm loginForm = (LoginForm) form;

// 处理刷新区域

if (AAUtils.isAjaxRequest(request)) {

/**下面的AdminExistZone 为热区的名字,即在jsp中<aa:zone name="AdminExistZone">...</aa:zone>中的name属性的值*/

AAUtils.addZonesToRefresh(request, "AdminZone");

}

if(loginForm.getAname().equals("xx")){

request.setAttribute("IsAdmin", "用户名存在!");

}else{

request.setAttribute("IsAdmin", "该用户名不存在!");

}

return new ActionForward("/login.jsp");

}

12、修改 struts-config.xml 文件的配置