xajax 最大的特色是支援 UTF-8 及 Smarty,client 端不用自己寫 callback,client 端送出運算請求給 Server 端後,Server 端可以直接把運算結果傳送到網頁元素上。至於 Smarty 支援的部份,因為 Client 端只需一行 $xajax->printJavascript(); 就可以產生 AJAX 所需的 Javascript,所以應該大部份的 Template engine 也都支援。
如何安裝xajax
xajax安裝環境:
- Apache Web伺服器或Windows XP/2003上的IIS伺服器
- PHP 4.3.x或PHP 5.x
- 流覽器最低要求:IE5.5,Firefox 1.0,或相當的基於Gecko內核的流覽器,Safari 1.3,Opera 8.5。老版本僅對GET方法有效。
安裝方式:
xajax 版本發佈
- xajax 0.2 = 穩定版 (當前版本號 0.2.5)
- xajax 0.5 = 測試版 (當前版本號 0.5 beta 2)
[ 按此下載xajax0.2.5 ]將套裝軟體解壓並將其拷貝至你的WEB站點目錄下。如果你願意,你可以在你的WEB伺服器下建立一個名稱為“xajax”的目錄,並將所有檔放進去(確信你要知道頁面的相對URL位址,你才能夠提供正確的xaja的安裝URL地址)。注意如果想讓常式生效,你必須將"examples"目錄下的"thewall"目錄設為可寫。
xajax使用範例
<?php require_once( 'xajax/xajax.inc.php' ); //引入xajax函式 //建立xajax物件 $xajax=new xajax(); //以下決定是否要使用 xajax debug //$xajax->debugOn(); // Uncomment this line to turn debugging on //註冊在php中所要呼叫的函式 $xajax->registerFunction("myFunction"); //處理呼叫 $xajax->processRequests(); ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>xajax範例</title> <!--產生xajax初始化所需的代碼--> <?php $xajax->printJavascript('xajax/'); ?> </head> <body> <form id="form1" action="javascript:void(null);"> 請輸入你的大名:<input type="text" name="username"> <!--用來觸發xajax事件的button--> <input type="button" name="submit" value="送出" onClick="xajax_myFunction(xajax.getFormValues('form1'));"> </form> <!--顯示回傳結果的div--> <div id="outputDiv"></div> </body> </html> <?php function myFunction($aFormValues) { //創建一個xajaxResponse物件 $objResponse = new xajaxResponse(); //接收表單post的資料 $username = $aFormValues['username']; if (trim($username) == "") { //產生錯誤訊息的alert $objResponse->addAlert("名字尚未輸入!"); //回傳xajaxResponse物件 return $objResponse; } else { //設定id為"outputDiv"的div元素的innerHTML屬性為"xxx,你好!!" $objResponse->addAssign("outputDiv","innerHTML",$username.',你好!!'); //回傳xajaxResponse物件 return $objResponse; } } ?> |
詳細說明:
<?php require_once( 'xajax/xajax.inc.php' ); //引入xajax函式 //建立xajax物件 $xajax=new xajax(); //以下決定是否要使用 xajax debug //$xajax->debugOn(); // Uncomment this line to turn debugging on //註冊在php中所要呼叫的函式 $xajax->registerFunction("myFunction"); //處理呼叫 $xajax->processRequests(); ?> |
初始化xajax函式,注意紅字部分為所要呼叫的function名稱。
<?php $xajax->printJavascript('xajax/'); ?> |
在你的HTML的<head></head> 標籤之間加入此php語法以產生xajax初始化所需的代碼。
<form id="form1" action="javascript:void(null);"> 請輸入你的大名:<input type="text" name="username"> <!--用來觸發xajax事件的button--> <input type="button" name="submit" value="送出" onClick="xajax_myFunction(xajax.getFormValues('form1'));"> </form> <!--顯示回傳結果的div--> <div id="outputDiv"></div> |
用來傳值的表單,注意紅字的部分為觸發xajax的方法。
- xajax_xxx():xxx的部分為之前呼叫的function名稱,如xajax_myFunction。
- xajax.getFormValues('xxx'):xajax可利用此方法取得表單所傳送的資料,xxx的部分為表單名稱,如xajax.getFormValues('form1')。
- <div id="outputDiv"></div>:用來顯示回傳訊息的div。
<?php function myFunction($aFormValues) { //創建一個xajaxResponse物件 $objResponse = new xajaxResponse(); //接收表單post的資料 $username = $aFormValues['username']; if (trim($username) == "") { //產生錯誤訊息的alert $objResponse->addAlert("名字尚未輸入!"); //回傳xajaxResponse物件 return $objResponse; } else { //設定id為"outputDiv"的div元素的innerHTML屬性為"xxx,你好!!" $objResponse->addAssign("outputDiv","innerHTML",$username.',你好!!'); //回傳xajaxResponse物件 return $objResponse; } } ?> |
被呼叫到的php function,注意紅字的部分就是之前呼叫的function名稱。
- $objResponse = new xajaxResponse():創建一個xajaxResponse物件,用來處理xajax回傳程序的物件。
- $objResponse->addAlert("xxx"):產生彈出訊息的JavaScript,xxx部分可填入想顯示的訊息。
- $objResponse->addAssign("outputDiv","innerHTML","xxx"):設定id為"outputDiv"的div元素的innerHTML屬性為"xxx",xxx部分可填入想顯示的訊息。
- return $objResponse:回傳xajaxResponse物件
以上所有這些功能都是在伺服器端PHP函數中通過構造並返回一個XML回應來實現的。