[php] xajax 的基本介紹及語法教學

xajax 是一個 ajax 和 php結合的framework,他提供了程式設計師很快地就可以進入ajax的開發,而且其實不用太怎麼知道ajax的核心內容。而這個方便的framework,可以從xajax的官方網站下載來使用。

而官方網站提供一個範例,以下就是他的範例來進行講解。

<?
include_once ("./xajax/xajax_core/xajax.inc.php");
$xajax = new xajax();
$xajax->registerFunction("sayhello");

function sayhello($arg){
$res = new xajaxResponse();
$res->assign("SomeElementId", "innerHTML", $arg);
return $res;
}

$xajax->processRequest();
?>
<html>
<head>
<?
$xajax->printJavascript("/xajax");
?>
</head>
<body>
<div id="SomeElementId"></div>
<button onclick="xajax_sayhello('It worked!');">Click Me</button>
</body>
</html>


在這個程式中,一開始我們必須先讓php知道xajax的路徑,所以我們必須先寫「include_once (“./xajax/xajax_core/xajax.inc.php”);」。接下來,則是要建立一個xajax物件的操作,因此必須使用「$xajax = new xajax();」。這邊你也可以使用「$xajax = new xajax(“檔案名稱”);」,其中「檔案名稱則是你後端要處理的程式路徑」,空白表示是在本隻程式中進行處理。

 

而在建立完物件之後,接下來要使用「$xajax->registerFunction(“sayhello”);」來註冊要處理的函式,並且使用「$xajax->processRequest();」來執行。以本範例來說,註冊了一隻「sayhello」的函式要來處理由網頁程式所觸發的事件。而這段程式碼如下:

function sayhello($arg){
$res = new xajaxResponse();
$res->assign("SomeElementId", "innerHTML", $arg);
return $res;
}

在這個函式中,將要替換你的物件,因此你必須先定義一個變數,來回傳要傳回給要瀏覽器的資料,而這時就得用到「$res = new xajaxResponse();」了。接下來,你要指定要替換的變數,這時你可以用「$res->assign(“SomeElementId”, “innerHTML”, $arg);」來替換你的網頁區塊內容。最後再丟回給瀏覽器告訴他說我要替換掉這個區塊的內容就可以了!

最後,在這個程式中,我們將焦點放至我們的網頁程式上。

<html>
<head>
<?
$xajax->printJavascript("/xajax");
?>
</head>
<body>
<div id="SomeElementId"></div>
<button onclick="xajax_sayhello('It worked!');">Click Me</button>
</body>
</html>

在這個函式中,你只要在「/head」前使用「$xajax->printJavascript(“/xajax”);」,那麼xajax就會自動幫你產生javascript碼了,以下是他自動產生的javascript碼。而在「button」處的「xajax_sayhello(‘It worked!’)」,則是我們會呼叫我們之前所定義的「sayhello」這個函式。其中「xajax_」為前置詞,一定要記得加上去。

<script type="text/javascript" charset="UTF-8">
/* <![CDATA[ */
try { if (undefined == xajax.config) xajax.config = {}; } catch (e) { xajax = {}; xajax.config = {}; };
xajax.config.requestURI = "http://localhost/sayhelloxajax.php";
xajax.config.statusMessages = false;
xajax.config.waitCursor = true;
xajax.config.version = "xajax 0.5";
xajax.config.legacy = false;
xajax.config.defaultMode = "asynchronous";
xajax.config.defaultMethod = "POST";
/* ]]> */
</script>
<script type="text/javascript" src="/xajax/xajax_js/xajax_core.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
/* <![CDATA[ */
window.setTimeout(
function() {
var scriptExists = false;
try { if (xajax.isLoaded) scriptExists = true; }
catch (e) {}
if (!scriptExists) {
alert("Error: the xajax Javascript component could not be included. Perhaps the URL is incorrect?\nURL: /xajax/xajax_js/xajax_core.js");
}
}, 2000);
/* ]]> */
</script>

<script type='text/javascript' charset='UTF-8'>
/* <![CDATA[ */
xajax_sayhello = function() { return xajax.request( { xjxfun: 'sayhello' }, { parameters: arguments } ); };
/* ]]> */
</script>

這隻程式在你按下按鈕後,則是會產生「It worked!」,有興趣的讀者,不妨自己試試吧!

About 張海芋

城市裡的小小迷僮工程師,喜歡用鍵盤記錄個人生活的點滴,身邊的人事物都我的靈感,用心踏出每個腳步,用文字灌溉《海芋小站》,用專業解決問題。

發表迴響