ajax之ajaxanywhere

gjs622520

浏览: 41878 次
性别:
来自: 北京

最近访客更多访客>>

yufei2999

xionghaoming

sky1yy

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (19)

社区版块

存档分类

技术探索

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.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显示。

分享到：