ajaxAnywhere框架概念和使用.doc

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; } ### AjaxAnywhere框架概念与使用详解 #### 一、AjaxAnywhere框架概述 AjaxAnywhere是一个轻量级的JavaScript库，用于简化Ajax技术的使用。AjaxAnywhere的主要优势在于它能够将普通的HTML表单转换为Ajax请求，无需对现有的代码进行大幅度修改。这使得开发人员能够在不改变现有业务逻辑的情况下，轻松地实现页面的异步加载。 #### 二、AjaxAnywhere的核心组件：aa.js **aa.js** 是AjaxAnywhere的核心组件之一，负责处理客户端的所有Ajax操作。这些操作包括但不限于： - 初始化XMLHttpRequest对象 - 获取表单内容 - 发送Ajax请求 - 执行回调函数等 #### 三、aa.js中的AjaxAnywhere对象 **aa.js** 文件中定义了一个名为 **AjaxAnywhere** 的对象，该对象封装了与Ajax相关的各种操作，这些操作被抽象成了该对象的方法。通过调用这些方法，可以完成所需的Ajax功能。必要时，还可以重写这些方法以满足更个性化的定制需求。 - **对象实例化**: 在 **aa.js** 文件的结尾处，使用默认的构造方法创建了一个名为 **ajaxAnywhere** 的AjaxAnywhere对象实例。 ```javascript ajaxAnywhere = new AjaxAnywhere(); ajaxAnywhere.bindById(); ``` 这意味着，在任何引用了 **aa.js** 的页面中，都可以直接使用 **ajaxAnywhere** 对象来进行Ajax操作。 #### 四、AjaxAnywhere的初始化 **AjaxAnywhere** 对象的初始化主要发生在默认的构造函数中，该构造函数主要完成了以下任务： 1. **初始化属性**: - `id`: 用于生成更新区域的编号等用途。 - `formName`: 页面表单名称。 - `notSupported`: 表示当前浏览器是否支持Ajax。 - `delayBeforeContentUpdate`: 在更新页面内容之前是否延迟。 - `delayInMillis`: 延迟的时间，单位为毫秒。 2. **创建XMLHttpRequest对象**: - 使用 `window.XMLHttpRequest` 或 `window.ActiveXObject` 来创建XMLHttpRequest对象，并将其存储在 `req` 属性中。 3. **检测Ajax支持**: - 如果 `req` 为空或未定义，则设置 `notSupported` 为 `true`，表示当前浏览器不支持Ajax。 #### 五、AjaxAnywhere处理Ajax请求 AjaxAnywhere提供了两种方式来发送Ajax请求： - **submitAJAX(additionalPostData, submitButton)**: 用于发送POST类型的Ajax请求。 - **getAJAX(url, zonesToRefresh)**: 用于发送GET类型的Ajax请求。 这两种方法都可以直接在Web页面的表单中或JavaScript代码段中使用。 - **submitAJAX(additionalPostData, submitButton)** 方法会自动获取指定表单的所有表单域及其值，并将其转换为参数字符串。此外，该方法还接受两个参数： - `additionalPostData`: 除了表单域值外还需要发送给服务器的内容。 - `submitButton`: 表示发送操作是否由提交按钮触发。 - **getAJAX(url, zonesToRefresh)** 方法则用于发送GET类型的Ajax请求，其中 `url` 参数指定了请求的URL，而 `zonesToRefresh` 参数则指定了需要刷新的区域。 通过以上方法，AjaxAnywhere提供了一种简单且高效的方式来实现Ajax功能，使得开发者能够更加专注于业务逻辑的编写，而无需过多关注Ajax的底层细节。