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 ¶meterName2=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.getElementById("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.getElementById("AA_" + this.id + "_loading_ div");
if (div != null)
div.style.display = "none";
}
可以重载这两个函数定制loading显示。
分享到:
- 2008-06-04 17:26
- 浏览 3677
- 评论(0)
- 论坛回复 / 浏览 (0 / 3010)
- 查看更多
相关推荐
AjaxAnywhere是IBM提供的一种开源工具,它简化了在Java应用中实现Ajax功能的过程,特别适用于WebSphere Portal环境。 AjaxAnywhere的核心思想是通过JavaScript库来增强客户端的交互性,同时提供服务器端的Java支持...
**aa.js** 是AjaxAnywhere的核心组件之一,负责处理客户端的所有Ajax操作。这些操作包括但不限于: - 初始化XMLHttpRequest对象 - 获取表单内容 - 发送Ajax请求 - 执行回调函数等 #### 三、aa.js中的AjaxAnywhere...
AjaxAnywhere是一款强大的JavaScript库,专为开发人员提供方便的AJAX功能,使Web应用程序能够实现更流畅、响应更快的用户体验。这个实例源码是作者在学习AJAX和使用AjaxAnywhere框架时创建的,适合初学者或者希望...
AjaxAnywhere 是一个JavaScript框架,专为简化Ajax操作而设计,主要目标是使开发者能够在Web应用中无缝集成异步数据通信。AjaxAnywhere的核心是aa.js文件,这是一个包含客户端Ajax功能的JavaScript库,它处理了诸如...
**AjaxAnywhere**是一个工具,主要用于帮助开发者在网页中实现异步JavaScript和XML(Ajax)功能。Ajax技术使得网页能够在不刷新整个页面的情况下与服务器进行数据交互,极大地提升了用户体验。AjaxAnywhere可能提供...
AjaxAnyWhere是一款强大的JavaScript库,专门用于在Web应用程序中实现异步JavaScript和XML(Ajax)技术。它简化了Ajax功能的集成,使开发者无需深入理解底层的XMLHttpRequest对象和复杂的数据交互过程,即可轻松实现...
1. **AjaxAnywhere对象的初始化**:aa.js中定义的AjaxAnywhere对象是进行Ajax操作的中心。对象的实例化发生在文件末尾,通过`ajaxAnywhere = new AjaxAnywhere();`创建。初始化时,该对象创建并保存XMLHttpRequest...
**AjaxAnyWhere** 是一个JavaScript库,用于简化和增强网页中的异步JavaScript和XML(Ajax)操作。这个库提供了一种方便的方式来实现无刷新页面更新,提高了用户体验,减少了服务器负载。AjaxAnyWhere的核心功能在于...
将`ajaxanywhere-1.2.1.jar`加入到Web应用的类路径中,然后在JSP或Servlet中引入AjaxAnywhere的相关标签库,如`<%@ taglib uri="http://ajaxanywhere.ibm.com/ajax" prefix="ajax"%>`。这样就可以在页面中使用...
2. **创建Ajax请求**: 使用AjaxAnywhere提供的API创建Ajax请求,指定请求的URL、类型(GET或POST)、数据以及回调函数,用于处理服务器的响应。 3. **处理响应**: 在回调函数中,解析服务器返回的数据,根据需要...
AjaxAnywhere是一个功能强大的JavaScript库,专门设计用于简化Ajax技术的运用,使开发者能够更轻松地在Web应用程序中集成异步通信功能。该库的主要特点在于它提供了一套完整的解决方案,包括处理Ajax请求、错误管理...
form的action属性必须定义可以为空 表单通过post提交调用ajaxAnywhere.submitAJAX()方法,通过get提交,调用ajaxAnywhere.getAJAX()方法。 4.设定刷新域 在jsp中用在jsf中用 5.指定刷新区域 在jsp或者java代码控制...
AjaxAnywhere则是对这一技术的一种封装和扩展,提供了更易用的API和功能,使得开发者能更容易地在项目中集成Ajax功能。 AjaxAnywhere的主要特点包括: 1. **局部刷新**:AjaxAnywhere允许开发者选择页面中的特定...
4. **初始化AjaxAnywhere**:在文档加载完成后调用`AjaxAnywhere.init()`启动Ajax功能。 **三、AjaxAnywhere的典型应用场景** 1. **表单提交**:使用AjaxAnywhere,可以实现在不刷新页面的情况下提交表单,即时...
AjaxAnyWhere是一款强大的局部刷新框架,它为开发者提供了一种高效、便捷的方式来实现网页的无刷新更新,极大地提升了用户体验。这个框架的核心理念是利用Ajax技术,通过后台异步通信来更新页面的部分区域,而无需...
AjaxAnywhere的独特之处在于它的“分区刷新”机制。用户可以将Web页面划分为多个区域(zones),并仅刷新需要更新的特定区域,而不是整个页面。这减少了对JavaScript编码的需求,降低了Ajax开发的复杂性。...
1. **AjaxAnywhere对象初始化**:`aa.js`文件中定义了一个名为`AjaxAnywhere`的对象,该对象包含了各种用于处理Ajax操作的方法。在文件末尾,通过默认构造函数创建了一个名为`ajaxAnywhere`的实例: ```javascript ...
AjaxAnywhere充分利用了这一技术,并扩展了其功能,使得开发者可以更方便地在各种浏览器和环境中实现Ajax功能。它支持跨浏览器兼容性,覆盖了包括Internet Explorer、Firefox、Chrome、Safari和Opera在内的主流...