xajax中文手册(HonestQiao第一版,FlyingHail修改版)

  最近要用xajax,从网上找到了HonestQiao(乔楚)翻译的xajax中文手册第一版(因为引用地方太多,最初出处不可考了- -b),发现对应当前的版本已经不是太合适了,所以参考着xajax的wiki对该文进行了一些修改和补充:补充xajaxResponse类中方法的说明、添加“如何创建Loading…信息?”、“如何改变xajax的编码设置?”两项,都不是完整的原文翻译,主要是在个人理解的基础上描述的。

原文:http://xajax.sourceforge.net/
英文原版:Copyright © 2005 J. Max Wilson
简体中文翻译:HonestQiao(乔楚)/2005-12-7 17:23/(第一版)
修改&补充:FlyingHail/2006.08.01 16:43/参考:http://wiki.xajaxproject.org/

* 什么是xajax?
* xajax如何工作?
* 为什么我要使用xajax代替其他PHP的Ajax库?
* 如何在我的PHP脚本之中使用xajax?
* 如何更新内容?
* 如何处理表单数据?
* 如何给xajax增加定制功能?
* 如何创建Loading…信息?
* 如何改变xajax的编码设置?
* 我能在私有或者收费产品之中使用xajax吗?

什么是xajax?
  xajax是一个开源的 PHP 类库 它能够让你黏合HTML、CSS、Javascript和PHP,轻而易举的开发功能强大、基于WEB的AJAX应用软件. 使用xajax开发的应用软件,无需重新调入页面,就能够异步调用服务器端的PHP函数和更新内容.

xajax 如何工作?
  你的应用软件需要异步调用的PHP函数, xajax的PHP对象都生成了对应的封装好了的Javascript函数. 当被调用时,封装的函数使用Javascript的XMLHttpRequest对象与服务器异步通讯,调用xajax对象对应的PHP函数. 调用结束后, PHP函数由xajax返回一个xajax的XML响应传递给应用程序. XML响应包含了特定的指令和数据,他们可以被xajax的Javascript消息分析器解析,并且被用于更新你的应用程序的内容.

为什么我要使用xajax代替其他PHP的ajax库?
  你应该选择一个最适合你的项目需要的库。
  xajax 提供了以下的功能, 它们使得ajax富有特色而又功能强大:

  * xajax特殊的 XML 响应 / javascript 消息分析系统 帮助你做到, 自动的处理函数返回的数据,按照PHP函数返回的指令更新内容或者状态. 因为xajax作了这些工作, 你不需要写javascript的回调处理函数.

  * xajax反对将代码和数据紧密地杂糅在一起的主张, 并且保持xajax的代码从与他代码分离. 因为它是对象构造的, 你可以加上自己定制的功能给xajax去扩展xajaxResponse 类和使用addScript方法.

  * xajax 可以工作在 Firefox, Mozilla, 大部分基于 Mozilla 的浏览器, Internet Explorer, 和 Safari.

  * 除了更新元素的值和内含的HTML内容(innerHTML), xajax 还能用于更新样式(styles), css 类, 多选和单选按钮选择,甚至可以更新任何元素的属性.

  * xajax 支持使用一维或者多维数组、关联数组(哈希数组) 作为xajax函数的参数从javascript传送给PHP. 反之Additionally, 如果你传送一个javascript的对象给xajax函数,PHP函数将接受一个描叙对象属性的关联数组(哈希数组).

  * xajax 提供了一种简单的异步表单处理方式. 使用 xajax.getFormValues() javascript 方法, 你可以轻而易举的在表单之中提交一个描绘值的数组作为参数传送到xajax异步处理函数:
  xajax_processForm(xajax.getFormValues('formId');
  它可以处理复杂的input 元素名称 ,例如 “checkbox[][]” 或者 “name[first]” 产生的多维或者关联数组(哈希数组), 就是普通提交表单那样使用PHP的$_GET数组

  * 使用xajax你可以动态的发送附加的javascript作为请求的响应到你的应用软件中运行,而这就和动态的更新元素的属性一样方便.

  * xajax会自动比较PHP函数返回的数据与你已经标记需要修改的元素属性. 只有当新的数据确实可以改变现有的属性,属性才会真的被更新. 这将可消除程序在一定时间间隔内更新与当前内容相同或者不同的内容而出现的明显的闪烁.

  * 每一个通过xajax简单注册的函数都可以有不同的请求方式. 所有的函数默认使用POST方式,除非你明确的指定使用GET方式. 如果使用GET请求,你必须非常明确的考虑它确实是你所需要的

  * 如果没有指定URI,xajax将设法自动确定脚本的URI. xajax的自动确定算法经过了充分的验证,确保在大部分HTTPS或者未知端口的HTTP服务器上也可以正常的工作.

  * xajax使用UTF8编码所有的请求和响应,以确保支持绝大部分的字符和语言. xajax已经成功测试了多种不同的UNICODE字符,包括Spanish, Russian, Arabic, and Hebrew

  * 几乎所有xajax生成的javascript都可以通过动态的外部javascript包含到你的web程序之中. 当你在浏览器之中查看程序的源代码时,不会有Javascript的函数定义混杂在HTML标记之中.

  * xajax可以使用在Smarty模板系统之中,仅仅需要创建一个smarty变量就可以包含xajax的javascript:
   $smarty->assign('xajax_javascript', $xajax->getJavascript());
   然后你可以使用在header模版之中使用
   [smarty num=1]{$xajax_javascript}[/smarty]
   从而把xajax应用到你的站点.

如何在我的PHP脚本之中使用xajax?
  xajax的设计是如此的富有特色,以至于不管是已有的web程序还是新的项目,它都能够被极其简单的部署和应用. 仅仅需要七步,你就可以在几乎任何PHP脚本之中加入xajax的强大功能:

1. 包含xajax类库:

  require_once("xajax.inc.php");

2. 实例化xajax 对象:

  $xajax = new xajax();

3. 注册你需要通过xajax调用的PHP函数的名称:

  $xajax->registerFunction("myFunction");

4. 编写注册的PHP函数,并且在函数之中使用xajaxResponse 对象返回XML指令:

function myFunction($arg)
{
  // 对$arg做一些基本处理例如从数据库检索数据
  // 然后把结果赋值给变量,例如$newContent
  // 实例化xajaxResponse 对象
  $objResponse = new xajaxResponse();
  // 添加指令到响应之中,用于指派
  // 指定元素(例如id="SomeElementId")的innerHTML属性的新的内容
  $objResponse->addAssign("SomeElementId","innerHTML", $newContent);
  //返回xajaxResponse 对象生成的XML响应
  return $objResponse;
}

5. 在你的脚本输出任何信息之前,调用xajax用于接管请求:

$xajax->processRequests();

6. 在页面的 标签之间, 告诉xajax生成所必需的Javascript:

< ?php $xajax->printJavascript(); ?>

7. 在程序中,从Javascript事件或者函数调用前面注册的函数:

<div id="SomeElementId"></div>
  <button onclick="xajax_myFunction(SomeArgument);">

  就这么简单. xajax 会处理其他所有的事情. 你所要做的主要工作就是编写PHP函数,然后从函数之中返回xajax的XML响应。而后者通过xajaxResponse类可以非常简单的生成.

如何更新内容?
  xajax最富有特色的功能或许就是xajaxResponse类. 其他的Ajax库需要你自己编写Javascript的回调句柄去处理一个异步请求返回的数据并更新内容. xajax, 从另外一个角度来说, 允许你使用PHP简单的控制内容. xajaxResponse 让你在PHP函数之中创建XML指令返回给你的程序. XML将被xajax的消息分析器解析,指令将告诉xajax如何更新程序的内容和状态. xajaxResponse类目前提供了以下指令:
* addConfirmCommands (integer $iCmdNumber, string $sMessage)
弹出一个显示内容为$sMessage的confirm确认提示框
如果点击确认框中的取消将跳过后面的$iCmdNumber条命令

$objResponse->addConfirmCommands(1, "Do you want to preview the new data?");

* addAssign(string $sTarget, string $sAttribute, string $sData)
给ID为$sTargetId的元素的$sAttribute属性赋值$sData

$objResponse->addAssign("contentDiv","innerHTML","Some Text");
$objResponse->addAssign("checkBox1","checked","true");

* addAppend(string $sTarget, string $sAttribute, string $sData)
给ID为$sTargetId的元素的$sAttribute属性后面追加值$sData

$objResponse->addAppend("contentDiv","innerHTML","Some Text");

* addPrepend(string $sTarget, string $sAttribute, string $sData)
给ID为$sTargetId的元素的$sAttribute属性前面添加值$sData

$objResponse->addPrepend("contentDiv","innerHTML","Some Text");

* addReplace(string $sTarget, string $sAttribute, string $sSearch, string $sData)
替换命名为$sTargetId的元素的$sAttribute属性的值之中的$sSearch为$sData

$objResponse->addReplace("contentDiv","innerHTML","text","<strong>text</strong>");

* addClear(string $sTarget, string $sAttribute)
清空命名为$sTargetId的元素的$sAttribute属性的值

$objResponse->addClear("Input1","value");

* addAlert(string $sMsg)
显示一个内容为 $sMsg 的警告框(Javascript的Alert)

$objResponse->addAlert("This is some text");

* addRedirect(string $sURL)
转跳到另一个地址$sURL,使用addScript()方法实现

$objResponse->addRedirect("http://www.xajaxproject.org");

* addScript(string $sJS)
执行Javascript代码 $sJS

$objResponse->addScript("var txt = prompt('get some text');");

* addScriptCall()
执行Javascript代码中的函数,第一个参数表示Javascript函数名,后面的参数为Javascript函数的参数

$objResponse->addScriptCall("myJSFunction", "arg 1", "arg 2", 12345);

* addRemove(string $sTarget)
从你的页面之中移除ID为$sTarget的元素

$objResponse->addRemove("Div2");

* addCreate(string $sParent, string $sTag, string $sId)
在已经存在的ID为$sParentId的元素内添加一个名叫$sTag的子元素,并且把它的id赋值为$sId。INPUT类型的元素须使用addCreateInput()方法.。

$objResponse->addCreate("childDiv", "h3", "myid");

* addInsert(string $sBefore, string $sTag, string $sId)
在已经存在的ID为$sBefore的元素前面添加一个名叫$sTag的元素,并且把它的id赋值为$sId。

$objResponse->addInsertAfter("parentDiv", "h3", "myid");

* addInsertAfter(string $sAfter, string $sTag, string $sId)
在已经存在的ID为$sBefore的元素后面添加一个名叫$sTag的元素,并且把它的id赋值为$sId。

$objResponse->addInsert("parentDiv", "h3", "myid");

* addCreateInput(string $sParent, string $sType, string $sName, string $sId)
在已经存在的ID为$sParent的元素内添加一个类型为$sType,Name为$sName,ID为$sId的INPUT元素。

$objResponse->addCreateInput("form1", "text", "username", "input1");

* addInsertInput(string $sBefore, string $sType, string $sName, string $sId)
在已经存在的ID为$sBefore的元素前面添加一个类型为$sType,Name为$sName,ID为$sId的INPUT元素。

$objResponse->addInsertInput("input5", "text", "username", "input1");

* addInsertInputAfter(string $sAfter, string $sType, string $sName, string $sId)
在已经存在的ID为$sAfter的元素后面添加一个类型为$sType,Name为$sName,ID为$sId的INPUT元素。

$objResponse->addInsertInputAfter("input7", "text", "email", "input2");

* addEvent(string $sTarget, string $sEvent, string $sScript)
为ID是$sTarget的元素后面添加一个名为$sEvent的事件,其执行的脚本为$sScript

$objResponse->addEvent("contentDiv", "onclick", "alert(\'Hello World\');");

* addHandler(string $sTarget, string $sEvent, string $sHandler)
为ID是$sTarget的元素名为$sEvent的事件添加一个句柄$sHandler(即Javascript函数名),可以为一个事件添加多个句柄。

$objResponse->addHandler("contentDiv", "onclick", "content_click");

# addEvent与addHandler的区别:
addEvent关心的是事件被触发,即onclick中的on-,addHandler关心的是事件触发了什么操作,即onclick中的click。
其差别类似于为一个元素定义事件属性和使用addEventListener()方法定义一个事件句柄。

* addRemoveHandler(string $sTarget, string $sEvent, string $sHandler)
删除ID是$sTarget的元素名为$sEvent的事件中的句柄$sHandler。

$objResponse->addRemoveHandler("contentDiv", "onclick", "content_click");

* addIncludeScript(string $sFileName)
包含名为$sFileName的Javascript文件。

$objResponse->addIncludeScript("functions.js");

一个独立的XML响应可能包含多个指令, 他们将按照加入响应的顺序执行. 让我们用一个用户在你的程序之中点击按钮为例来进行说明. Onclick事件调用PHP函数对应的javascript封装.这个封装通过XMLHttpRequest发送异步请求到服务器给xajax调用 PHP函数. PHP函数做了一次数据库查询, 处理了一些数据, 或者序列化. 然后你使用xajaxResponse类生成包含多个指令的xajax的XML响应 ,并回送给xajax的消息分析器执行:

$objResponse = new xajaxResponse();
$objResponse.addAssign("myInput1","value",$DataFromDatabase);
$objResponse.addAssign("myInput1","style.color","red");
$objResponse.addAppend("myDiv1","innerHTML",$DataFromDatabase2);
$objResponse.addPrepend("myDiv2","innerHTML",$DataFromDatabase3);
$objResponse.addReplace("myDiv3","innerHTML","xajax","<strong>xajax</strong>");
$objResponse.addScript("var x = prompt("Enter Your Name");");
return $objResponse;

xajax消息分析器将会解析XML消息,并执行以下工作:

2. id为myInput1的元素的值将被赋值为 $DataFromDatabase的数据.
3. id为myInput1的元素的颜色将会变为red.
4. $DataFromDatabase2的数据会被追加到id为myDiv1的元素innerHTML之中.
5. $DataFromDatabase3的数据会被预先赋值给id为myDiv2的元素innerHTML之中.
6. id为myDiv3的元素的innerHTML 之中所有的”xajax”将被替换为”xajax“; 使得所有的单词 xajax 显示加粗.
7. 一个提示框将会显示,用来询问用户姓名,从提示框返回的值会被命名为x的javascript变量接收.

  所有这些都由构成的PHP函数在服务器端执行并返回xajax的XML响应.

如何处理表单数据?
  xajax使得异步处理表单数据非常非常的简单. xajax.getFormValues()方法会自动的从表单提取数据,并作为一个参数提交给xajax注册的PHP函数.
  xajax.getFormValues() 仅仅需要一个参数, 可以是你需要处理得表单的id, 或者是一个实际的表单对象. 你也可以使用xajax.getFormValues作为一个参数给xajax 函数, 例如:
  xajax_processFormData(xajax.getFormValues('formId'));
  xajax 会生成一个与表单数据对应的请求字符串给xajax服务器解析,然后以一个与表单数据对应的数组传递给PHP函数,就想你提交表单使用PHP的$_GET数组那么简单.
  xajax可以处理类似普通多维数组或者联合数组(哈希数组)等形式的复杂输入名字. 例如, 如果一个表单有三个多选框(checkboxes)并且都命名为 “checkbox[]”, 但是值分别为 “check1”, “check2”, 和 “check3”, 然后使用 xajax.getFormValues 函数作为参数传递给xajax 函数, 则 PHP 函数会接受到一个如下的数组:

array (
'checkbox' =>
array (
0 => 'check1',
1 => 'check2',
2 => 'check3',
),
)

作为函数参数的数组的结构与传统意义上提交表单之后的$_GET数组的结构相同. 你可以访问数组之中的checkbox 的数据: $aFormData[‘checkbox’][0]

如何给xajax增加定制功能?
  xajax可以使用各种附加的用户定制功能进行扩展. 正因为xajax是完全面向对象的,并且可以使用xajaxResponse的addScript()方法,所以他具有无限扩展的可能. 你可以创建你自己的xajax响应类,来继承xajaxResponse 类以及它的方法,并加上你自己定制的响应. 让我们用一个定制的增加选择组合框(select combo boxes)选项的响应指令的例子来说明. 你可以象下面这样扩展xajaxResponse 类:

class myxajaxResponse extends xajaxResponse
{
function addAddOption($sSelectId, $sOptionText, $sOptionValue)
{
$sScript  = "var objOption = new Option('".$sOptionText."','".$sOptionValue."');";
$sScript .= "document.getElementById('".$sSelectId."').options.add(objOption);";
$this->addScript($sScript);
}
}

  现在, 取代xajaxResponse 对象的初始化, 把你自己的 myxajaxResponse 对象的初始化定义到你的 xajax PHP 函数之中:
$objResponse = new myxajaxResponse();
$objResponse->addAssign("div1", "innerHTML", "Some Text");
$objResponse->addAddOption("select1","New Option","13");
return $objResponse;

  被调用时,这个方法将会发送需要的javascript到页面并执行. 当然你也有另外一种做法Alternatively, 你可以在你的程序之中创建一个如下的javascript函数:
<script type="text/javascript">
function addOption(selectId,txt,val)
{
var objOption = new Option(txt,val);
document.getElementById(selectId).options.add(objOption);
}
</script>

  并且使用addScript() 调用这个方法:
$objResponse->addScript("addOption('select1','New Option','13');");

如何创建Loading…信息?
  xajax提供了一个简单但是重要的功能,那就是在xajax进行服务器调用时模拟反馈用的“Loading…”信息。xajax已经定义了两个Javascript函数:xajax.loadingFunction()和xajax.doneLoadingFunction(),你可以用你自己定义的Javascript函数来重新定义它们以满足项目的需要,例如:
xajax.loadingFunction = myCustomLoadingFunction;
或者
xajax.loadingFunction = function(){xajax.$('loadingBar').style.display='block';};
  loadingFunction()是ajax执行前执行的Javascript函数,doneLoadingFunction为ajax执行完毕后执行的Javascript函数

下面是一个完整的Loading…信息例子:

< ?php
require("xajax.inc.php");
function slow_function()
{
$objResponse = new xajaxResponse();
sleep(2); //we'll do nothing for two seconds
$objResponse->addAlert("All done");
return $objResponse;
}
$xajax = new xajax();
$xajax->registerFunction('slow_function');
$xajax->processRequests();
?><html>
<head>
<title>Loading Bar Demo</title>
< ? $xajax->printJavascript(); ?>
</head>
<body>
<script type="text/javascript">
<!--
xajax.loadingFunction =
function(){xajax.$('loadingMessage').style.display='block';};
function hideLoadingMessage()
{
xajax.$('loadingMessage').style.display = 'none';
}
xajax.doneLoadingFunction = hideLoadingMessage;
// --></script>
<input type="button" onclick="xajax_slow_function();" value="Slow Function" />
<div id="loadingMessage" style="font-size: 22px; display: none;">
Loading...
</div>
</body>
</html>

如何改变xajax的编码设置?
  xajax默认是UTF-8编码的,如果打算在其他编码的页面中使用xajax,可以参考下面的操作:

1、重新定义XAJAX_DEFAULT_CHAR_ENCODING

//define ('XAJAX_DEFAULT_CHAR_ENCODING', 'utf-8' );
define ('XAJAX_DEFAULT_CHAR_ENCODING', 'ISO-8859-1' );

2、在构造函数中定义编码

$xajax = new xajax("","xajax_",'ISO-8859-1');
$objResponse = new xajaxResponse('ISO-8859-1');

3、初始化后设置编码

$xajax = new xajax();
$xajax->setCharEncoding('ISO-8859-1');
$objResponse = new xajaxResponse();
$objResponse->setCharEncoding('ISO-8859-1');

以上三个方法使用其中一种,或者搭配使用2和3。
如果你总是获得invalid XML的错误信息,而且你仅仅想要显示字符,不是进行比较和处理(必须安装了PHP的mbstring扩展)。你可以尝试使用xajax->outputEntitiesOn()开启转化特殊的字符的功能。

即使你按照上面的说明设置了返回的编码,但是XmlHttpRequest类提交的数据依然是UTF-8编码的。xajax为我们提供了decodeUTF8InputOn()方法来开启UTF-8编码转换。方法如下:

$xajax = new xajax();
$xajax->setCharEncoding('ISO-8859-1');
$xajax->decodeUTF8InputOn();

提示:
* 尽可能的使用UTF-8编码
* 如果你在xajax构造函数或者使用$xajax->setCharEncoding()方法定义了编码类型,不要忘记在xajaxResponse构造时进行同样的操作。如果你在xajax和xajaxResponse中使用不同的编码设置,在IE下将会产生XML错误。
* 不管你设置为使用什么编码,从Javascript传递过来的数据都是UTF-8编码的。使用$xajax->decodeUTF8InputOn()方法打开编码转换功能,可以将UTF-8自动转换成你设置的编码。

下面是一个完整的编码设置例子:

< ?php
require ('xajax.inc.php');
function testEncoding($strText)
{
$objResponse = new xajaxResponse('ISO-8859-1');
$objResponse->addAssign("div1","innerHTML",$strText);
return $objResponse;
}
$xajax = new xajax();
$xajax->setCharEncoding('ISO-8859-1');
$xajax->decodeUTF8InputOn();
$xajax->registerFunction("testEncoding");
$xajax->processRequests();
?>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
< ?php
$xajax->printJavascript();
?>
</head>
<body>
<div id="div1"></div>
<form id="form1" onsubmit="return false;">
<input type="text" value="Español" id="text1" name="text1" />
<input type="submit" value="Submit" onclick="xajax_testEncoding(xajax.$('text1').value);" />
</form>
</body>
</html>

我能在私有或者收费产品之中使用xajax吗?
  简而言之: 能,只要你愿意。
  xajax PHP 类库的发布遵循 GNU Lesser General Public License (LGPL).

2006.08.01 FlyingHail 修改&补充
简体中文手册版权所有 © 2005 HonestQiao(乔楚)
Copyright © 2005 J. Max Wilson

11 thoughts on “xajax中文手册(HonestQiao第一版,FlyingHail修改版)

  1. dominic 提到的问题是 UTF-8 很常见的问题,一个最基本的惯例,也应该养成习惯,php 文件用 UTF-8 不要加 BOM。

    其实任何文件使用 UTF-8 都建议不要加 BOM,没必要还会引起很多问题,就像 dominic 里面 BOM 解释的最后一句 “BOM 的本意是在 UTF-16 中用来表示高低字节序列的。”,我记得是这样说的:UTF-16 所有的字符都是两个字节,这样有些原本就是单字节字符(似乎就是ASCII的字符)就有一个问题,到底是00 XX还是XX 00,这两种对于 UTF-16 来说都是正确的,于是就有了 BOM 来告诉读取 UTF-16 字符的软件这些字符的字节顺序是 00 在前还是 00 在后。这个问题在 UTF-8 是不存在的,有没有 BOM 软件都能够正确的识别 UTF-8 ,所以 UTF-8 的BOM完全是没必要的。

  2. 你好,我是剛准備用xajax的.但在我的測試中,
    addReplace這個函數出了點問題.
    php中代碼為:
    $objResponse->addReplace(‘div2′,’innerHTML’,’test’,’aaaaaa’);
    (將id為div2的div中test換成’aaaaaa’)

    我調試發現php端產生的xml為

    s
    test

    r
    aaaaaa

    這樣在客戶端時
    xajax.js中相應的replace找不到要被換的值
    請問你遇到過嗎?
    謝謝了

  3. 应该不单单生成这样的xml吧,应该还包括
    n => rp
    t => div2
    p=>innerHTML
    这三项吧
    其实xajax之所以能够由php控制js就是靠传递特定的xml然后由js判断执行一些已经定义好的函数,这个函数我并没有测试过,建议打开xajax的debug看一下,另外把div2的innerHTML alert出来看看对不对

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.