站长论坛

标题: xajax中文手册（HonestQiao第一版，FlyingHail修改版）<三> [打印本页]

作者: tzlink 时间: 2007-9-14 22:34
标题: xajax中文手册（HonestQiao第一版，FlyingHail修改版）<三>
<三>包含的内容：
* 如何处理表单数据?
* 如何给xajax增加定制功能?
* 如何创建Loading...信息?
* 如何改变xajax的编码设置?
* 我能在私有或者收费产品之中使用xajax吗?

最早发布在我的个人Blog，文章地址：http://www.flyinghail.net/?p=44

原文：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.getFormValues()方法会自动的从表单提取数据，并作为一个参数提交给xajax注册的PHP函数.
　　xajax.getFormValues() 仅仅需要一个参数, 可以是你需要处理得表单的id, 或者是一个实际的表单对象. 你也可以使用xajax.getFormValues作为一个参数给xajax 函数, 例如:

PHP:

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

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 类:

PHP:

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 函数之中:

PHP:

$objResponse = new myxajaxResponse();
$objResponse->addAssign("div1", "innerHTML", "Some Text");
$objResponse->addAddOption("select1","New Option","13");

return $objResponse;
　　被调用时，这个方法将会发送需要的javascript到页面并执行. 当然你也有另外一种做法Alternatively, 你可以在你的程序之中创建一个如下的javascript函数:

JavaScript:

<script type="text/javascript">
function addOption(selectId,txt,val)
{
      var objOption = new Option(txt,val);
      document.getElementById(selectId).options.add(objOption);
}
</script>
　　并且使用addScript() 调用这个方法:

PHP:

$objResponse->addScript("addOption('select1','New Option','13');");
如何创建Loading...信息？
　　xajax提供了一个简单但是重要的功能，那就是在xajax进行服务器调用时模拟反馈用的“Loading...”信息。xajax已经定义了两个 Javascript函数：xajax.loadingFunction()和xajax.doneLoadingFunction()，你可以用你自己定义的Javascript函数来重新定义它们以满足项目的需要，例如：

JavaScript:

xajax.loadingFunction = myCustomLoadingFunction;
或者

JavaScript:

xajax.loadingFunction = function(){xajax.$('loadingBar').style.display='block';};
　　loadingFunction()是ajax执行前执行的Javascript函数，doneLoadingFunction为ajax执行完毕后执行的Javascript函数

下面是一个完整的Loading...信息例子：

PHP:

<?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">
      </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

PHP:

//define ('XAJAX_DEFAULT_CHAR_ENCODING', 'utf-8' );
define ('XAJAX_DEFAULT_CHAR_ENCODING', 'ISO-8859-1' );
2、在构造函数中定义编码

PHP:

$xajax = new xajax("","xajax_",'ISO-8859-1');
$objResponse = new xajaxResponse('ISO-8859-1');
3、初始化后设置编码

PHP:

$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编码转换。方法如下：

PHP:

$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:

<?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

<完>

欢迎光临站长论坛 (https://www.tzlink.com/bbs/)