透過PHP和Sajax使用Ajax之JavaScript
日期:2006-09-28 作者:喜騰小二 來源:PHPChina
多年以來，建立真正俱有回應性的 Web 應用程式這一目的一直被 Web
開發的一個簡單事實所阻礙：要改變页面某一部分的資訊，使用者就必須多載整個页面。但是以後不再會這樣了。感謝非同步 Javascript 指令檔和
XML（Ajax），我們現在可以從伺服器端請求新內容，隻修改页面的一部分。這個教程解釋了如何把 Ajax 用於 PHP ，並介紹了簡單 Ajax
工俱包（Sajax），這是一個用 PHP 編寫的工俱，可以把伺服器端 PHP 與 JavaScript 整合。
開始之前
這份教程針對的是對於開發富 Web 應用程式感興趣的人，富 Web 應用程式把非同步
JavaScript 和 XML（Ajax）與 PHP 結合起來，使用者每次按時，不必重新整理整個页面，就可以動態更新內容。這份教程假設讀者瞭解基本的 PHP
概念，包括 if 和 switch 陳述式以及函式的使用。
關於本教程
在本教程中，將學習 Ajax
以及圍繞它的應用的問題。將用 PHP 建置一個 Ajax
應用程式，顯示以前寫的一個教程中的麵闆。按麵闆連結隻會重新載入內容區，並用選定麵闆的內容取代它，從而節約了頻寬和页面裝入的時間。然後將把簡單 Ajax
工俱包（Sajax）整合進 Ajax 應用程式，它可以同步 Ajax
的使用，從而簡化開發。
概述
在深入之前，先看看 Ajax、範例 PHP 應用程式和 Sajax。
Ajax
Ajax 允許 Web 開發人員建立互動的 Web 页面，同時避免必須等候页面載入這一瓶頸。透過 Ajax
建立的應用程式，隻需按按鈕，就可以用全新的內容取代 Web 页面某一區網域的內容。它的精彩之處在於不必等候页面裝入，隻有這一個區網域的內容需要載入。以
Google Maps 為例：可以按和四處移動地圖，卻不必等候页面載入。
Ajax 的問題
在使用 Ajax
時有些事需要注意。像其他 Web 页面一樣，Ajax 页面是可以加書簽的，所以在使用 GET 與 POST
進行請求時就會造成問題。國際化和編碼方案數量的增加，使得把這些編碼方案標準化變得日益重要。在這份教程中將瞭解這些重要的問題。
範例
PHP 應用程式
首先要用 Ajax 建立一個應用程式，然後用 Sajax
建立，以展現使用這個工俱包的好處。應用程式是以前編寫的教程中的一部分，帶有麵闆連結。它被用作範例，以展示使用 Ajax
的優勢。因為在各個麵闆上按時，它們會非同步裝入，而不必等候页面剩下的部分再次裝入。這個範例應用程式還會展示如何建立自己的 Ajax
應用程式。
Sajax
如果想建立 Ajax 應用程式，又不想受 Ajax 復雜的細節所累。答案就是
Sajax。透過使用 ModernMethod 人員開發的庫，Sajax 為 Web 開發人員抽象出了 Ajax 的高層細節。在底層，Sajax 的工作與
Ajax 相同。但是，透過使用 Sajax 庫提供的高層函式，可以略過 Ajax 的技術細節。
什麼是
Ajax？
這一節是個入門介紹，用範例解釋 Ajax 的概念，包括在按連結時發生了什麼，Ajax 用於 PHP 應用程式時需要的
HTML 和 JavaScript 程式碼。下一節將更深入一些，實際地使用在這一節學習的 Ajax 概念建立 PHP
應用程式。
幕後內容
Ajax 是非同步 JavaScript 和 XML
的組合。之所以說非同步，是因為可以按页面上的連結，然後它隻裝入與按對應的內容，同時保持標題或其他任何設定的資訊不動。
按連結時，在背後工作的是
JavaScript 函式。JavaScript 建立與 Web
浏覽器通信的物件，並告訴浏覽器裝入特定页面。然後可以像平常一樣浏覽同一页面上的其他內容，當浏覽器完全裝入新页面的時候，浏覽器會在 HTML 的 div
標記指定的位置顯示內容。
CSS 樣式程式碼用來和 span 標記一起建立連結。
CSS
樣式程式碼
範例應用程式需要 CSS 程式碼，這樣 span 標記看起來就像使用常規的錨標記（＜a href=...
＞）建立的真正連結一樣，也會像真正的連結一樣被按。
清單 1. 指定 span 標記的顯示資訊
| ... ＜style type="text/css"＞ span:visited{ text-decoration:none; color:#293d6b; } span:hover{ text-decoration:underline; color:#293d6b; } span {color:#293d6b; cursor: pointer} ＜/style＞ |
這些 span 標記用在範例應用程式中，色彩符合所有
IBM developerWorks
教程中連結使用的色彩。樣式標記的第一行指定已經訪問過的連結的色彩保持不變。滑鼠經過時加底線，遊標變成指針，就像普通的錨標記（＜a href...
＞）一樣。現在來看看如何建立使用這個 CSS 樣式程式碼的連結。
建立使用 span 標記的連結
在“建置
PHP 應用程式”一節中要建立的連結，將用來透過 JavaScript
與浏覽器通信，告訴浏覽器要去什麼地方，要提取什麼內容。它們不是使用錨標記的傳統連結，而是使用 span 標記建立的。span 標記的觀感由清單 1 的 CSS
程式碼決定。這裡是範例：
| ＜span onclick="loadHTML('panels-ajax.php?panel_id=0', 'content')"＞Managing content＜/span＞ |
onclick 處理程式指定這個 span
被按時要執行哪個指令檔。還有其他幾個與 onclick 類似的指示符可以使用，包括 onmouseover 和 ondblclick。請注意在 onclick
欄位中顯示的是 JavaScript 函式 loadHTML ，而不是傳統的 http:// 連結或由清單 panels-ajax.php?
建立的相對連結。接下來學習 loadHTML 函式。
XMLHttpRequest 物件
如果正在使用
Mozilla、Opera 或其他這類浏覽器中的一個，那麼可以使用內建的 XMLHttpRequest 物件動態地取得內容。Microsoft 的
Internet Explorer
浏覽器采用另外一個物件，稍後將會學到。它們使用的方式實際上相同，而且對它們提供支援，隻是新增幾行額外程式碼的問題。
XMLHttpRequest
物件用來透過 JavaScript 檢索页面內容。稍後在範例應用程式中會使用這個程式碼，同 ActiveXObject 的 loadHTML
函式一起使用。請參閱清單 2 瞭解用法。
清單 2. 初始化和使用 XMLHttpRequest 物件
| ... ＜style＞ ＜script type="text/javascript"＞ var request; var dest; function loadHTML(URL, destination){ dest = destination; if(window.XMLHttpRequest){ request = new XMLHttpRequest(); request.onreadystatechange = processStateChange; request.open("GET", URL, true); request.send(null); } } ＜/script＞ ... |
在清單
2 中作為參數傳遞的 destination 變數指出 XMLHttpRequest 物件要去裝入內容的地方，由 ＜div
id="content"＞＜/div＞ 標記指定。然後程式碼會檢查 XMLHttpRequest
物件是否存在，如果存在，就建立一個新的。然後，事件處理程式被設定為 processStateChange
函式，這個函式是物件在每次狀態變化時都會調用的函式。請求剩下的部分就是用 open 方法進行設定，設定傳輸類型為 GET，並設定物件要裝入的
URL。最後調用物件的 send 方法，讓物件實際發揮作用。
ActiveXObject
在 Internet Explorer 中，用 ActiveXObject 代替
XMLHttpRequest。它的函式與 XMLHttpRequest 的函式相同，甚至函式名都是一樣的，如清單 3 所示。
清單 3.
初始化和使用 ActiveXObject
| ... function loadHTML(URL, destination){ dest = destination; if(window.XMLHttpRequest){ ... } else if (window.ActiveXObject) { request = new ActiveXObject("Microsoft.XMLHTTP"); if (request) { request.onreadystatechange = processStateChange; request.open("GET", URL, true); request.send(); } } } ＜/script＞ |
在這種情況下（使用
Internet Explorer），實例化一個 Microsoft.XMLHTTP 類型 的新 ActiveXObject
物件。然後，設定事件處理程式，調用物件的 open 函式。然後調用物件的 send 函式，這樣 ActiveXObject
就工作了。
processStateChange
函式
這裡描述的函式叫作事件處理程式或回呼函式。回呼函式的目的是當物件狀態發生變化時，能夠處理狀態變化。在俱體的應用中，這個函式的目的應當是處理狀態變化、檢驗物件是否到達預期狀態、讀取動態裝入的內容。
processStateChange
函式由 XMLHttpRequest 或 ActiveXObject 物件在物件狀態發生變化時調用。當物件進入狀態 4
時，表明页面的內容已經接收完成（請參閱清單 4）。
清單 4. 處理狀態變化
| ... var dest; function processStateChange(){ if (request.readyState == 4){ contentDiv = document.getElementById(dest); if (request.status == 200){ response = request.responseText; contentDiv.innerHTML = response;http://httpd.apache.org/download.cgi } } } function loadHTML(URL, destination){ ... |
當 XML HTTP
物件到達狀態 4 時，內容就已經就緒，可以提取並在浏覽器的預期位置上顯示。位置是
contentDiv，內容從文檔中檢索。如果請求是正確的，而且也按正確的順序檢索，那麼回應的狀態應當是 200。HTML 回應儲存在
request.responseText 中，把它設定到
contentDiv.innerHTML，就可以在浏覽器中顯示它。
如果在傳輸過程中沒有發生錯誤，一切正常，那麼新內容就會在浏覽器中出現；否則，request.status
就不等於 200。請參閱清單 5 瞭解錯誤處理程式碼。
清單 5. 錯誤處理
| ... if (request.status == 200){ response = request.responseText; contentDiv.innerHTML = response; } else { contentDiv.innerHTML = "Error: Status "+request.status; } ... |
清單 5
會把有關傳輸錯誤的資訊發送給浏覽器。在範例應用程式中將把這個函式用作回呼函式。接下來，學習 GET 和 POST
的問題和它們的差異。
GET 與 POST
GET 和 POST 是進行 HTTP
請求和在請求中傳遞變數的兩種方法。開發人員不應當隨意選擇使用哪種方法，因為兩種方法都有使用意義。GET 請求把變數嵌在 URL
中，這意味着它們是可以加書簽的。如果變數可能會修改資料庫、購買商品或者做其他類似操作，這種方法會有副作用。假設偶然間加了書簽的页面有一個購買商品的 URL
，裡麵包含地址、信用卡號以及 $100 的產品，全都嵌在 URL 中，那麼重新訪問這個 URL
就意味着購買這件商品。
所以，隻有在變數沒有副作用，可以經常重新載入也不會發生什麼的時候，才可以進行 GET 請求。適合 GET
請求的一個變數可能是分類
ID。可以反覆重新載入，分類會反覆顯示，但是沒有任何累積的效果。
在另一方麵，當變數對源（例如資料庫）有作用時或者為了個人資訊安全，應當采用
POST 請求。比如在購買一件 $100 的產品時，應當用 POST 請求。如果給付款页面加了書簽，由於 URL
中沒有變數，所以什麼也不會發生，也不會意外地購買了不想購買的東西，或者在已經擁有的情況下又買了一次。
GET 和 POST 的意義在 Ajax
中有同樣的作用。在建置本文的應用程式和未來的應用程式時，理解 GET 和 POST 請求的差異是很重要的。這會有助於避免 Web
應用程式開發的常見缺陷。
編碼方法
對於透過 HTTP 傳輸的資料進行編碼，有多種方法，而 XML
隻接受其中少數幾種。互操作性最大的一種編碼方法是 UTF-8，因為它嚮後相容美國資訊交換標準碼（ASCII）。有許多在其他國家使用的國際字元的編碼方式不嚮後相容
ASCII ，如果不進行恰當的編碼，就不適合放在 XML 檔案中。
例如，把字串 ”Internationalization”
放在浏覽器中，用 UTF-8 編碼的話，會把它變成 I%F1t%EBrn%E2ti%F4n%E0liz%E6ti%F8n。經典 ASCII 字元的 UTF-8
編碼與相同字元的 7 位 ASCII 碼對應，這使 UTF-8 是一個理想的編碼方法選擇。
瞭解這一點是很重要的，因為在透過 HTTP
傳輸和接收文檔的過程中都要處理編碼問題，在使用 Ajax 時也是一樣。使用 Ajax 進行傳輸時，也應當使用 UTF-8 編碼，因為標準化可以提高互操作性。
