ARES資通電子報

技術交流

Play Ajax with JQuery & PHP5

文 - Dennis

引言
Ajax (Asynchronous JavaScript and XML) ,大概是 Web2.0 時代經常會提到的技術之一,它大大豐富了Web 程式的應用,提高了用戶體驗。詳細有關 Ajax 的介紹,有興趣的朋友請移步 http://zh.wikipedia.org/wiki/AJAX ,這裏有詳盡的說明。本文主要討論 Ajax 在資通eHR系統中的應用。

JQuery 一個輕量級,強大的 JavaScript Library,雖然是輕量級,但其功能非常強大,從 Version 1.3.2 起加入 google Ajax Library API,詳情請參考 http://code.google.com/apis/ajaxlibs/documentation/index.html#jquery ,應用起來更加方便。

詳細中文參考請移步 http://zh.wikipedia.org/wiki/Jquery , 更多資訊請參考其官方網站 http://www.jquery.com 。本文主要討論利用 Jquery 對 Ajax 的封裝,結合 PHP5的簡單應用。

開始
本文以 eHR系統中的薪資查詢中查詢條件的薪資年月為例,來討論 Jquery 中 Ajax 結合 PHP 的方法。

應用案例:當選取不同的 年份時,在頁面不重新刷新的情況下月份欄位元中只顯示該年份的薪資 月份,如下圖:
2008 年

2009 年

由於eHR在實際產品環境時可能 App Server 不能聯網,所以這裏選擇把 JQuery library 下載到本地。

引用 JQuery Library
HTML 頁面引入 Jquery Library,代碼片段如下:
  <html>
   <head>
   …
   <script src="../js/jquery-1.3.2.min.js" language = "JavaScript" type =
    "text/javascript" charset = "utf-8"></script>
    </head>
    <body>
    …
    </body>
   </html>

引入 Jquery 是為了更方便,更簡單的使用 Ajax,而不需要去考慮 Browser 的版本及廠商。

綁定事件
根據需求,我們需要在年份的下拉清單物件上綁定 onchange 事件以回應使用者變換年份時去挑相應的月份。同樣也是利用 Jquery 的事件綁定代碼,代碼片段如下:
   // 假設年份 select 的 ID 為 sal_period_year
   <script language="JavaScript">
   $().ready(function(){
    $('#sal_period_year').change(function(){
     loadMonth(this.value); 
    });
   });
   </script>
Ajax 調用
 下面我們來完善上面綁定事件中所調用的 function loadMonth().
 <script language="JavaScript">
 /**
 * 根據年份裝載其月份資料(Ajax Call)
 * @param string year
 */

 function loadMonth(year)
 {
  if (year != ''){
   $.ajax({
     type:"POST",
     url:"redirect.php?scriptname=sal_slip",
     data:"ajaxcall=1&year="+year,
     async: false,
     timeout:1000,
     dataType:'json',
     success: function(json){
      addOptionToList('period_month',json);
     },// end function,
     error:function(){
      alert(‘No data found’);
     }
   });
  }// end if
  }// end loadMonth()
</script>

由於Jquery 已經幫我封裝好 Ajax 的方法,所以我們只需 call $.ajax 就可以使用 ajax 的方式了。
下面我們詳細的介紹一下 $.ajax() 這個 function 中參數的意義,上面的例子是傳入一個 array 的類型,其下標說明如下:
․type : ajax 和後臺 PHP 交互的方式,可選值有 “GET” 或 “POST”
․url : ajax 提交的 url,如這裏的 redirect.php?scriptname=sal_slip 經過程式處理,它會調用相關的後臺程式
․data: 也就是我們要 post 到後臺的資料,格式跟常見的表單以 get 方式提交時,在 url 中顯示的格式一樣: “參數=值” 中間以 “&” 來連接
․async: 是否非同步,可選值為boolean的 “true” 或 “false”
․timeout: 設置請求超時時間(毫秒)。此設置將覆蓋全局設置。
․dataType: 返回資料的類型,支援的類型有 “xml","html","script","json"。這裏我們選取比較方便處理的json 格式,PHP5 可以直接返回此類型。 詳細說明請參考:
http://docs.jquery.com/Specifying_the_Data_Type_for_AJAX_Requests
․success: 成功後執行的代碼
․error: 有錯誤時執行的代碼

PHP 代碼
根據Ajax Call 中的 url,把相關的 data post 到後臺的 PHP 程式中處理,後臺處理相對比較簡單,需要注意的是輸出 json 格式的 data 後就退出,如下代碼:
<?php
// ajax call get month list according the year
 if (isset ( $_POST ['ajaxcall'] ) &&
   $_POST ['ajaxcall'] == '1' &&
   isset ( $_POST ['year'] ) &&
   ! empty ( $_POST ['year'] )) {
  echo json_encode($Salary->getMonthByYear ($_POST ['year']));
  exit ();
} //end if
?>
注:json_encode() 是 PHP5 才加入的內置 function, PHP4 不支援,如果需要請參考 http://www.google.com/#hl=en&q=php4+json_encode&aq=f&oq=&aqi=&fp=qO4QD-2uHTM

結語
限於篇幅,本期有關 Ajax 的應用就討論到這裏,希望能拋磚引玉、有興趣的朋友去深入研究或來信討論。由於本人水準有限,上面的討論難免會有偏頗,還請來信斧正,這一期我們就討論到這裡。

參考資料:
[1] Jquery http://www.jquery.com
[2] Ajax http://zh.wikipedia.org/wiki/AJAX
[3] PHP5 http://www.php.net
[4] eHR http://www.areschina.com/product.php?id=161&tid=94