通過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 編碼，因為標準化可以提高互操作性。
