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

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

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

  1. <?
  2. include_once ("./xajax/xajax_core/xajax.inc.php");
  3. $xajax = new xajax();
  4. $xajax->registerFunction("sayhello");
  5.  
  6. function sayhello($arg){
  7. $res = new xajaxResponse();
  8. $res->assign("SomeElementId", "innerHTML", $arg);
  9. return $res;
  10. }
  11.  
  12. $xajax->processRequest();
  13. ?>
  14. <html>
  15. <head>
  16. <?
  17. $xajax->printJavascript("/xajax");
  18. ?>
  19. </head>
  20. <body>
  21. <div id="SomeElementId"></div>
  22. <button onclick="xajax_sayhello('It worked!');">Click Me</button>
  23. </body>
  24. </html>


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

 

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

  1. function sayhello($arg){
  2. $res = new xajaxResponse();
  3. $res->assign("SomeElementId", "innerHTML", $arg);
  4. return $res;
  5. }

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

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

  1. <html>
  2. <head>
  3. <?
  4. $xajax->printJavascript("/xajax");
  5. ?>
  6. </head>
  7. <body>
  8. <div id="SomeElementId"></div>
  9. <button onclick="xajax_sayhello('It worked!');">Click Me</button>
  10. </body>
  11. </html>

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

  1. <script type="text/javascript" charset="UTF-8">
  2. /* <![CDATA[ */
  3. try { if (undefined == xajax.config) xajax.config = {}; } catch (e) { xajax = {}; xajax.config = {}; };
  4. xajax.config.requestURI = "http://localhost/sayhelloxajax.php";
  5. xajax.config.statusMessages = false;
  6. xajax.config.waitCursor = true;
  7. xajax.config.version = "xajax 0.5";
  8. xajax.config.legacy = false;
  9. xajax.config.defaultMode = "asynchronous";
  10. xajax.config.defaultMethod = "POST";
  11. /* ]]> */
  12. </script>
  13. <script type="text/javascript" src="/xajax/xajax_js/xajax_core.js" charset="UTF-8"></script>
  14. <script type="text/javascript" charset="UTF-8">
  15. /* <![CDATA[ */
  16. window.setTimeout(
  17. function() {
  18. var scriptExists = false;
  19. try { if (xajax.isLoaded) scriptExists = true; }
  20. catch (e) {}
  21. if (!scriptExists) {
  22. alert("Error: the xajax Javascript component could not be included. Perhaps the URL is incorrect?\nURL: /xajax/xajax_js/xajax_core.js");
  23. }
  24. }, 2000);
  25. /* ]]> */
  26. </script>
  27.  
  28. <script type='text/javascript' charset='UTF-8'>
  29. /* <![CDATA[ */
  30. xajax_sayhello = function() { return xajax.request( { xjxfun: 'sayhello' }, { parameters: arguments } ); };
  31. /* ]]> */
  32. </script>

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