AjaxAnyWhere 手册


AjaxAnyWhere 手册 本手册内容来源于《Ajax 开发精要:概念、案例与框架》CSDN 中的试读章节与 http://blog.csdn.net/srx/archive/2005/12/29/565155.aspx 中AjaxAnyWhere的总结。 目 录 I AjaxAnywhere的类库及其用法..............................................................1 1.AjaxAnywhere的初始化................................................................1 2.AjaxAnywhere处理Ajax请求 ........................................................2 3.AjaxAnywhere处理系统异常和HTTP请求异常........................11 4.定制Ajax请求执行的提示信息...................................................14 5.设置页面可刷新区域 ..................................................................16 6 试用AjaxAnywhere.......................................................................18 7 Ajax Anywhere的适用范围 .........................................................22 II ajaxanywhere 总结: ..........................................................................23 1,简介...............................................................................................23 2 总结.................................................................................................23 2.1 从配置上来讲: ...................................................................23 2.2 配置ajaxanywhere + struts . ..................................................25 2.3 配置ajaxanywhere + JSF.......................................................25 2.4 ajaxanywhere + * + JSTL.......................................................25 3 ajaxanywhere的目录结构和文件的特色。...................................26 4 具体使用方法: .............................................................................26 III 整合 Ajaxanywhere ...........................................................................32 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"); 1 } 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); 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)方法的代码如例程 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; } //已经设置多个刷新区域 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(""); } 与一般的 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(); 5 //设置请求头参数,当前请求为 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 例程 11-28 是一个仅包含 zone,script,exception 和 redirect 节点的示范 XML 文档。这 个文档由 AjaxAnywhere 的业务类自动组织,与 Web 应用程序的其他实体类、业务类无关。 Web 应用程序只需要按照传统的通信机制一样,将响应结果输出即可。 例程 11-28 AjaxAnywhere 返回的包含响应数据的 XML 文档 6 19
用户注册
用户名称:
密码:
电子邮件:
<% String username = request.getParameter("username"); 20 String email = request.getParameter("email"); UserService service = new UserService(); if((username!=null)&&(!"".equals(username))) { UserValue user = service.findUserByName(username); if(user!=null) out.println("用户名称["+username+"]已经被注册,请更换其他用 户名称再注册。
"); else out.println("用户名称["+username+"]尚未被注册,您可以继续。
"); } if((email!=null)&&(!"".equals(email))) { UserValue user = service.findUserByEmail(email); if(user!=null) out.println("电子邮件["+email+"]已经被注册,请更换其他用户名 称再注册。"); else out.println("电子邮件["+email+"]尚未被注册,您可以继续。"); } %>
例程 11-37 引用了 AjaxAnywhere 的 Javascript 库文件 aa.js,并设置 AjaxAnywhere 对象 的 formName 为 form1,重载其 getZonesToReload 方法指定更新区域为 feedback_info。事件 处理函数 doCheck()调用 AjaxAnywhere 对象的 submitAJAX()方法,向服务器提交 Ajax 请求, 并进行数据校验。页面上则使用了标签指定原来 21
还剩35页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 15 金币 [ 分享pdf获得金币 ] 3 人已下载

下载pdf

pdf贡献者

hubert137

贡献于2012-02-11

下载需要 15 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf