Wednesday, September 9, 2009

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網頁程式設計 簡報第十六章

No comments:

Post a Comment