web is easy!

新传的web综合技术博客 javascript php asp web2.0 QQ:3608194

导航

Xajax中文手册(二)

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

1. 包含xajax类库:

  

PHP:
  1. require_once("xajax.inc.php");

2. 实例化xajax 对象:

  

PHP:
  1. $xajax = new xajax();

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

  

PHP:
  1. $xajax->registerFunction("myFunction");

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

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

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

PHP:
  1. $xajax->processRequests();

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

PHP:
  1. <?php $xajax->printJavascript(); ?>

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

HTML:
  1. <div id="SomeElementId"></div>
  2.   <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条命令

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

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

PHP:
  1. $objResponse->addAssign("contentDiv","innerHTML","Some Text");
  2.         $objResponse->addAssign("checkBox1","checked","true");

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

PHP:
  1. $objResponse->addAppend("contentDiv","innerHTML","Some Text");

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

PHP:
  1. $objResponse->addPrepend("contentDiv","innerHTML","Some Text");

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

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

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

PHP:
  1. $objResponse->addClear("Input1","value");

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

PHP:
  1. $objResponse->addAlert("This is some text");

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

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

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

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

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

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

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

PHP:
  1. $objResponse->addRemove("Div2");

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

PHP:
  1. $objResponse->addCreate("childDiv", "h3", "myid");

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

PHP:
  1. $objResponse->addInsertAfter("parentDiv", "h3", "myid");

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

PHP:
  1. $objResponse->addInsert("parentDiv", "h3", "myid");

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

PHP:
  1. $objResponse->addCreateInput("form1", "text", "username", "input1");

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

PHP:
  1. $objResponse->addInsertInput("input5", "text", "username", "input1");

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

普通文本
PHP:
  1. $objResponse->addInsertInputAfter("input7", "text", "email", "input2");

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

普通文本
PHP:
  1. $objResponse->addEvent("contentDiv", "onclick", "alert(\'Hello World\');");

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

PHP:
  1. $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。

PHP:
  1. $objResponse->addRemoveHandler("contentDiv", "onclick", "content_click");

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

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

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

PHP:
  1. $objResponse = new xajaxResponse();
  2. $objResponse.addAssign("myInput1","value",$DataFromDatabase);
  3. $objResponse.addAssign("myInput1","style.color","red");
  4. $objResponse.addAppend("myDiv1","innerHTML",$DataFromDatabase2);
  5. $objResponse.addPrepend("myDiv2","innerHTML",$DataFromDatabase3);
  6. $objResponse.addReplace("myDiv3","innerHTML","xajax","<strong>xajax</strong>");
  7. $objResponse.addScript("var x = prompt("Enter Your Name");");
  8. 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响应.

posted on 2007-06-02 10:07  新传  阅读(1223)  评论(0编辑  收藏  举报

收藏到QQ书签