25、XOAD：服务器端Ajax工具包的全面解析

XOAD：服务器端Ajax工具包的全面解析

1. Script.aculo.us简介

Script.aculo.us是一个基于prototype.js库的强大且易用的工具包。只需几行代码，就能为页面元素添加令人印象深刻的效果。不过，它的功能远不止于此，建议阅读其文档并进行实验，以用最少的额外编程构建强大且出色的交互式页面。

2. XOAD概述

XOAD是由Stanimir Angeloff编写的支持Ajax的服务器端框架。与之前介绍的基于JavaScript的客户端库不同，XOAD是用PHP编写的服务器端Ajax工具包。它的全称为XMLHTTP Object - oriented Application Development，采用了与客户端技术不同的方法，通过将服务器端PHP函数的序列化版本作为JavaScript对象传递，使这些函数能被客户端JavaScript解释器使用，其底层通信使用了JSON（JavaScript Object Notation）。

3. XOAD的下载与安装

• 下载 ：最新版本可从http://sourceforge.net/projects/xoad 下载为存档文件，配套CD中也包含了一个版本。
• 安装 ：安装成功需要具备对支持PHP的Web服务器的FTP访问权限，若要使用更高级功能，还需MySQL数据库。详细安装说明可在下载材料中找到，也可访问公共论坛http://forums.xoad.org/ 。

4. 简单的XOAD页面示例

以下是一个简单的XOAD页面示例，展示了如何将服务器端PHP类的方法在客户端作为JavaScript对象使用。
- 定义PHP类 ：创建一个名为 myClass.class.php 的文件，内容如下：

<?php
class myClass {
    function stLength($mystring) {
        return strlen($mystring);
    }
    function xoadGetMeta() {
        XOAD_Client::mapMethods($this, array('stLength'));
        XOAD_Client::publicMethods($this, array('stLength'));
    }
}
?>

这个类只有一个 stLength() 函数，用于返回字符串的长度。 xoadGetMeta() 函数提供了元数据，告知XOAD哪些方法可导出到主应用程序，这里只有 stLength() 方法。虽然不强制包含元数据，但建议添加，否则所有方法将为公共方法，且方法名会转换为小写。
- 构建主应用程序脚本 ：创建 xoad.php 文件，代码如下：

<?php
require_once('myClass.class.php');
require_once('xoad.php');
XOAD_Server::allowClasses('myClass');
if (XOAD_Server::runServer()) {
    exit;
}
?>
<?= XOAD_Utilities::header('.') ?>
<script type="text/javascript">
    var myobj = <?= XOAD_Client::register(new myClass()) ?>;
    var mystring = 'My XOAD Application';
    myobj.onStLengthError = function(error) {
        alert(error.message);
        return true;
    }
    myobj.stLength(mystring, function(result) {
        document.write('String: ' + mystring + '<br />Length: ' + result);
    });
</script>

在浏览器中加载该文档，页面将显示：

String: My XOAD Application
Length: 19

下面是对代码的详细解释：
- require_once('myClass.class.php'); 和 require_once('xoad.php'); ：包含所需的类文件和XOAD核心文件。
- XOAD_Server::allowClasses('myClass'); ：告知XOAD允许访问的类。
- XOAD_Server::runServer() ：检查是否为客户端回调请求，若是则进行相应处理。
- XOAD_Utilities::header('.') ：注册客户端头文件。
- var myobj = <?= XOAD_Client::register(new myClass()) ?>; ：将 myClass.class.php 中声明的公共方法导出为JavaScript对象。

5. XOAD HTML的使用

XOAD HTML是一个扩展，可使用XOAD轻松更新HTML页面元素，下面介绍两个常用方法。
- XOAD_HTML::getElementById()
以下是使用该方法的示例代码：

<?php
class Updater
{
    function change()
    {
        $mytext =& XOAD_HTML::getElementById('display');
        $mytext->style['backgroundColor'] = 'yellow';
        $mytext->innerHTML = 'My background color has changed.';
    }
}
define('XOAD_AUTOHANDLE', true);
require_once('xoad.php');
?>
<?= XOAD_Utilities::header('.') ?>
<div id="display">My background color is white.</div>
<script type="text/javascript">
    var myobj = <?= XOAD_Client::register(new Updater()) ?>;
</script>
<a href="#server" onclick="myobj.change(); return false;">Change It!</a>

在这个示例中，定义了一个 Updater 类，其中的 change() 函数使用 XOAD_HTML::getElementById() 方法找到ID为 display 的页面元素，并更改其文本和背景颜色。该函数作为JavaScript对象 myobj 的方法，可像其他JavaScript方法一样调用。

以下是该过程的mermaid流程图：

graph TD;
    A[点击链接] --> B[调用myobj.change()];
    B --> C[XOAD_HTML::getElementById('display')];
    C --> D[更改文本和背景颜色];
    D --> E[页面元素更新];

• XOAD_HTML::getElementsByTagName()
  该方法与JavaScript的同名方法类似，用于返回具有特定元素类型的元素数组。示例代码如下：

<?php
class Updater
{
    function change()
    {
        $mydivs =& XOAD_HTML::getElementsByTagName('div');
        $mydivs->style['height'] = '60';
        $mydivs->style['width'] = '350';
        $mydivs->style['backgroundColor'] = 'lightgreen';
        $mydivs->innerHTML = 'Size and color changed by XOAD';
    }
}
define('XOAD_AUTOHANDLE', true);
require_once('xoad.php');
?>
<?= XOAD_Utilities::header('.') ?>
<script type="text/javascript">
    var myobj = <?= XOAD_Client::register(new Updater()) ?>;
</script>
<style>
    div {
        border:1px solid black;
        height:80;
        width:150
    }
</style>
<div>Div 1</div>
<br />
<div>Div 2</div>
<br />
<div>Div 3</div>
<a href="#server" onclick="myobj.change(); return false;">Update All Divs</a>

此示例中， change() 函数使用 XOAD_HTML::getElementsByTagName('div') 方法找到所有 <div> 元素，并更改它们的样式和大小。

下面是相关操作的步骤列表：
1. 定义 Updater 类及其 change() 函数。
2. 使用 XOAD_HTML::getElementsByTagName('div') 获取所有 <div> 元素。
3. 更改元素的样式属性。
4. 将 change() 函数作为JavaScript对象的方法调用。

6. XOAD的高级编程

• XOAD事件 ：XOAD框架支持事件，一个客户端发起的XOAD事件可存储在服务器上，供其他客户端检测，这使得构建用户交互的复杂应用成为可能，如聊天、群件等协作工具。
• 缓存处理 ：使用 XOAD_Cache 类可在服务器上进行缓存，能显著提高性能，特别是在处理耗时的服务器端例程时，如对大型数据集进行排序或对大型数据库表进行查询。
• 自定义控件 ：可使用 XOAD_Controls 类定义自定义客户端控件。当前XOAD版本为0.6.0.0，若下载的版本不同，需参考下载中的文档。

7. 相关学习资源

为了进一步学习JavaScript、PHP和Ajax，以下是一些有用的网站：
| 类别 | 网站名称 | 网址 |
| ---- | ---- | ---- |
| JavaScript | JavaScript Workshop | http://www.jsworkshop.com/ |
| JavaScript | DOM Scripting Task Force | http://domscripting.webstandards.org/ |
| JavaScript | Mozilla Project’s JavaScript section | http://www.mozilla.org/js/ |
| PHP | PHP home site | http://www.php.net/ |
| PHP | PHPBuilder | http://www.phpbuilder.com/ |
| PHP | Planet PHP | http://www.planet - php.net/ |
| 网页开发 | W3C | http://www.w3.org/ |
| 网页开发 | WebReference.com | http://www.webreference.com/ |
| 网页开发 | Digital Web Magazine | http://www.digital - web.com/ |
| Ajax | Ajax Matters | http://www.ajaxmatters.com/ |
| Ajax | Ajaxian | http://ajaxian.com/ |
| Ajax | Crack Ajax | http://www.crackajax.net |

XOAD：服务器端Ajax工具包的全面解析

8. 术语解释

为了更好地理解相关技术，下面对一些常用的Web开发术语进行解释：
| 术语 | 解释 |
| ---- | ---- |
| ActiveX | 由Microsoft开发的技术，用于创建组件，主要用于Windows计算机，其组件可嵌入网页。 |
| AHAH (Asynchronous HTML and HTTP) | Ajax的简化子集，用于在不刷新页面的情况下更新网页文本。 |
| Ajax (Asynchronous JavaScript and XML) | 多种技术的组合，允许JavaScript向服务器发送请求、接收响应并更新页面部分内容，而无需加载新页面。 |
| 算法 | 解决问题的过程、方法或例程。 |
| 锚点 | 在HTML中，是文档内的命名位置，使用 <a> 标签指定，也可作为链接。 |
| 小程序 | 设计用于嵌入网页的Java程序。 |
| 参数 | 调用函数时传递给函数的参数，在函数调用的括号内指定。 |
| 数组 | 一组可通过相同名称和索引引用的变量。 |
| 属性 | 可在HTML标签内定义的属性值，用于指定元素的样式、对齐方式等方面。 |
| 赋值 | 将变量设置为特定值。 |
| 布尔值 | 一种只能存储两个值（true和false）的变量类型。 |
| 浏览器检测 | 一种脚本技术，用于检测客户端使用的特定浏览器，以提供多浏览器兼容性。 |
| 缓存 | 浏览器用于存储已访问页面的内部内存，使下次请求时加载更快。 |
| 级联样式表 (CSS) | W3C用于为HTML文档应用样式的标准，可控制字体、颜色、边距、边框和定位。 |
| 类 | 面向对象编程语言中的一种结构，允许创建对象。 |
| 注释 | 程序员在代码段内编写的注释，用于阐明代码的操作方式，便于后续维护，代码执行时会被忽略。 |
| 公共网关接口 (CGI) | 一种标准化方法，用于运行服务器端程序，无论其使用何种语言编写。 |
| 连接 | 将两个字符串组合成一个更长的字符串。 |
| 条件语句 | 如果特定条件为真，则执行操作的语句，通常使用 if 语句。 |
| 构造函数 | 用于创建和初始化新对象的类方法。 |
| 调试 | 查找程序或脚本中的错误（即bug）的过程。 |
| 声明 | 声明变量的名称和类型的语句。 |
| 递减 | 将变量的值减1，在JavaScript和PHP中可使用递减运算符 -- 实现。 |
| 弃用 | W3C用于描述不再推荐使用且未来可能不支持的HTML标签或其他项的术语，例如HTML 4.0中 <font> 标签已被弃用，因为样式表可提供相同功能。 |
| 域名系统 (DNS) | 用于在互联网上将域名与IP地址关联的系统。 |
| 文档类型声明 (DTD) | 在HTML文档开头声明文档所遵循的HTML版本的声明。 |
| 文档对象模型 (DOM) | JavaScript可用于引用浏览器窗口和HTML文档部分的一组对象，W3C DOM是最新浏览器支持的标准化版本，允许访问网页内的每个对象。 |
| 动态HTML (DHTML) | HTML、JavaScript、CSS和DOM的组合，可创建动态网页，它不是W3C标准或HTML版本。 |
| 元素 | 数组中的单个成员，通过索引引用；在DOM中，是由HTML标签定义的单个节点。 |
| 错误处理 | 使用编码技术使脚本优雅地处理可能出现的错误情况。 |
| 事件 | 通常由用户操作导致的条件，可由脚本检测。 |
| 事件处理程序 | 当事件发生时将执行的JavaScript语句或函数。 |
| 表达式 | 变量、常量和运算符的组合，可计算为单个值。 |
| 特性检测 | 一种脚本技术，在使用某个特性（如DOM方法）之前检测其是否受支持，以避免浏览器兼容性问题。 |
| Firefox | Mozilla流行的符合标准的网页浏览器。 |
| 浮点数 | 浮点小数。 |
| 表单 | 用于允许网站用户向服务器发送信息的HTML结构。 |
| 格式化 | 使用缩进、换行和空格使代码更易于阅读和理解。 |
| 函数 | 一组可通过函数名和参数引用的语句。 |
| 全局变量 | 可在网页的所有代码中使用的变量，在任何函数外部声明（首次使用）。 |
| Greasemonkey | Firefox浏览器的扩展，允许用户脚本修改网页的外观和行为。 |
| 超文本标记语言 (HTML) | 网页文档使用的语言，JavaScript语句不是HTML，但可包含在HTML文档中，并在访问者的浏览器中执行，PHP代码块也可嵌入HTML中，并在服务器上执行。 |
| 超文本传输协议 (HTTP) | 网页服务器和浏览器通信的标准。 |
| 递增 | 将变量的值加1，在JavaScript和PHP中使用递增运算符 ++ 实现。 |
| 整数 | 整数（正或负）。 |
| Internet Explorer (IE) | Microsoft的网页浏览器，可用于包括Windows和Mac在内的各种平台。 |
| 解释器 | 解释代码语句并执行操作的程序，JavaScript解释器嵌入在访问者的网页浏览器中，PHP解释器安装在网页服务器上。 |
| Java | 由Sun Microsystems开发的面向对象语言，Java小程序可嵌入网页，JavaScript语法类似但与Java不同。 |
| JavaScript | 用于网页文档的脚本语言，语法大致基于Java，由Netscape开发，现在大多数流行浏览器都支持。 |
| 层 | 网页中可定位且可按定义方式与其他部分重叠的区域，也称为可定位元素。 |
| 局部变量 | 仅在一个函数中可用的变量，在函数内部声明（首次使用）。 |

9. 总结

XOAD作为服务器端的Ajax工具包，提供了一种独特的方式，使服务器端PHP类中的方法能够以JavaScript对象的形式供客户端程序使用，与客户端技术形成了有趣的对比。通过简单的示例和高级编程特性，如事件处理、缓存和自定义控件，展示了其在构建复杂交互式Web应用中的强大能力。同时，文中还提供了丰富的学习资源，帮助开发者进一步探索JavaScript、PHP和Ajax的世界。

以下是使用mermaid绘制的XOAD整体功能流程图：

graph LR;
    A[客户端请求] --> B[XOAD服务器处理];
    B --> C{是否为回调请求};
    C -- 是 --> D[执行服务器端方法];
    C -- 否 --> E[正常页面加载];
    D --> F[返回结果到客户端];
    F --> G[客户端更新页面];
    H[服务器端事件] --> I[存储在服务器];
    I --> J[其他客户端检测];
    K[服务器端缓存] --> L[提高性能];
    M[自定义控件] --> N[增强用户体验];

希望这些内容能帮助你更好地理解和使用XOAD以及相关技术，不断提升Web开发的技能和水平。如果你在实践过程中有任何问题，不妨参考上述提供的学习资源，相信会对你有所帮助。