多年以來，創(chuàng)建真正具有響應(yīng)性的 Web 應(yīng)用程序這一目標(biāo)一直被 Web 開發(fā)的一個簡單事實(shí)所阻礙：要改變頁面某一部分的信息，用戶就必須重載整個頁面。但是以后不再會這樣了。感謝異步 java? 腳本和 xml（Ajax），我們現(xiàn)在可以從服務(wù)器端請求新內(nèi)容，只修改頁面的一部分。這個教程解釋了如何把 Ajax 用于 php ，并介紹了簡單 Ajax 工具包（Sajax），這是一個用 PHP 編寫的工具，可以把服務(wù)器端 PHP 與 JavaScript 集成。

　　開始之前

　　這份教程針對的是對于開發(fā)富 Web 應(yīng)用程序感興趣的人，富 Web 應(yīng)用程序把異步 Javascript 和 XML（Ajax）與 PHP 結(jié)合起來，用戶每次點(diǎn)擊時，不必刷新整個頁面，就可以動態(tài)更新內(nèi)容。這份教程假設(shè)讀者了解基本的 PHP 概念，包括 if 和 switch 語句以及函數(shù)的使用。

　　關(guān)于本教程

　　在本教程中，將學(xué)習(xí) Ajax 以及圍繞它的應(yīng)用的問題。將用 PHP 構(gòu)建一個 Ajax 應(yīng)用程序，顯示以前寫的一個教程中的面板。點(diǎn)擊面板鏈接只會重新載入內(nèi)容區(qū)，并用選定面板的內(nèi)容替換它，從而節(jié)約了帶寬和頁面裝入的時間。然后將把簡單 Ajax 工具包（Sajax）集成進(jìn) Ajax 應(yīng)用程序，它可以同步 Ajax 的使用，從而簡化開發(fā)。

　　概述

　　在深入之前，先看看 Ajax、示例 PHP 應(yīng)用程序和 Sajax。 Ajax

　　Ajax 允許 Web 開發(fā)人員創(chuàng)建交互的 Web 頁面，同時避免必須等候頁面載入這一瓶頸。通過 Ajax 創(chuàng)建的應(yīng)用程序，只需點(diǎn)擊按鈕，就可以用全新的內(nèi)容替換 Web 頁面某一區(qū)域的內(nèi)容。它的精彩之處在于不必等候頁面裝入，只有這一個區(qū)域的內(nèi)容需要載入。以 Google Maps 為例：可以點(diǎn)擊和四處移動地圖，卻不必等候頁面載入。

　　Ajax 的問題

　　在使用 Ajax 時有些事需要注意。像其他 Web 頁面一樣，Ajax 頁面是可以加書簽的，所以在使用 GET 與 POST 進(jìn)行請求時就會造成問題。國際化和編碼方案數(shù)量的增加，使得把這些編碼方案標(biāo)準(zhǔn)化變得日益重要。在這份教程中將了解這些重要的問題。

　　示例 PHP 應(yīng)用程序

　　首先要用 Ajax 創(chuàng)建一個應(yīng)用程序，然后用 Sajax 創(chuàng)建，以展現(xiàn)使用這個工具包的好處。應(yīng)用程序是以前編寫的教程中的一部分，帶有面板鏈接。它被用作示例，以展示使用 Ajax 的優(yōu)勢。因?yàn)樵诟鱾€面板上點(diǎn)擊時，它們會異步裝入，而不必等候頁面剩下的部分再次裝入。這個示例應(yīng)用程序還會展示如何創(chuàng)建自己的 Ajax 應(yīng)用程序。

　　Sajax

　　如果想創(chuàng)建 Ajax 應(yīng)用程序，又不想受 Ajax 復(fù)雜的細(xì)節(jié)所累。答案就是 Sajax。通過使用 ModernMethod 人員開發(fā)的庫，Sajax 為 Web 開發(fā)人員抽象出了 Ajax 的高層細(xì)節(jié)。在底層，Sajax 的工作與 Ajax 相同。但是，通過使用 Sajax 庫提供的高層函數(shù)，可以忽略 Ajax 的技術(shù)細(xì)節(jié)。

　　什么是 Ajax？

　　這一節(jié)是個入門介紹，用示例解釋 Ajax 的概念，包括在點(diǎn)擊鏈接時發(fā)生了什么，Ajax 用于 PHP 應(yīng)用程序時需要的 HTML 和 JavaScript 代碼。下一節(jié)將更深入一些，實(shí)際地使用在這一節(jié)學(xué)習(xí)的 Ajax 概念創(chuàng)建 PHP 應(yīng)用程序。

　　幕后內(nèi)容

　　Ajax 是異步 JavaScript 和 XML 的組合。之所以說異步，是因?yàn)榭梢渣c(diǎn)擊頁面上的鏈接，然后它只裝入與點(diǎn)擊對應(yīng)的內(nèi)容，同時保持標(biāo)題或其他任何設(shè)定的信息不動。

　　點(diǎn)擊鏈接時，在背后工作的是 JavaScript 函數(shù)。JavaScript 創(chuàng)建與 Web 瀏覽器通信的對象，并告訴瀏覽器裝入特定頁面。然后可以像平常一樣瀏覽同一頁面上的其他內(nèi)容，當(dāng)瀏覽器完全裝入新頁面的時候，瀏覽器會在 HTML 的 div 標(biāo)記指定的位置顯示內(nèi)容。

　　CSS 樣式代碼用來和 span 標(biāo)記一起創(chuàng)建鏈接。

　　CSS 樣式代碼

　　示例應(yīng)用程序需要 CSS 代碼，這樣 span 標(biāo)記看起來就像使用常規(guī)的錨標(biāo)記（＜a href=... ＞）創(chuàng)建的真正鏈接一樣，也會像真正的鏈接一樣被點(diǎn)擊。

　　清單 1. 指定 span 標(biāo)記的顯示信息

...
＜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 標(biāo)記用在示例應(yīng)用程序中，顏色符合所有 IBM developerWorks 教程中鏈接使用的顏色。樣式標(biāo)記的第一行指定已經(jīng)訪問過的鏈接的顏色保持不變。鼠標(biāo)經(jīng)過時加下劃線，光標(biāo)變成指針，就像普通的錨標(biāo)記（＜a href... ＞）一樣?，F(xiàn)在來看看如何創(chuàng)建使用這個 CSS 樣式代碼的鏈接。

　　創(chuàng)建使用 span 標(biāo)記的鏈接

　　在“構(gòu)建 PHP 應(yīng)用程序”一節(jié)中要創(chuàng)建的鏈接，將用來通過 JavaScript 與瀏覽器通信，告訴瀏覽器要去什么地方，要提取什么內(nèi)容。它們不是使用錨標(biāo)記的傳統(tǒng)鏈接，而是使用 span 標(biāo)記創(chuàng)建的。span 標(biāo)記的觀感由清單 1 的 CSS 代碼決定。這里是示例：

＜span onclick="loaDHTML('panels-ajax.php?panel_id=0',
'content')"＞Managing content＜/span＞

　　onclick 處理程序指定這個 span 被點(diǎn)擊時要運(yùn)行哪個腳本。還有其他幾個與 onclick 類似的指示符可以使用，包括 onmouSEOver 和 ondblclick。請注意在 onclick 字段中顯示的是 JavaScript 函數(shù) loadHTML ，而不是傳統(tǒng)的 http:// 鏈接或由清單 panels-ajax.php? 創(chuàng)建的相對鏈接。接下來學(xué)習(xí) loadHTML 函數(shù)。

　　xmlhttpRequest 對象

　　如果正在使用 Mozilla、Opera 或其他這類瀏覽器中的一個，那么可以使用內(nèi)置的 XMLHttPRequest 對象動態(tài)地取得內(nèi)容。Microsoft 的 Internet Explorer 瀏覽器采用另外一個對象，稍后將會學(xué)到。它們使用的方式實(shí)際上相同，而且對它們提供支持，只是添加幾行額外代碼的問題。

　　XMLHttpRequest 對象用來通過 JavaScript 檢索頁面內(nèi)容。稍后在示例應(yīng)用程序中會使用這個代碼，同 ActiveXObject 的 loadHTML 函數(shù)一起使用。請參閱清單 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 中作為參數(shù)傳遞的 destination 變量指出 XMLHttpRequest 對象要去裝入內(nèi)容的地方，由 ＜div id="content"＞＜/div＞ 標(biāo)記指定。然后代碼會檢查 XMLHttpRequest 對象是否存在，如果存在，就創(chuàng)建一個新的。然后，事件處理程序被設(shè)置為 processStateChange 函數(shù)，這個函數(shù)是對象在每次狀態(tài)變化時都會調(diào)用的函數(shù)。請求剩下的部分就是用 open 方法進(jìn)行設(shè)置，設(shè)置傳輸類型為 GET，并設(shè)置對象要裝入的 URL。最后調(diào)用對象的 send 方法，讓對象實(shí)際發(fā)揮作用。

　　ActiveXObject

　　在 Internet Explorer 中，用 ActiveXObject 代替 XMLHttpRequest。它的函數(shù)與 XMLHttpRequest 的函數(shù)相同，甚至函數(shù)名都是一樣的，如清單 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），實(shí)例化一個 Microsoft.XMLHTTP 類型 的新 ActiveXObject 對象。然后，設(shè)置事件處理程序，調(diào)用對象的 open 函數(shù)。然后調(diào)用對象的 send 函數(shù)，這樣 ActiveXObject 就工作了。

　　processStateChange 函數(shù)

　　這里描述的函數(shù)叫作事件處理程序或回調(diào)函數(shù)?；卣{(diào)函數(shù)的目的是當(dāng)對象狀態(tài)發(fā)生變化時，能夠處理狀態(tài)變化。在具體的應(yīng)用中，這個函數(shù)的目的應(yīng)當(dāng)是處理狀態(tài)變化、檢驗(yàn)對象是否到達(dá)預(yù)期狀態(tài)、讀取動態(tài)裝入的內(nèi)容。

　　processStateChange 函數(shù)由 XMLHttpRequest 或 ActiveXObject 對象在對象狀態(tài)發(fā)生變化時調(diào)用。當(dāng)對象進(jìn)入狀態(tài) 4 時，表明頁面的內(nèi)容已經(jīng)接收完成（請參閱清單 4）。

　　清單 4. 處理狀態(tài)變化

...
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){
...

　　當(dāng) XML HTTP 對象到達(dá)狀態(tài) 4 時，內(nèi)容就已經(jīng)就緒，可以提取并在瀏覽器的預(yù)期位置上顯示。位置是 contentDiv，內(nèi)容從文檔中檢索。如果請求是正確的，而且也按正確的順序檢索，那么響應(yīng)的狀態(tài)應(yīng)當(dāng)是 200。HTML 響應(yīng)保存在 request.responseText 中，把它設(shè)置到 contentDiv.innerHTML，就可以在瀏覽器中顯示它。

　　如果在傳輸過程中沒有發(fā)生錯誤，一切正常，那么新內(nèi)容就會在瀏覽器中出現(xiàn)；否則，request.status 就不等于 200。請參閱清單 5 了解錯誤處理代碼。

　　清單 5. 錯誤處理

...
if (request.status == 200){
　response = request.responseText;
　contentDiv.innerHTML = response;
} else {
　contentDiv.innerHTML = "Error: Status "+request.status;
}
...

　　清單 5 會把有關(guān)傳輸錯誤的信息發(fā)送給瀏覽器。在示例應(yīng)用程序中將把這個函數(shù)用作回調(diào)函數(shù)。接下來，學(xué)習(xí) GET 和 POST 的問題和它們的差異。

　　GET 與 POST

　　GET 和 POST 是進(jìn)行 HTTP 請求和在請求中傳遞變量的兩種方法。開發(fā)人員不應(yīng)當(dāng)隨意選擇使用哪種方法，因?yàn)閮煞N方法都有使用意義。GET 請求把變量嵌在 URL 中，這意味著它們是可以加書簽的。如果變量可能會修改數(shù)據(jù)庫、購買商品或者做其他類似操作，這種方法會有副作用。假設(shè)偶然間加了書簽的頁面有一個購買商品的 URL ，里面包含地址、信用卡號以及 $100 的產(chǎn)品，全都嵌在 URL 中，那么重新訪問這個 URL 就意味著購買這件商品。

　　所以，只有在變量沒有副作用，可以經(jīng)常重新載入也不會發(fā)生什么的時候，才可以進(jìn)行 GET 請求。適合 GET 請求的一個變量可能是分類 ID。可以反復(fù)重新載入，分類會反復(fù)顯示，但是沒有任何累積的效果。

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

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

　　編碼方法

　　對于通過 HTTP 傳輸?shù)臄?shù)據(jù)進(jìn)行編碼，有多種方法，而 XML 只接受其中少數(shù)幾種。互操作性最大的一種編碼方法是 UTF-8，因?yàn)樗蚝蠹嫒菝绹畔⒔粨Q標(biāo)準(zhǔn)碼（ASCII）。有許多在其他國家使用的國際字符的編碼方式不向后兼容 ASCII ，如果不進(jìn)行恰當(dāng)?shù)木幋a，就不適合放在 XML 文件中。

　　例如，把字符串 ”Internationalization” 放在瀏覽器中，用 UTF-8 編碼的話，會把它變成 I%F1t%EBrn%E2ti%F4n%E0liz%E6ti%F8n。經(jīng)典 ASCII 字符的 UTF-8 編碼與相同字符的 7 位 ASCII 碼對應(yīng)，這使 UTF-8 是一個理想的編碼方法選擇。

　　了解這一點(diǎn)是很重要的，因?yàn)樵谕ㄟ^ HTTP 傳輸和接收文檔的過程中都要處理編碼問題，在使用 Ajax 時也是一樣。使用 Ajax 進(jìn)行傳輸時，也應(yīng)當(dāng)使用 UTF-8 編碼，因?yàn)闃?biāo)準(zhǔn)化可以提高互操作性。