Xajax 動態更新網頁 - update

AJAX 的最後一個步驟是: 將非同步所取得的資料，回傳到預先規劃好得網頁位置(通常用 id, name 來作辨識)，而在 XAJAX 中 xajaxResponse.inc.php 的 xajaxResponse 物件提供許多函式可以讓我們操作，而我用過得函式大約就是以下這幾個而已，以下是函式說明：

常用的 Response 函式

1. Method assign($sTarget,$sAttribute,$sData)

sTarget (string) 亦即我們所謂的 id，sAttribute (string) 更新之屬性，sData (string) 屬性的值。
用在直接取代,，原本屬性的值。例如：作第二次乘法運算，必須將第一次的結果給覆蓋上次。

$xajax->assign($id, $attribute, $data);

2. Method append($sTarget,$sAttribute,$sData)

參數同 assign。常用於動態資料新增之用, 例如：在龐大的清單中，新增一筆訂單時，動態呈現而不做整頁的重新索取。

$xajax->append($id, $attribute, $data);

3. Method createInput($sParent, $sName, $sId)

sParent (string) 即 id，sNmae (string) 新元素的name標籤，sId (string) 新元素的 id。

$xajax->createInput($parent_id, $new_name, $new_id);

4. Method remove($sTarget)

sTarget (string) 即 id。刪除元素。

$xajax->remove($id);

5. Method script($sJS)

sJS (string) javascript code。在 PHP 中撰寫 Javascript 程式並執行。

$xajax->script($jscode);

綜合範例

動態讓使用者下拉，想做的操作。有 create, assign, append, remove, script。選擇任何一種操作都會跑出對應的控制選項做選擇。create 可以選擇新增 input, password, checkbox, radio 並賦予屬性質呈現，assign 針對 create 出來的值作指派的動作，append 則是針對 create 的值做添加的動作，remove 會把整個元件做刪除，而 script 輸入 javascript 語法賦予在按鈕上面，按下馬上操作，預設是 windows.close() 關閉瀏覽器視窗。

主要的操作函式:

function xajaxcreate($value1, $value2, $value3, $value4){
$objResponse = new xajaxResponse();
$objResponse->append('element_panel', 'innerHTML',"type:$value1, 
name:$value2, id:$value3<br/>");
$objResponse->createInput('element_panel', $value1, $value2, $value3); 
$objResponse->assign($value3, 'value', $value4);
$objResponse->append('element_panel', 'innerHTML', '<br/>');
return $objResponse;
}

function xajaxassign($value1, $value2){
$objResponse = new xajaxResponse();
$objResponse->assign($value1, 'value', $value2);
return $objResponse;
}

function xajaxappend($value1, $value2){
$objResponse = new xajaxResponse();
$objResponse->append($value1, 'value',$value2);
return $objResponse;
}

function xajaxremove($value1){
$objResponse = new xajaxResponse();
$objResponse->remove($value1);
return $objResponse;
}

function xajaxscript($value1){
$objResponse = new xajaxResponse();
$objResponse->script($value1);
return $objResponse;
}

範例下載

檔案放置於 Google Site 平台，請按[這裡]下載檔案
version: xajax 0.5 Final

備註；寫完之後，感覺跟 createFormInputTest.php 有點像捏，唯一幾點不同的是官方範例比較亂吧，哈!其實也不竟然啦，整個選單是動態產生的會存在瀏覽器中，因此看原始碼會看不出來，建議使用:

$xajax->setFlag("debug", true); 

來檢視產生出來的 HTML 元素做測試，範例也可以說是 createFormInputTest.php 的完全動態版本吧。這也只是練習而以不用太在意，後續會再補上與一些繪圖函式結合的應用上來。

延伸閱讀

[1.] PHP+MYSQL+AJAX網頁程式設計 簡報第十六章