介紹php與ajax的應用：xajax基本（購物網站延伸教學）

hsien

介紹php與ajax的應用：xajax基本（購物網站延伸教學）
xajax 是一個開源的 PHP 類庫，用來構建WEB上的Ajax 程式，它本身是一個以Server為主的Ajax函示庫，也就是說很多的商業邏輯將會放在Server Side的php程式裡。使用xajax開發的應用軟體，無需重新調入頁面，就能夠非同步調用伺服器端的PHP函數和更新內容。

　　 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回應來實現的。