指導教授：羅榮華 博士報告學生：蔡旻哲報告日期：

虛擬視窗平台整合 PHP 與 jQuery Ajax 函式庫

2009.07.28

大綱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 的 XMLHttpRequest 函式庫 ( 二 )

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 arg

ument 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.

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

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

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

AjaxRequest 類別Class Diagram

ajax_request.phpLogin

+loginCheck()

AjaxRequest

+$response

+__construct()+response()+output()

Ajax request API

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

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

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

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