XOOPS模块开发快速入门中文翻译（七）

  由于这两天一直研究XOOPS的模块，所以找到了这篇很好的模块开发快速入门。
看了以后，就兴致勃勃的来开发模块了，可是开发的过程中遇到一些问题。
应该是我看的太快了，要学而时习之啊。因此翻译在这里。
＝＝＝＝＝＝＝＝＝＝＝===
作者：Surance Yin
邮箱：Suranceyin@yahoo.com.cn
主页：http://www.fltek.com.cn
================= 


 

第三章 ――建立一个具有Ajax功能的模块

Part 1 Building a simple module

Part 2 - using Smarty templates in a module

这一章，我会教会你怎么在模块里面用ajax。范例里面使用的是xajax. 当然，还有很多其他的ajax的工具，比如说主要由php实现的xajax, sajax 等. 还有一些是纯javascript脚本的，比如说scriptaculous. 当你看完这个教程的时候，可以大胆的尝试其他的ajax库。呵呵，我为什么会用Xajax呢？因为我比较熟悉php的编程，所以我觉得xajax更加灵活。
ajax是什么? 就是不用刷新网页的情况下更改网页的部分显示。这个功能很有用；尤其当要降低服务器负载的时候.
什么时候用ajax呢?举例说明：当你有一个数据表的时候，可以用ajax来存数据库.注意：ajax并不是万能的.这只是一个改善用户体验的工具而已。

开始吧！

第一步：下载模块文件

下载并安装这个文件。这里用的是第二章做好的文件。不同的是增加了一个class文件夹，文件夹里面有一个xajax子文件夹，里面放置了xajax的文件 (version 0.5 beta 4b)。另外，还要将 index.php重命名为index_from_part2.php 并创建一个新的 index file.

Tutorial module from part 2 with xajax files added tutorial

第二步：使用xajax

这里是新版本的 index.php:

<?php
// Tutorial
// Created by KaotiK
require('http://www.cnblogs.com/mainfile.php');

require_once(XOOPS_ROOT_PATH.'/modules/tutorial/functions.php');
require_once(XOOPS_ROOT_PATH.'/modules/tutorial/class/xajax/xajax_core/xajax.inc.php');

$xajax = new xajax();
$xajax->registerFunction("processFormData");
//$xajax->setFlag("debug", true);
$xajax->processRequest();

$Xjavapath=XOOPS_URL.'/modules/tutorial/class/xajax';
$xajaxjava=$xajax->getJavascript($Xjavapath);

$xoopsOption['template_main'] = 'tut_main.html';
require(XOOPS_ROOT_PATH.'/header.php');
$xoopsTpl->assign('xajaxjava', $xajaxjava);

require(XOOPS_ROOT_PATH.'/footer.php');
?>

让我们一步一步来解释:

require_once(XOOPS_ROOT_PATH.'/modules/tutorial/functions.php');
require_once(XOOPS_ROOT_PATH.'/modules/tutorial/class/xajax/xajax_core/xajax.inc.php');

第一行引用了functions文件。这个文件里面有所有我的 xajax 和其他方法。在开始使用 xajax之前,可以创建2个文件，一个储存ajax方法，一个储存其他方法。第二行引用了xajax 的必须文件.

$xajax = new xajax();
$xajax->registerFunction("processFormData");
//$xajax->setFlag("debug", true);
$xajax->processRequest();

第一行创建了一个xajax对象。使用xajax之前，要明确一点：所有要用到的方法都要先注册给xajax。这就是第二行做的事情： $xajax->registerFunction("processFormData");.我会在解释functions.php时候再次说明的.第三行会给出一个输出，可以用来调试 xajax. 第四行启动xajax的功能. 注意:如果要在xoops里面使用xajax，以上代码的顺序是不能变化的。比如，如果将$xajax->processRequest();写在 require(XOOPS_ROOT_PATH.'/header.php');后面就不行了。为什么？因为xajax必须在没有html输出之前调用processRequest（）方法, 而 XOOPS_ROOT_PATH.'/header.php具有一些html输出.

$Xjavapath=XOOPS_URL.'/modules/tutorial/class/xajax';
$xajaxjava=$xajax->getJavascript($Xjavapath);

xajax 的运行需要一个javascript 脚本文件。 因为要使用smarty，所以只能用这种方法来包含javascript文件了。第一行将xajax的根目录地址赋给变量$Xjavapath.然后再通过xajax内置的方法获取他所有的javascript脚本，并赋给变量$xajaxjava.

$xoopsOption['template_main'] = 'tut_main.html';
require(XOOPS_ROOT_PATH.'/header.php');
$xoopsTpl->assign('xajaxjava', $xajaxjava);

就像上一章讲到的，第一行指定了模板文件。第二行输出头部信息。第三行将xajax的脚本引用发给smarty模板。

require(XOOPS_ROOT_PATH.'/footer.php');
?>

这句上一章解释过了。

第三步- Functions.php

打开 tutorial/functions.php 写入以下代码：

<?php
function processFormData($arg)
{
// do some stuff based on $arg like query data from a database and
// put it into a variable like $newContent
$newContent = "Value of field: ".$arg['myfield'];

// Instantiate the xajaxResponse object
$objResponse = new xajaxResponse();

// add a command to the response to assign the innerHTML attribute of
// the element with id="SomeElementId" to whatever the new content is
$objResponse->assign("thisID","innerHTML", $newContent);

//return the xajaxResponse object
return $objResponse;
}

?>

function processFormData($arg)创建了一个函数processFormData. 这个函数接收参数$arg. 表单的所有内容会存放在 $arg 数组里面。
$newContent = "Value of field: ".$arg['myfield'];创建变量来接收$arg里面的一个信息.
$objResponse = new xajaxResponse(); xajax开始输出。当你的代码都写完后，就可以调用这个方法了。

$objResponse->assign("thisID","innerHTML", $newContent); 这里将变量$newContent赋给一个ID为“thisID”的控件的“innerHTML”属性。这个控件是类似于这样的： <div id="thisID">而不是 <div class="thisID">.
重点：:虽然可以赋任何值给这个控件，不过不能做任何html输出。如果输入 print_r($arg), 这样的语句，xajax就会出错了。

重点：:想要调试xajax的时候，取消index.php.中这句的注释 $xajax->setFlag("debug", true);

return $objResponse;结束函数，返回变量.

好，现在xajax搞定了，我们来看一下如何写模板文件

第四步- Tut_main.html 模板
打开 /tutorial/templates/tut_main.html.写入以下代码:

<{$xajaxjava}>

<form id="myform" name="myform" method="post" action="index.php">
<input type="text" name="myfield" id="myfield" />
<input type="button" value="Calculate" onclick="xajax_processFormData(xajax.getFormValues('myform'));" />
</form>

<div id="thisID"></div>

<{$xajaxjava}>这里会引用所有需要的javascript文件，放在模板的第一行。
<form id="myform" name="myform" method="post" action="index.php">这一行建立了名为 myform的表单 。表单的名称非常重要。
<input type="text" name="myfield" id="myfield" />创建了一个叫做myfield.的文本域
<input type="button" value="Calculate" onclick="xajax_processFormData(xajax.getFormValues('myform'));" />现在创建了一个向xajax提交数据的按钮.当用户点这个按钮后， 'myform'会向 xajax 的函数 processFormData发送数据。
注意： 当创建xajax函数的时候，方法名为processFormData但是在html文件中，函数名为： xajax_processFormData.
</form>结束表单.
注意: IE浏览器不允许嵌套表单，而firefox允许。嵌套表单的意思是一个form里面有另外一个form。当使用ajax这一点很重要,但是因为IE不支持，只能另寻它法了。 经常使用 xajax时,这个问题会显露出来。解决方案就是创建一个Form之前，关闭旧的Form。

<div id="thisID"></div>这就是xajax输出的地方。

第五步- 测试
重点： 在测试之前，请保证xoops的debugging 是 OFF的。 不然Xajax 会出错。Why? 因为xajax运行之前，不能有任何html输出。我们可以开始测试了。打开tutorial的主页面， 可以看到一个文本框和一个按钮。在文本框中输入 xajax is cool，按下按钮。可以看到输出： Value of field: xajax is cool.id为thisID的标签<div>负责更新数据。很酷吧！