整合 PHP 與 jQuery Ajax 函式庫 2009.07.28

大綱 jQuery 提供的 XMLHttpRequest 相關函式介紹 各種可接受的資料格式 (dataType) 介紹 解決透過 XMLHttpRequest 請求 PHP 回傳資訊時，在資料輸出上容易發生資料格式或程式碼混亂等問題 處理程序的再利用性

jQuery 提供的 XMLHttpRequest 相關函式介紹

各種可接受的資料格式 (dataType) 介紹

解決透過 XMLHttpRequest 請求 PHP 回傳資訊時，在資料輸出上容易發生資料格式或程式碼混亂等問題

處理程序的再利用性

jQuery 的 XMLHttpRequest 函式庫 ( 一 ) jQuery 提供以下幾個函式，可依照請求時的需求情況選擇使用： jQuery.ajax( options ) jQuery.load( url, data, callback ) jQuery.get( url, data, callback, type ) jQuery.getJSON( url, data, callback ) jQuery.getScript( url, callback ) jQuery.post( url, data, callback, type ) jQuery.ajaxSetup( options )

jQuery 提供以下幾個函式，可依照請求時的需求情況選擇使用：

jQuery.ajax( options )

jQuery.load( url, data, callback )

jQuery.get( url, data, callback, type )

jQuery.getJSON( url, data, callback )

jQuery.getScript( url, callback )

jQuery.post( url, data, callback, type )

jQuery.ajaxSetup( options )

jQuery 的 XMLHttpRequest 函式庫 ( 二 ) jQuery.ajax 是主要的函式，其他函式皆只是提供簡化部份參數，方便開發人員調用。 jQuery.ajax 函式的參數 Options 為一匿名物件，由於其成員變數及函式眾多，可直接參考官方網站所提供的文件 http:// docs.jquery.com/Ajax/jQuery.ajax#toptions

jQuery.ajax 是主要的函式，其他函式皆只是提供簡化部份參數，方便開發人員調用。

jQuery.ajax 函式的參數 Options 為一匿名物件，由於其成員變數及函式眾多，可直接參考官方網站所提供的文件 http:// docs.jquery.com/Ajax/jQuery.ajax#toptions

資料格式 (dataType) 介紹 ( 一 ) The type of data that you're expecting back from the server. If none is specified, jQuery will intelligently pass either responseXML or responseText to your success callback, based on the MIME type of the response. The available types (and the result passed as the first argument to your success callback) are: "xml": Returns a XML document that can be processed via jQuery. "html": Returns HTML as plain text; included script tags are evaluated when inserted in the DOM.

The type of data that you're expecting back from the server. If none is specified, jQuery will intelligently pass either responseXML or responseText to your success callback, based on the MIME type of the response. The available types (and the result passed as the first argument to your success callback) are:

"xml": Returns a XML document that can be processed via jQuery.

"html": Returns HTML as plain text; included script tags are evaluated when inserted in the DOM.

資料格式 (dataType) 介紹 ( 二 ) "script": Evaluates the response as JavaScript and returns it as plain text. Disables caching unless option "cache" is used. Note: This will turn POSTs into GETs for remote-domain requests. "json": Evaluates the response as JSON and returns a JavaScript Object. "jsonp": Loads in a JSON block using JSONP . Will add an extra "?callback=?" to the end of your URL to specify the callback. (Added in jQuery 1.2) "text": A plain text string.

"script": Evaluates the response as JavaScript and returns it as plain text. Disables caching unless option "cache" is used. Note: This will turn POSTs into GETs for remote-domain requests.

"json": Evaluates the response as JSON and returns a JavaScript Object.

"jsonp": Loads in a JSON block using JSONP . Will add an extra "?callback=?" to the end of your URL to specify the callback. (Added in jQuery 1.2)

"text": A plain text string.

PHP 回傳資訊 以往透過 XMLHttpRequest 請求 PHP 回傳資訊時，時常出現以下問題： 資料格式： 瀏覽器可接受的資料格式種類眾多，伺服端回傳資料時需告知瀏覽器檔案類型，如 XML 資料需附加檔頭標記為 XML 文件；若為純文字格式傳回多筆資料時，則採用符號分隔 (*.csv) ，至瀏覽器時再依照符號分割取得資料。若無統一的解決方案，將可能造成各種自訂的回傳方式且難以維護。 程式碼混亂： 伺服端查詢或資料處理完成之後，皆採用 echo 指令並依照所需的資料格式進行輸出，當資料內容較為複雜時，將會有多個輸出指令遍佈在程式碼中，因此若能將輸出資料進行收集並統一輸出，將有效提升程式碼的可讀性及維護性。

以往透過 XMLHttpRequest 請求 PHP 回傳資訊時，時常出現以下問題：

資料格式： 瀏覽器可接受的資料格式種類眾多，伺服端回傳資料時需告知瀏覽器檔案類型，如 XML 資料需附加檔頭標記為 XML 文件；若為純文字格式傳回多筆資料時，則採用符號分隔 (*.csv) ，至瀏覽器時再依照符號分割取得資料。若無統一的解決方案，將可能造成各種自訂的回傳方式且難以維護。

程式碼混亂： 伺服端查詢或資料處理完成之後，皆採用 echo 指令並依照所需的資料格式進行輸出，當資料內容較為複雜時，將會有多個輸出指令遍佈在程式碼中，因此若能將輸出資料進行收集並統一輸出，將有效提升程式碼的可讀性及維護性。

AjaxRequest 類別 ajax_request.php Class Diagram

Ajax request API 使用 XMLHttpRequest 請求伺服器時，指定處理程序所屬的模組、類別、函式名稱及回傳格式，以進行處理請求並回傳資料。以下為指定處理程序的參數： $m: 指定模組名稱 ( 即模組的資料夾名稱 ) ，以呼叫該模組的處理程序。若未指定模組名稱則預設為系統內建，以系統預設路徑呼叫處理程序。 $c ： 指定類別名稱，指定類別必須繼承 AjaxRequest 類別。 $f: 指定函式名稱，並且會將此次查詢的環境變數 ( Get 與 Post ) 合併陣列並作為指定函式的第一個參數傳入。 $t: 指定回傳資料的格式，將自動依照指定的格式傳回資料。

使用 XMLHttpRequest 請求伺服器時，指定處理程序所屬的模組、類別、函式名稱及回傳格式，以進行處理請求並回傳資料。以下為指定處理程序的參數：

$m: 指定模組名稱 ( 即模組的資料夾名稱 ) ，以呼叫該模組的處理程序。若未指定模組名稱則預設為系統內建，以系統預設路徑呼叫處理程序。

$c ： 指定類別名稱，指定類別必須繼承 AjaxRequest 類別。

$f: 指定函式名稱，並且會將此次查詢的環境變數 ( Get 與 Post ) 合併陣列並作為指定函式的第一個參數傳入。

$t: 指定回傳資料的格式，將自動依照指定的格式傳回資料。

處理程序的再利用性 處理程序將資料統一輸出，由客戶端程式決定回傳的資料格式，可提供更彈性的資料處理。例如處理程序將回傳一份符合某條件的客戶資料清單，於系統內使用時，可採用方便存取的 Json 格式，進行資料的呈現；當需要與外部系統進行資料交換時，則可採用 XML 格式進行交換，而不需再次修改或另外新增處理程序。

處理程序將資料統一輸出，由客戶端程式決定回傳的資料格式，可提供更彈性的資料處理。例如處理程序將回傳一份符合某條件的客戶資料清單，於系統內使用時，可採用方便存取的 Json 格式，進行資料的呈現；當需要與外部系統進行資料交換時，則可採用 XML 格式進行交換，而不需再次修改或另外新增處理程序。

參考文獻 jQuery Ajax API h ttp:// docs.jquery.com /Ajax

jQuery Ajax API h ttp:// docs.jquery.com /Ajax