多年以來，創建真正具有響應性的 Web 應用程序這一目標一直被 Web 開發的一個簡單事實所阻礙：要改變頁面某一部分的信息，用戶就必須重載整個頁面。但是以后不再會這樣了。感謝異步 java? 腳本和 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... ＞）一樣?，F在來看看如何創建使用這個 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?？梢苑磸椭匦螺d入，分類會反復顯示，但是沒有任何累積的效果。

　　在另一方面，當變量對源（例如數據庫）有作用時或者為了個人信息安全，應當采用 POST 請求。比如在購買一件 $100 的產品時，應當用 POST 請求。如果給付款頁面加了書簽，由于 URL 中沒有變量，所以什么也不會發生，也不會意外地購買了不想購買的東西，或者在已經擁有的情況下又買了一次。

　　GET 和 POST 的意義在 Ajax 中有同樣的作用。在構建本文的應用程序和未來的應用程序時，理解 GET 和 POST 請求的差異是很重要的。這會有助于避免 Web 應用程序開發的常見缺陷。

　　編碼方法

　　對于通過 HTTP 傳輸的數據進行編碼，有多種方法，而 XML 只接受其中少數幾種?；ゲ僮餍宰畲蟮囊环N編碼方法是 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 編碼，因為標準化可以提高互操作性。