《Ajax开发精要》关于ajaxanywhere 教程三
11.3.3 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对象属性req中。AjaxAnywhere对象默认的构造方法如例程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;
}
2．AjaxAnywhere处理Ajax请求
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则是代表发送操作是否由提交按钮触发的。SubmitAJAX()方法的代码如例程11-24所示。
例程11-24 submitAJAX() 方法发送POST类型请求
AjaxAnywhere.prototype.submitAJAX = function(additionalPostData, submitButton) {
//如果浏览器不支持Ajax
if (this.notSupported)
return this.onSubmitAjaxNotSupported(additionalPostData);
//附加参数为空
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");
//确定要发送给服务器的内容
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)方法的代码如例程11-25所示。
例程11-25 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;
}
//已经设置多个刷新区域
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("");
}
与一般的Ajax应用程序一样，AjaxAnywhere更新页面的操作仍然由回调函数完成，这也是Ajax的机制所定义的。应该注意到，submitAJAX()方法和getAJAX()方法的后面都调用了一个sendPreparedRequest()的方法，只是两者传入的参数内容有所不同而已。AjaxAnywhere对象在该方法中设置必要的请求头信息，为XMLHttpRequest对象指定回调函数，然后才将Ajax请求发送出去。setPreparedRequest()方法如例程11-26所示。
例程11-26 setPreparedRequest()方法
AjaxAnywhere.prototype.sendPreparedRequest = function (postData) {
//确定Ajax请求回调函数
var callbackKey = this.id + "_callbackFunction";
if (typeof window[callbackKey] == "undefined")
window[callbackKey] = new Function("AjaxAnywhere.findInstance (\"" + this.id + "\").callback(); ");
this.req.onreadystatechange = window[callbackKey];
//显示请求正在处理的提示信息
this.showLoadingMessage();
//设置请求头参数，当前请求为aaxml请求
this.req.setRequestHeader("aaxmlrequest", "true");
//发送请求
this.req.send(postData);
}
从这个方法可以看出，如果未在Web页面中定义相应的回调函数，则AjaxAnywhere将使用默认的回调函数。
AjaxAnywhere统一使用XML文档来组织服务器返回的响应数据。这个文档采用UTF-8的编码方式，例程11-22所配置的AAFilter也采用UTF-8的方式从请求中获取请求数据。AjaxAnywhere支持页面区域内容刷新、URL跳转、脚本、图像等处理功能，这些处理功能的信息都包含在这个XML文档中。当客户端发送的Ajax请求被正常执行后，AjaxAnywhere即将返回的响应数据组织为符合例程11-27所示文档类型定义文件DTD所规定范式的XML文档。
例程11-27 AjaxAnywhere返回的XML文档的文档类型定义DTD
<?xml version="1.0" encoding="UTF-8" ?>
<!ELEMENT zones ( document*, zone*, script*, exception*, redirect*, image* ) >
<!ELEMENT document (#PCDATA)>
<!ELEMENT zone ( #PCDATA ) >
<!ATTLIST zone name NMTOKEN #REQUIRED >
<!ELEMENT script ( #PCDATA ) >
<!ELEMENT exception ( #PCDATA ) >
<!ATTLIST exception type NMTOKEN #REQUIRED >
<!ELEMENT redirect ( #PCDATA ) >
<!ELEMENT image (#PCDATA) >
例程11-28是一个仅包含zone，script，exception和redirect节点的示范XML文档。这个文档由AjaxAnywhere的业务类自动组织，与Web应用程序的其他实体类、业务类无关。Web应用程序只需要按照传统的通信机制一样，将响应结果输出即可。
例程11-28 AjaxAnywhere返回的包含响应数据的XML文档
<?xml version="1.0" encoding="UTF-8"?>
<zones>
<zone name="stateSavingScript"/>
<zone name="countriesList">
<![CDATA[
<select size="10" name="country">
<option value=IN>India</options>
</select>
]]>
</zone>
<script>
<![CDATA[
var states = document.getElementsByName("jsf_state_64")
var trees = document.getElementsByName("jsf_tree_64")
if(states!=null)
for(var i=0;i<states.length;i++)
if(states[i].tagName.toLowerCase()=="input") {
states[i].values="null";
}
if(trees!=null)
for(var i=0;i<trees.length;i++)
if(trees[i].tagName.toLowerCase()=="input")
trees[i].values="null";
]]>
</script>
<script/>
<script/>
<exception type="org.apache.jasper.JasperException"><![CDATA[
org.apache.jasper.JasperException:AjaxAnywhere demo exception
at org.apache.jasper.servlet.JspServletWraper.service (Jsp Servlet Wrapper.java:372)
............
]]>
</exception>
<redirect><![CDATA[reditected.jsp]]></redirect>
</zones>
AjaxAnywhere默认的回调函数使用XMLHttpRequest对象的responseXML()方法来获取服务器返回的这个XML文档，使用DOM解析。如果XML文档包含document和zone元素，则按照之前设定的更新区域来更新页面中指定区域的内容。如果XML文档中包含script元素，则从元素中提取脚本，使用eval()方法执行。如果服务器响应请求的时候发生系统异常或者HTTP请求异常，则XML文档中会包含exception元素，回调函数即可从元素中获取异常信息，交给this.handleException (type, details)方法做异常处理。如果XML文档中包含redirect元素，则回调函数将其转化为“locarion.href=newURL”的方法，将页面跳转到指定的URL。如果XML文档中包含image元素，则AjaxAnywhere即从服务器获取image对象所指定的图像，将其缓存在浏览器。AjaxAnywhere默认的回调函数如例程11-29所示。
例程11-29 AjaxAnywhere对象默认的构造函数
AjaxAnywhere.prototype.callback = function() {
if (this.req.readyState == 4) {
this.onBeforeResponseProcessing();
this.hideLoadingMessage();
if (this.req.status == 200) {
if (this.req.getResponseHeader('content-type').toLowerCase(). substring(0, 8) != 'text/xml')
alert("AjaxAnywhere error : content-type in not text/xml : [" + this.req.getResponseHeader('content-type') + "]");
var docs = this.req.responseXML.getElementsByTagName("documen t");
var redirects = this.req.responseXML.getElementsByTagNa me ("redirect");
var zones = this.req.responseXML.getElementsByTagName("zon e");
var exceptions = this.req.responseXML.getElementsByTagName ("exception");
var scripts = this.req.responseXML.getElementsByTagName("scr ipt");
var images = this.req.responseXML.getElementsByTagName("imag e");
if (redirects.length != 0) {
var newURL = redirects[0].firstChild.data;
location.href = newURL;
}
if (docs.length != 0) {
var newContent = docs[0].firstChild.data;
//cleanup ressources
delete this.req;
document.close();
document.write(newContent);
document.close();
}
if (images.length != 0) {
var preLoad = new Array(images.length);
for (var i = 0; i < images.length; i++) {
var img = images[i].firstChild;
if (img != null) {
preLoad[i] = new Image();
preLoad[i].src = img.data;
}
}
if (this.delayBeforeContentUpdate) {
delay(this.delayInMillis);
}
}
if (zones.length != 0) {
for (var i = 0; i < zones.length; i++) {
var zoneNode = zones[i];
var name = zoneNode.getAttribute("name");
var fc = zoneNode.firstChild;
var html = (fc == null)?"":fc.data;
var zoneHolder = document.getElementById("aazone." + name);
if (zoneHolder != null && typeof(zoneHolder) != "undefined") {
zoneHolder.innerHTML = html;
}
}
}
if (exceptions.length != 0) {
var e = exceptions[0];
var type = e.getAttribute("type");
var stackTrace = e.firstChild.data;
this.handleException(type, stackTrace);
}
if (scripts.length != 0) {
for (var $$$$i = 0; $$$$i < scripts.length; $$$$i++) {
// use $$$$i variable to avoid collision with "i" inside user script
var script = scripts[$$$$i].firstChild;
if (script != null) {
script = script.data;
if (script.indexOf("document.write") != -1) {
this.handleException("document.write", "This script contains document.write(), which is not compatible with AjaxAnywhere : \n\n" + script);
} else {
eval(script);
}
}
}
var globals = this.getGlobalScriptsDeclarationsList(scr ipt);
if (globals != null)
for (var i in globals) {
var objName = globals[i];
try {
window[objName] = eval(objName);
} catch(e) {
}
}
}
} else {
if (this.req.status != 0)
this.handleHttpErrorCode(this.req.status);
}
this.restoreSubstitutedSubmitButtons();
this.onAfterResponseProcessing();
}
}
值得注意的是，在例程11-29所示的默认回调函数中，除了解析XML文档外，在回调函数执行业务逻辑之前和之后，还分别调用了两个可供重载的方法：this.onBeforeResp onse Processing() 和 this.onAfterResponseProcessing()。如果希望在执行回调函数更新页面内容之前处理额外的业务，则可以在适当的位置重载this.onBeforeResponseProcessing()方法。如果希望执行完回调函数更新页面内容之后，还希望继续执行其他逻辑操作，则可以在适当的位置重载this.onAfterResponseProcessing()方法。从aa.js的源码中，可以看到目前这两个方法都未执行任何操作，如例程11-30所示。
例程11-30 onBeforeResponseProcessing()和onAfterResponseProcessing()方法
/**
* Override this method to implement a custom action
*/
AjaxAnywhere.prototype.onBeforeResponseProcessing = function () {
};
/**
* Override this method to implement a custom action
*/
AjaxAnywhere.prototype.onAfterResponseProcessing = function () {
};