介紹php與ajax的應用:xajax基本(購物網站延伸教學)

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