痞子學JavaScript+PHP: 6月 2008

XAJAX初探（四）範例

程式碼

<?
	require_once( 'xajax/xajax.inc.php' ); //引入xajax函式
//建立xajax物件
$xajax=new xajax();

//註冊在php中所要呼叫的函式
$xajax->registerFunction("myFunction");
$xajax->registerFunction("myFunction1");
$xajax->registerFunction("myFunction2");

//處理呼叫
$xajax->processRequests();
?>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<?php $xajax->printJavascript('xajax/'); ?>
</head>
<form method="POST" action="" name="myForm">
用onclick onblur onfocus觸發<br>

<input type="text" name="step1"><input type="text" name="step2"
onclick="xajax_myFunction(xajax.getFormValues('myForm'));" 
onBlur="xajax_myFunction(xajax.getFormValues('myForm'));"
onFocus="xajax_myFunction(xajax.getFormValues('myForm'));">
<input type="text" name="step3">

<span id="output"></span>(結果會顯示在這裡)<br>

用onchage觸發<br>
<select name="step4" OnChange="xajax_myFunction1(xajax.getFormValues('myForm'));">
<option></option><option value="1">紅色</option><option value="2">黃色</option></select>

<div id="output2"><select name="step5"></select></div>使用div<br>
<select name="step6" OnChange="xajax_myFunction2(xajax.getFormValues('myForm'));">
<option></option><option value="1">紅色</option><option value="2">黃色</option></select>

<span id="output3"><select name="step7"></select></span>使用span
<?
function myFunction($aFormValues)
{
//創建一個xajaxResponse物件
$objResponse = new xajaxResponse();

//接收表單post的資料
$step1 = $aFormValues['step1'];
$step2 = $aFormValues['step2'];
$step3 = $aFormValues['step3'];
$val = 'step1:'.$step1.'step2:'.$step2.'step3:'.$step3;
$objResponse->addAssign("output","innerHTML",$val);

//回傳xajaxResponse物件
return $objResponse;
}
function myFunction1($aFormValues)
{
//創建一個xajaxResponse物件
$objResponse = new xajaxResponse();
//接收表單post的資料
$step4 = $aFormValues['step4'];
$val = '<select name="step5">';
switch($step4) {
	case 1: $val .='<option>頻果</option>'; break;
	case 2: $val .='<option>香蕉</option>'; break;
	default: $val .= '<option></option>'; break;
}
$val .= '</select>';
	$objResponse->addAssign("output2","innerHTML",$val);
//回傳xajaxResponse物件
return $objResponse;
}
function myFunction2($aFormValues)
{
//創建一個xajaxResponse物件
$objResponse = new xajaxResponse();
//接收表單post的資料
$step6 = $aFormValues['step6'];
$val = '<select name="step5">';
switch($step6) {
	case 1: $val .='<option>頻果</option>'; break;
	case 2: $val .='<option>香蕉</option>'; break;
	default: $val .= '<option></option>'; break;
}
$val .= '</select>';
	$objResponse->addAssign("output3","innerHTML",$val);
//回傳xajaxResponse物件
return $objResponse;
}
?>

XAJAX初探（三）執行

現在要進入重點了，就是該如何執行與發佈

就呼叫副程式一樣

function myFunction($i,$j....) {

但要先創建一個xajaxResponse物件，這就是發佈所需要的

$objResponse = new xajaxResponse();

}

前面提到有個函示可以把表格內的所有數值傳回來

xajax_myFunction(xajax.getFormValues('myForm'));

它是陣列的形式回傳

function myFunction($aFormValues) {

$step2 = $aFormValues['step2'];

來承接表格內所有的數值

}

其他就像寫一般的php程式一樣

等到要輸入、發佈的時候，XAJAX有提供幾個函示

這邊先提供基本的概念，函示的介紹等下一章節

因為XAJAX講求的是及時，所以當事件觸發的時候，就呼叫副程式做運算

然後及時把結果展現在現有的網頁上，所以得規定在展現網頁上的哪一個部位

就用id來設定

<div>和<span>的差別在於div會跳行span不會

然後在副程式用

function myFunction($aFormValues) {

$objResponse->addAssign("output","innerHTML",$val);

$objResponse->addAssign是一個函示就是把變數$val所帶的值，插入到表格裡面id叫做output的中間

回傳xajaxResponse物件

return $objResponse;

XAJAX初探（二）使用

雖然XAJAX已經盡力把複雜的AJAX改成熟悉PHP的寫法

但在即時處理上，還是得靠JAVASCRIPT來協助，就是著名的【觸發事件】

先舉各常常用到的事件

觸發事件像是踩到地雷就爆炸的情形一樣

只是在這邊，觸發事件有很多情況

以上面表格為例

當希望在step2的表格內，能立即做反應，就必須考慮到有幾種事件是會影響到step 2

第一種：直接用滑鼠點選step 2，所以就必須使用<input type="text" name="step2" onclick="">

第二種：先選step 1，然後用tab鍵移到step 2，就必須使用<input type="text" name="step2" onfocus="">

第三種：輸入完step2，使用tab鍵移到step 3或者用滑鼠點開，就必須使用<input type="text" name="step2" onblur="">

當然以下還有很多的觸發事件，例如：onchange=""

單看要在什麼時候呼叫程式立即做處理

決定好事件之後，就要開始呼叫副程式來處理，我們剛剛輸入的數值，語法是

我們拆開來看onclick=""是事件類別

xajax_myFunction(）是呼叫剛剛註冊好的副程式（$xajax->registerFunction("myFunction");）

當然可以取別的名字，只要前面註冊就ＯＫ

xajax.getFormValues('myForm')這個就是傳回表格(myForm)裡面所有值

所以記得在寫<form method="POST" action="" name="myForm">給它一個名字

xajax_myFunction(xajax.getFormValues('myForm')); 請把它看成呼叫一段副程式

當然也可以只傳變數xajax_myFunction($i,$j);

如果一個事件不過癮，可以多加幾個

xajax初探（一）安裝

下載網址

目前穩定版本為0.2.5

下載下來，解壓縮後，在程式所在目錄建立目錄，例如xajax

在程式開頭引入xajax函式

require_once( 'xajax/xajax.inc.php' );

———————————————————————————————————————————————

然後底下建立xajax物件

$xajax=new xajax();

———————————————————————————————————————————————

提供額外的除錯功能，決定是否要使用 xajax debug

$xajax->debugOn();

每一步驟，會用alert方式跳出來，可以省略

———————————————————————————————————————————————

註冊在php中所要呼叫的函式

$xajax->registerFunction("myFunction");

xajax就是省略javascript程式碼，看似直接用ＰＨＰ的架構寫出AJAX

而這段語法就是呼叫ＰＨＰ的副程式一般，所以底下會有

function myFunction() {

程式碼

}

可以註冊很多個$xajax->registerFunction("functionname1");

———————————————————————————————————————————————

處理呼叫

$xajax->processRequests();

———————————————————————————————————————————————

在<html><head>

中間填入

<?php $xajax->printJavascript('xajax/'); ?>

</head>

———————————————————————————————————————————————

所以綜合起來，如果要使用XAJAX的功能，必須有以下的步驟

require_once( 'xajax/xajax.inc.php' );

$xajax=new xajax();

$xajax->registerFunction("myFunction");

$xajax->processRequests();

<?php $xajax->printJavascript('xajax/'); ?>

</head>

額外一提，建議使用UTF-8，用big5會有意想不到的問題

痞子學JavaScript+PHP

2008年6月25日星期三

XAJAX初探（四）範例

XAJAX初探（三）執行

XAJAX初探（二）使用

xajax初探（一）安裝

網誌存檔

標籤

痞子學JavaScript+PHP

2008年6月25日 星期三

XAJAX初探（四）範例

XAJAX初探（三）執行

XAJAX初探（二）使用

xajax初探（一）安裝

網誌存檔

標籤

2008年6月25日星期三