通過PHP和Sajax使用Ajax之javascript

ajax

　　多年以來，建立真正具有響應性的 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 建立與 網頁瀏覽器通訊的對象，並告訴瀏覽器裝入特定頁面。然後可以像平常一樣瀏覽同一頁面上的其他內容，當瀏覽器完全裝入新頁面的時候，瀏覽器會在 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 ＞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 請求的一個變數可能是分類別識別碼。可以反覆重新載入，分類會反覆顯示，但是沒有任何累積的效果。

　　在另一方面，當變數對源（例如資料庫）有作用時或者為了個人資訊安全，應當採用 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 編碼，因為標準化可以提高互通性。