歡迎您光臨本站 註冊首頁

用 PHP 構建基於 Ajax 的 Web 站點

←手機掃碼閱讀     火星人 @ 2014-03-12 , reply:0
  
學習使用原生 JavaScript™ 代碼和 PHP 編寫 Asynchronous JavaScript + XML(Ajax)應用程序的過程。本文介紹幾個框架和應用程序編程介面(API),可以用它們減少開發 Ajax Web 應用程序所需編寫的代碼量。

PHP 已經流行很多年了。PHP 通常作為伺服器端腳本語言,用來快速開發基於 Web 的應用程序,而且效果很不錯。實際上,一些最流行的 Web 項目(比如 PHP-Nuke、osCommerce 和 Joomla)都是用 PHP 開發的,它們至今仍然很興旺。

Ajax 也已經出現了一陣子了,但是直到最近使用 Ajax 技術開發的 Web 站點才開始大量增加。Ajax 技術使 Web 站點或 Web 應用程序能夠自動地與伺服器通信,而不需要刷新整個頁面。從本質上說,Ajax 的非同步特性使客戶機瀏覽器能夠向伺服器發送請求或調用伺服器端的方法。在客戶端,可以使用 JavaScript 代碼處理伺服器返回的結果,然後可以把任何輸出合併到現有的前端 HTML 視圖中,而不需要刷新頁面。在使用 Ajax 時,實際上並不使用新的編程語言。實際上,只需組合使用現有技術。

Ajax 資源中心

請訪問 Ajax 資源中心,這是有關 Ajax 編程模型信息的一站式中心,包括很多文檔、教程、論壇、blog、wiki 和新聞。任何 Ajax 的新信息都能在這裡找到。

PHP 和 Ajax 的組合提供一個強大的平台,可以用來創建具備健壯的特性的 Web 站點或 Web 應用程序。本文討論 PHP 和 Ajax 的一些用途,研究如何在自己的 Web 應用程序中使用它們。在閱讀本文之前,您應該充分理解 HTML 和 JavaScript 編程。您還應該熟悉 PHP 腳本編程語言,雖然也可以使用大多數其他腳本語言。

與伺服器通信

在 Ajax 中客戶機/伺服器通信的關鍵是使用 JavaScript XMLHttpRequest 對象。大多數瀏覽器都支持這個對象,包括 Windows® Internet Explorer 5.0 和更高版本、Safari 1.2、Mozilla Firefox、Opera 8 和更高版本以及 Netscape 7。為了解釋傳統客戶機/伺服器通信和基於 Ajax 的客戶機/伺服器通信之間的差異,下面舉一個例子。按照傳統方式,為了讓客戶機瀏覽器向伺服器發送需要處理或存儲在資料庫中的內容,常常使用 POST 方法把客戶端上輸入控制項收集的內容發送到伺服器。伺服器使用 PHP(或其他腳本語言)處理這些內容,使用資料庫讀取或存儲數據,最後返回嵌入在 HTML 代碼中的結果。然後,瀏覽器處理 HTML 並向最終用戶顯示一個新頁面。圖 1 描述這個場景。


圖 1. 提交數據並接收結果的傳統過程


通過使用 Ajax,同樣的過程在前端需要的時間更少。其基本思想是讓用戶感覺不必等待頁面更新。實際上,通過使用 Ajax,可以用一個 HTML 頁面構成整個 Web 應用程序,但是不建議這麼做。按照傳統方式,如果希望向伺服器提交一個表單,就要設置表單的動作並把動作類型指定為 POST。在使用 Ajax 時,實際上並不向伺服器直接提交表單,而是調用一個 JavaScript 函數。這個函數從表單收集數據並執行檢驗,然後使用 XMLHttpRequest 把數據發送給一個伺服器端函數。當結果返回客戶機時,客戶機處理結果並更新需要更新的頁面部分。在這種情況下,頁面並不 全部地刷新。因此,處理 HTML 所花費的時間更少,性能會更好。圖 2 說明了使用 Ajax 更新頁面與刷新整個頁面之間的細微差別。


圖 2. 提交數據並接收結果的 Ajax 過程


現在看看通過 JavaScript 代碼與伺服器進行通信所需的步驟。首先,定義表單的外觀,見清單 1。


清單 1. HTML 表單
				  <body>  My First Ajax Page    <form name="myForm">  Press button to view server time:     <input type="button" value="Update"    onClick="ajaxFunction();" />  Server Time Is: <input type="text" name="time" />  </form>    </body>              

這個表單產生圖 3 所示的輸出。


圖 3. HTML 表單的輸出


這個表單沒有做任何真正有用的事,但是它幫助您了解在自己的代碼中的什麼地方集成 Ajax。

請注意按鈕上指定的 onClick 事件。這個事件調用一個名為 ajaxFunction 的 JavaScript 函數。這裡就是 Ajax 中比較有趣的地方。在這個方法中,要執行幾個步驟,本節會逐一解釋這些步驟:

  1. 創建 XMLHttpRequest 對象的實例。
  2. 連接要調用的伺服器端服務。
  3. 告訴 Ajax 在伺服器端代碼執行完成並返回結果時應該調用哪個方法。
  4. 發送請求。
  5. 非同步地響應。

創建 XMLHttpRequest 實例

需要創建 ajaxFunction 並提供一個變數來容納創建的 XMLHttpRequest 對象。與任何 JavaScript 方法一樣,按照清單 2 所示定義這個方法。


清單 2. ajaxFunction 的定義
				  function ajaxFunction() {    var xmlHttp = null;    .    .    .  }              

大多數現代瀏覽器都支持 XMLHttpRequest 對象。但是,Internet Explorer 6 等比較陳舊的瀏覽器要求創建一個 ActiveX 對象來執行非同步的伺服器調用。這會產生一個問題:必須判斷正在運行代碼的瀏覽器類型並創建適當的對象。JavaScript 代碼通過它的 try/catch 功能提供了一個解決方案。只需以正確的優先次序嘗試創建對象,讓 try/catch 塊處理其餘的事情。清單 3 給出一個代碼示例。


清單 3. 創建適當的對象
				  function ajaxFunction() {    var xmlHttp=null;        try    {      // Firefox, Internet Explorer 7. Opera 8.0+, Safari.      xmlHttp = new XMLHttpRequest();    }    catch (e)    {    // Internet Explorer 6.    try      {      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");      }    catch (e)      {      try        {        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");        }      catch (e)        {        return false;        }      }    }  }              

可以看到,所有現代瀏覽器都支持創建 XMLHttpRequest 對象。關於 Microsoft® 是真正支持 XMLHttpRequest 對象,還是使用一個 façade 包裝 ActiveX 實現,還有一些爭議。

打開伺服器連接

在同一個 JavaScript 函數中,創建 XMLHttpRequest 對象之後,使用 XMLHttpRequest 對象的 open 方法打開一個到伺服器端腳本的連接。這個方法有兩個必要參數和三個可選參數,見表 1。


表 1. open 方法的參數
參數 說明
method 指定要使用的 HTTP 方法。有效值包括 GET、POST、PUT 或 HEAD。
url 指定要調用的 XML 數據或伺服器端 XML Web 服務的絕對路徑或相對路徑。為了防止跨站點腳本攻擊,Ajax 請求針對的 URL 必須使用與包含 Ajax 請求的頁面相同的協議、主機和埠。儘管一些瀏覽器可能允許任意的 URL,但是並非所有瀏覽器都支持這麼做。如果需要跨站點通信,必須在伺服器端使用 cURL 或其他方法進行處理。
async 如果希望非同步地向伺服器發送請求,應該把這個參數設置為 true。true 值還要求設置 onreadystatechange 屬性,稍後討論這個屬性。把這個參數設置為 false 會禁止大多數瀏覽器接收任何進一步的用戶輸入。如果應用程序足夠靈活,能夠在執行後端操作的同時繼續接收輸入,那麼最好非同步地執行操作。
user 指定一個用戶名,用來在執行腳本之前對用戶進行身份驗證。只有在腳本要求用戶身份驗證的情況下,才需要這個參數。
password 指定一個密碼,用來在執行腳本之前對用戶進行身份驗證。只有在腳本要求用戶身份驗證的情況下,才需要這個參數。

對於這個示例,代碼只需要執行一個 GET 操作,向伺服器上的一個腳本請求時間。還告訴 open 方法我們希望非同步地執行操作,見清單 4。


清單 4. open 方法調用
				  function ajaxFunction() {        .    .    .    xmlHttp.open("GET", "time.php", true);    }              

告訴 Ajax 在伺服器端代碼執行完成時應該調用哪個方法

在使用 Ajax 調用伺服器時,產生的響應是通過調用一個回調函數返回的。可以創建並命名一個函數,也可以創建無名的函數。無論是哪種情況,都需要設置 XMLHttpRequest 對象的 onReadyStateChange 屬性,讓它知道要使用的回調函數,見清單 5。


清單 5. 設置 onReadyStateChange 屬性
				  function ajaxFunction() {        .    .    .    xmlHttp.onreadystatechange=function() {    	if(xmlHttp.readyState==4)      {    		// Get the data from the server's response.    	  document.myForm.time.value=xmlHttp.responseText;    	  xmlHttp=null;      }    }  }              

可以看到,調用這個方法之後,它會檢查 readyState,尋找有效值 4。共有五個有效狀態,見表 2。


表 2. readyState 的有效值
說明
0 未初始化
1 正在裝載
2 裝載完成
3 交互狀態
4 已經完成

這段代碼的基本意思是,“如果狀態指出操作已經完成,就進行處理”。當狀態為已經完成時,下一步是用伺服器響應更新需要更新的頁面部分。這需要接收賦值給 responseText 屬性的值,這就是伺服器響應。最後,通過把 XMLHttpRequest 對象賦值為 null,停止這個對象。

發送請求

ajaxFunction 還需要執行一個步驟,也就是把請求發送到伺服器。這需要使用 XMLHttpRequest 對象的 send 方法。如果請求是非同步的,這個方法會在發送請求之後立即返回。如果請求是同步的,這個方法在收到響應之後才會返回,這意味著 Ajax 函數會一直阻塞,直到這個方法返回。

這個方法有一個參數,可以把它設置為 null 或許多其他值。例如,可以傳遞一個 DOMDocument 對象、InputStream 或 String。如果請求方法是 POST,這個值就用作 HTTP 請求體。完成的 ajaxFunction 應該與清單 6 相似。


清單 6. 完成的 ajaxFunction
				  function ajaxFunction() {   var xmlHttp=null;      try {     // Firefox, Internet Explorer 7. Opera 8.0+, Safari     xmlHttp = new XMLHttpRequest();   } catch (e) {     // Internet Explorer 6.     try {       xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");     } catch (e) {       try {         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");       } catch (e) {         alert("Your browser does not support AJAX!");         return false;       }     }   }   xmlHttp.open("GET", "time.php", true);   xmlHttp.onreadystatechange=function() {     if(xmlHttp.readyState==4) {       // Get the data from the server's response.       document.myForm.time.value=xmlHttp.responseText;       xmlHttp=null;     }   }   xmlHttp.send("");  }              

非同步地響應

因為 Ajax 在本質上是非同步的,所以必須注意併發性並了解處理次序。在發出多個 Ajax 調用並以出乎意料的次序接收響應時,這尤其重要。一般假設次序是無法意料的。

有時候,伺服器響應需要以 XML 文檔的形式返回給客戶機。在這些情況下,可以使用 XMLHttpRequest 對象的 responseXML 屬性接收數據。清單 7 給出一個返回 XML 文檔的 PHP 腳本示例。


清單 7. 返回 XML 文檔的 PHP 代碼
				  <?php    $result = getRecordSet(
學習使用原生 JavaScript™ 代碼和 PHP 編寫 Asynchronous JavaScript + XML(Ajax)應用程序的過程。本文介紹幾個框架和應用程序編程介面(API),可以用它們減少開發 Ajax Web 應用程序所需編寫的代碼量。

PHP 已經流行很多年了。PHP 通常作為伺服器端腳本語言,用來快速開發基於 Web 的應用程序,而且效果很不錯。實際上,一些最流行的 Web 項目(比如 PHP-Nuke、osCommerce 和 Joomla)都是用 PHP 開發的,它們至今仍然很興旺。

Ajax 也已經出現了一陣子了,但是直到最近使用 Ajax 技術開發的 Web 站點才開始大量增加。Ajax 技術使 Web 站點或 Web 應用程序能夠自動地與伺服器通信,而不需要刷新整個頁面。從本質上說,Ajax 的非同步特性使客戶機瀏覽器能夠向伺服器發送請求或調用伺服器端的方法。在客戶端,可以使用 JavaScript 代碼處理伺服器返回的結果,然後可以把任何輸出合併到現有的前端 HTML 視圖中,而不需要刷新頁面。在使用 Ajax 時,實際上並不使用新的編程語言。實際上,只需組合使用現有技術。

Ajax 資源中心

請訪問 Ajax 資源中心,這是有關 Ajax 編程模型信息的一站式中心,包括很多文檔、教程、論壇、blog、wiki 和新聞。任何 Ajax 的新信息都能在這裡找到。

PHP 和 Ajax 的組合提供一個強大的平台,可以用來創建具備健壯的特性的 Web 站點或 Web 應用程序。本文討論 PHP 和 Ajax 的一些用途,研究如何在自己的 Web 應用程序中使用它們。在閱讀本文之前,您應該充分理解 HTML 和 JavaScript 編程。您還應該熟悉 PHP 腳本編程語言,雖然也可以使用大多數其他腳本語言。

與伺服器通信

在 Ajax 中客戶機/伺服器通信的關鍵是使用 JavaScript XMLHttpRequest 對象。大多數瀏覽器都支持這個對象,包括 Windows® Internet Explorer 5.0 和更高版本、Safari 1.2、Mozilla Firefox、Opera 8 和更高版本以及 Netscape 7。為了解釋傳統客戶機/伺服器通信和基於 Ajax 的客戶機/伺服器通信之間的差異,下面舉一個例子。按照傳統方式,為了讓客戶機瀏覽器向伺服器發送需要處理或存儲在資料庫中的內容,常常使用 POST 方法把客戶端上輸入控制項收集的內容發送到伺服器。伺服器使用 PHP(或其他腳本語言)處理這些內容,使用資料庫讀取或存儲數據,最後返回嵌入在 HTML 代碼中的結果。然後,瀏覽器處理 HTML 並向最終用戶顯示一個新頁面。圖 1 描述這個場景。


圖 1. 提交數據並接收結果的傳統過程


通過使用 Ajax,同樣的過程在前端需要的時間更少。其基本思想是讓用戶感覺不必等待頁面更新。實際上,通過使用 Ajax,可以用一個 HTML 頁面構成整個 Web 應用程序,但是不建議這麼做。按照傳統方式,如果希望向伺服器提交一個表單,就要設置表單的動作並把動作類型指定為 POST。在使用 Ajax 時,實際上並不向伺服器直接提交表單,而是調用一個 JavaScript 函數。這個函數從表單收集數據並執行檢驗,然後使用 XMLHttpRequest 把數據發送給一個伺服器端函數。當結果返回客戶機時,客戶機處理結果並更新需要更新的頁面部分。在這種情況下,頁面並不 全部地刷新。因此,處理 HTML 所花費的時間更少,性能會更好。圖 2 說明了使用 Ajax 更新頁面與刷新整個頁面之間的細微差別。


圖 2. 提交數據並接收結果的 Ajax 過程


現在看看通過 JavaScript 代碼與伺服器進行通信所需的步驟。首先,定義表單的外觀,見清單 1。


清單 1. HTML 表單
				  <body>  My First Ajax Page    <form name="myForm">  Press button to view server time:     <input type="button" value="Update"    onClick="ajaxFunction();" />  Server Time Is: <input type="text" name="time" />  </form>    </body>              

這個表單產生圖 3 所示的輸出。


圖 3. HTML 表單的輸出


這個表單沒有做任何真正有用的事,但是它幫助您了解在自己的代碼中的什麼地方集成 Ajax。

請注意按鈕上指定的 onClick 事件。這個事件調用一個名為 ajaxFunction 的 JavaScript 函數。這裡就是 Ajax 中比較有趣的地方。在這個方法中,要執行幾個步驟,本節會逐一解釋這些步驟:

  1. 創建 XMLHttpRequest 對象的實例。
  2. 連接要調用的伺服器端服務。
  3. 告訴 Ajax 在伺服器端代碼執行完成並返回結果時應該調用哪個方法。
  4. 發送請求。
  5. 非同步地響應。

創建 XMLHttpRequest 實例

需要創建 ajaxFunction 並提供一個變數來容納創建的 XMLHttpRequest 對象。與任何 JavaScript 方法一樣,按照清單 2 所示定義這個方法。


清單 2. ajaxFunction 的定義
				  function ajaxFunction() {    var xmlHttp = null;    .    .    .  }              

大多數現代瀏覽器都支持 XMLHttpRequest 對象。但是,Internet Explorer 6 等比較陳舊的瀏覽器要求創建一個 ActiveX 對象來執行非同步的伺服器調用。這會產生一個問題:必須判斷正在運行代碼的瀏覽器類型並創建適當的對象。JavaScript 代碼通過它的 try/catch 功能提供了一個解決方案。只需以正確的優先次序嘗試創建對象,讓 try/catch 塊處理其餘的事情。清單 3 給出一個代碼示例。


清單 3. 創建適當的對象
				  function ajaxFunction() {    var xmlHttp=null;        try    {      // Firefox, Internet Explorer 7. Opera 8.0+, Safari.      xmlHttp = new XMLHttpRequest();    }    catch (e)    {    // Internet Explorer 6.    try      {      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");      }    catch (e)      {      try        {        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");        }      catch (e)        {        return false;        }      }    }  }              

可以看到,所有現代瀏覽器都支持創建 XMLHttpRequest 對象。關於 Microsoft® 是真正支持 XMLHttpRequest 對象,還是使用一個 façade 包裝 ActiveX 實現,還有一些爭議。

打開伺服器連接

在同一個 JavaScript 函數中,創建 XMLHttpRequest 對象之後,使用 XMLHttpRequest 對象的 open 方法打開一個到伺服器端腳本的連接。這個方法有兩個必要參數和三個可選參數,見表 1。


表 1. open 方法的參數
參數 說明
method 指定要使用的 HTTP 方法。有效值包括 GET、POST、PUT 或 HEAD。
url 指定要調用的 XML 數據或伺服器端 XML Web 服務的絕對路徑或相對路徑。為了防止跨站點腳本攻擊,Ajax 請求針對的 URL 必須使用與包含 Ajax 請求的頁面相同的協議、主機和埠。儘管一些瀏覽器可能允許任意的 URL,但是並非所有瀏覽器都支持這麼做。如果需要跨站點通信,必須在伺服器端使用 cURL 或其他方法進行處理。
async 如果希望非同步地向伺服器發送請求,應該把這個參數設置為 true。true 值還要求設置 onreadystatechange 屬性,稍後討論這個屬性。把這個參數設置為 false 會禁止大多數瀏覽器接收任何進一步的用戶輸入。如果應用程序足夠靈活,能夠在執行後端操作的同時繼續接收輸入,那麼最好非同步地執行操作。
user 指定一個用戶名,用來在執行腳本之前對用戶進行身份驗證。只有在腳本要求用戶身份驗證的情況下,才需要這個參數。
password 指定一個密碼,用來在執行腳本之前對用戶進行身份驗證。只有在腳本要求用戶身份驗證的情況下,才需要這個參數。

對於這個示例,代碼只需要執行一個 GET 操作,向伺服器上的一個腳本請求時間。還告訴 open 方法我們希望非同步地執行操作,見清單 4。


清單 4. open 方法調用
				  function ajaxFunction() {        .    .    .    xmlHttp.open("GET", "time.php", true);    }              

告訴 Ajax 在伺服器端代碼執行完成時應該調用哪個方法

在使用 Ajax 調用伺服器時,產生的響應是通過調用一個回調函數返回的。可以創建並命名一個函數,也可以創建無名的函數。無論是哪種情況,都需要設置 XMLHttpRequest 對象的 onReadyStateChange 屬性,讓它知道要使用的回調函數,見清單 5。


清單 5. 設置 onReadyStateChange 屬性
				  function ajaxFunction() {        .    .    .    xmlHttp.onreadystatechange=function() {    	if(xmlHttp.readyState==4)      {    		// Get the data from the server's response.    	  document.myForm.time.value=xmlHttp.responseText;    	  xmlHttp=null;      }    }  }              

可以看到,調用這個方法之後,它會檢查 readyState,尋找有效值 4。共有五個有效狀態,見表 2。


表 2. readyState 的有效值
說明
0 未初始化
1 正在裝載
2 裝載完成
3 交互狀態
4 已經完成

這段代碼的基本意思是,“如果狀態指出操作已經完成,就進行處理”。當狀態為已經完成時,下一步是用伺服器響應更新需要更新的頁面部分。這需要接收賦值給 responseText 屬性的值,這就是伺服器響應。最後,通過把 XMLHttpRequest 對象賦值為 null,停止這個對象。

發送請求

ajaxFunction 還需要執行一個步驟,也就是把請求發送到伺服器。這需要使用 XMLHttpRequest 對象的 send 方法。如果請求是非同步的,這個方法會在發送請求之後立即返回。如果請求是同步的,這個方法在收到響應之後才會返回,這意味著 Ajax 函數會一直阻塞,直到這個方法返回。

這個方法有一個參數,可以把它設置為 null 或許多其他值。例如,可以傳遞一個 DOMDocument 對象、InputStream 或 String。如果請求方法是 POST,這個值就用作 HTTP 請求體。完成的 ajaxFunction 應該與清單 6 相似。


清單 6. 完成的 ajaxFunction
				  function ajaxFunction() {   var xmlHttp=null;      try {     // Firefox, Internet Explorer 7. Opera 8.0+, Safari     xmlHttp = new XMLHttpRequest();   } catch (e) {     // Internet Explorer 6.     try {       xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");     } catch (e) {       try {         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");       } catch (e) {         alert("Your browser does not support AJAX!");         return false;       }     }   }   xmlHttp.open("GET", "time.php", true);   xmlHttp.onreadystatechange=function() {     if(xmlHttp.readyState==4) {       // Get the data from the server's response.       document.myForm.time.value=xmlHttp.responseText;       xmlHttp=null;     }   }   xmlHttp.send("");  }              

非同步地響應

因為 Ajax 在本質上是非同步的,所以必須注意併發性並了解處理次序。在發出多個 Ajax 調用並以出乎意料的次序接收響應時,這尤其重要。一般假設次序是無法意料的。

有時候,伺服器響應需要以 XML 文檔的形式返回給客戶機。在這些情況下,可以使用 XMLHttpRequest 對象的 responseXML 屬性接收數據。清單 7 給出一個返回 XML 文檔的 PHP 腳本示例。


清單 7. 返回 XML 文檔的 PHP 代碼
___FCKpd___6

這段代碼創建一個 XML 文檔(由 '<?xml version="1.0" encoding="ISO-8859-1"?>' 表示),然後發送響應的其餘部分。客戶端代碼必須先從 responseXML 屬性中取出 XML 文檔,使用 Document Object Model(DOM)解析數據,然後通過修改頁面上現有的適當欄位在頁面上顯示數據。清單 8 演示這些步驟。


清單 8. 處理 XML 文檔的 JavaScript 代碼
				  function stateChanged() {       if(xmlHttp.readyState==4)  {      xmlDoc = xmlHttp.responseXML;         document.getElementById("make").innerHTML =         xmlDoc.getElementsByTagName("make")[0].childNodes[0].nodeValue;      document.getElementById("model").innerHTML =         xmlDoc.getElementsByTagName("model")[0].childNodes[0].nodeValue;      document.getElementById("year").innerHTML =        xmlDoc.getElementsByTagName("year")[0].childNodes[0].nodeValue;      document.getElementById("description").innerHTML =        xmlDoc.getElementsByTagName("description")[0].childNodes[0].nodeValue;    }  }               

用 JavaScript 框架擴展 Ajax

您可能會注意到,為了在前端實現 Ajax 功能,伺服器端 PHP 代碼並不需要任何特殊的東西。實際上,可以用任何語言編寫伺服器端腳本,只要能夠從 Web 伺服器調用它並把結果返回給客戶機。但是,出於幾個目的,希望擴展 Ajax 來實現其他功能。例如,許多庫提供了外觀更好的前端控制項,可以實現 Web 2.0 所需的效果。這些庫大多數是用 JavaScript 代碼編寫的,並提供了可以減少編寫前端所需的 JavaScript 代碼量的特性和 API。另外,這些庫大多數使用 JavaScript Object Notation(JSON),這是一種目前在網際網路上廣泛使用的輕量數據交換格式。下面是可能對您有幫助的一些庫:

  • Prototype
  • Script.aculo.us
  • Dojo
  • jQuery

Prototype

Prototype 提供用來開發動態 Web 應用程序的類驅動的 JavaScript 代碼。另外,Prototype 框架還提供一個全局 Ajax 對象,這個對象使 Ajax 功能更容易編寫、效果更好、更容易處理。另外,通過使用這個框架進行 Ajax 開發,就不再需要處理跨瀏覽器問題。只需在一次調用中指定目標 URL、HTTP 方法(POST 或 GET)和響應回調函數等等。

Script.aculo.us

Script.aculo.us 是另一個流行的 JavaScript 框架,它提供一些出色的用戶界面控制項。這個框架還提供了一些執行 Ajax 功能的控制項。甚至還有一個 Google 風格的自動補齊文本控制項,可以用它收集用戶輸入的文本。Ajax 功能允許輕鬆地指定查詢的伺服器端目標。產生的響應用來向最終用戶顯示伺服器返回的字元串集。

Dojo

Dojo 工具集是一個開放源碼的 JavaScript 和 Ajax 框架,它速度快和文件小(只有 25 KB),因此很受歡迎。在 Ajax 方面,Dojo 提供了用來發送和接收非同步伺服器調用和響應的 API。在伺服器端不需要修改任何代碼。對於任何 Ajax 調用,您的 PHP 代碼仍然可以做出響應。

jQuery

jQuery 的優點是簡化了在頁面上搜索元素的機制,並支持在運行時動態地添加新函數、特性和格式。它還提供一些與眾不同的 Ajax 特性,支持在 Web 頁面上提供 Ajax 交互。

擴展 PHP 來執行 Ajax

既然了解了基本概念,現在就來討論如何擴展 PHP 來支持 Ajax。從 PHP 的角度來看,擴展 Ajax 功能並不僅僅是重寫 XMLHttpRequest(XHR)訪問代碼。這還涉及以更簡單更直觀的方式提供前端服務,然後通過它們訪問用 PHP 編寫的後端服務。應該包括從前端執行後端服務、訪問資料庫、執行後端網路服務等特性。我在市場上看到的一些框架允許開發人員用後端語言編寫代碼,然後由框架創建前端 JavaScript 代碼。開發人員告訴框架必須調用哪些後端方法,框架就會用 JavaScript 代碼編寫前端 façade,這些代碼可以分配 XHR 對象、發送請求、接收響應,然後把響應傳遞給您選擇的函數,甚至把輸出直接賦值給您選擇的 HTML 元素。這種框架設計思想可以減少必須編寫的 JavaScript 代碼。希望為其提供函數的所有元素都可以被覆蓋,可以把它們連接到在發生指定的前端事件時做出響應的後端方法。下面是值得研究的一些框架:

  • PHP AJAX
  • PHP-Ext
  • ExtPHP

PHP AJAX

PHP AJAX 允許開發人員用自己的類擴展 PHP 類。然後,只需在調用 PHP 文件時調用一個初始化方法,它會替您生成必需的前端 XHR 代碼。前端事件必須調用一個與 PHP 類同名的 JavaScript 函數。代碼與清單 9 相似。


清單 9. 用自己的 PHP 類擴展 PHP AJAX
				  class ajax_app extends phpajax {    function input() {    }    function loading() {    }    function main() {    }   }          

調用覆蓋的方法執行 Ajax 生命周期中的各種任務。例如,如果在前端執行一個操作,就調用後端類的 main() 方法處理這個操作。在前端收集的所有輸入都傳遞給 input() 方法。

PHP-Ext

PHP-Ext 提供一個支持 PHP 4 和 5 的庫,這個庫提供大量前端用戶界面控制項。這些控制項的底層代碼實際上是由 Ext JS 提供的,但這個框架的特色是開發人員不需要提供 JavaScript 來操作前端控制項。相反,與控制項的所有交互都是通過用 PHP 編寫的後端服務來執行的。在需要時,根據指定的事件調用 PHP 代碼。當發生指定的事件時,就會調用對應的 PHP 代碼。按照這種方式,可以從 PHP 代碼幾乎直接地填寫網格和其他控制項的內容。

ExtPHP

用 PHP 編寫的另一種 Ext JS 包裝器是 ExtPHP(不要與前面提到的 PHP-Ext 混淆)。按照這個項目的開發負責人的說法,可以使用 ExtPHP 編寫侵入式和非侵入式 JavaScript 代碼,編程方式與使用 Ext JS 時相同。這個框架的優點是允許 PHP 編輯器探測未知的、拼寫錯誤的或使用不當的方法,這樣就不必在 Web 瀏覽器中調試 JavaScript 代碼。ExtPHP 的設計思想是生成可以從 PHP 腳本調用的 PHP 類。在實例化一個對象時,會把對應的 JavaScript 代碼存儲在一個內部緩衝區中。如果調用一個對象的方法,代碼也被添加到內部緩衝區中。準備好所有 JavaScript 代碼之後,只需調用一個方法 jsrender()。還可以通過調用 ExtPHP 函數在輸出中添加內容,這樣就可以在輸出中直接添加 JavaScript 代碼。

結束語

本文介紹了如何編寫基於 Ajax 的前端代碼,以及如何把前端代碼和後端 PHP 腳本結合起來。還介紹了一些最新的框架,可以使用這些框架大大加快 Ajax Web 應用程序的創建。通過結合使用這些框架、Ajax 和 PHP,可以編寫出外觀優美、功能豐富的 Web 應用程序。實際上,如果您掌握了這些新技術,就會覺得離不開它們了。(責任編輯:A6)

GET['query']; echo '<?xml version="1.0" encoding="ISO-8859-1"?>' . '<car>'; while($row = mysql_fetch_array($result)) { echo "<make>" . $row['make'] . "</make>"; echo "<model>" . $row['model'] . "</model>"; echo "<year>" . $row['year'] . "</year>"; echo "<description>" . $row['description'] . "</description>"; } echo '</car>'; ?>

這段代碼創建一個 XML 文檔(由 '<?xml version="1.0" encoding="ISO-8859-1"?>' 表示),然後發送響應的其餘部分。客戶端代碼必須先從 responseXML 屬性中取出 XML 文檔,使用 Document Object Model(DOM)解析數據,然後通過修改頁面上現有的適當欄位在頁面上顯示數據。清單 8 演示這些步驟。


清單 8. 處理 XML 文檔的 JavaScript 代碼
___FCKpd___7

用 JavaScript 框架擴展 Ajax

您可能會注意到,為了在前端實現 Ajax 功能,伺服器端 PHP 代碼並不需要任何特殊的東西。實際上,可以用任何語言編寫伺服器端腳本,只要能夠從 Web 伺服器調用它並把結果返回給客戶機。但是,出於幾個目的,希望擴展 Ajax 來實現其他功能。例如,許多庫提供了外觀更好的前端控制項,可以實現 Web 2.0 所需的效果。這些庫大多數是用 JavaScript 代碼編寫的,並提供了可以減少編寫前端所需的 JavaScript 代碼量的特性和 API。另外,這些庫大多數使用 JavaScript Object Notation(JSON),這是一種目前在網際網路上廣泛使用的輕量數據交換格式。下面是可能對您有幫助的一些庫:

  • Prototype
  • Script.aculo.us
  • Dojo
  • jQuery

Prototype

Prototype 提供用來開發動態 Web 應用程序的類驅動的 JavaScript 代碼。另外,Prototype 框架還提供一個全局 Ajax 對象,這個對象使 Ajax 功能更容易編寫、效果更好、更容易處理。另外,通過使用這個框架進行 Ajax 開發,就不再需要處理跨瀏覽器問題。只需在一次調用中指定目標 URL、HTTP 方法(POST 或 GET)和響應回調函數等等。

Script.aculo.us

Script.aculo.us 是另一個流行的 JavaScript 框架,它提供一些出色的用戶界面控制項。這個框架還提供了一些執行 Ajax 功能的控制項。甚至還有一個 Google 風格的自動補齊文本控制項,可以用它收集用戶輸入的文本。Ajax 功能允許輕鬆地指定查詢的伺服器端目標。產生的響應用來向最終用戶顯示伺服器返回的字元串集。

Dojo

Dojo 工具集是一個開放源碼的 JavaScript 和 Ajax 框架,它速度快和文件小(只有 25 KB),因此很受歡迎。在 Ajax 方面,Dojo 提供了用來發送和接收非同步伺服器調用和響應的 API。在伺服器端不需要修改任何代碼。對於任何 Ajax 調用,您的 PHP 代碼仍然可以做出響應。

jQuery

jQuery 的優點是簡化了在頁面上搜索元素的機制,並支持在運行時動態地添加新函數、特性和格式。它還提供一些與眾不同的 Ajax 特性,支持在 Web 頁面上提供 Ajax 交互。

擴展 PHP 來執行 Ajax

既然了解了基本概念,現在就來討論如何擴展 PHP 來支持 Ajax。從 PHP 的角度來看,擴展 Ajax 功能並不僅僅是重寫 XMLHttpRequest(XHR)訪問代碼。這還涉及以更簡單更直觀的方式提供前端服務,然後通過它們訪問用 PHP 編寫的後端服務。應該包括從前端執行後端服務、訪問資料庫、執行後端網路服務等特性。我在市場上看到的一些框架允許開發人員用後端語言編寫代碼,然後由框架創建前端 JavaScript 代碼。開發人員告訴框架必須調用哪些後端方法,框架就會用 JavaScript 代碼編寫前端 façade,這些代碼可以分配 XHR 對象、發送請求、接收響應,然後把響應傳遞給您選擇的函數,甚至把輸出直接賦值給您選擇的 HTML 元素。這種框架設計思想可以減少必須編寫的 JavaScript 代碼。希望為其提供函數的所有元素都可以被覆蓋,可以把它們連接到在發生指定的前端事件時做出響應的後端方法。下面是值得研究的一些框架:

  • PHP AJAX
  • PHP-Ext
  • ExtPHP

PHP AJAX

PHP AJAX 允許開發人員用自己的類擴展 PHP 類。然後,只需在調用 PHP 文件時調用一個初始化方法,它會替您生成必需的前端 XHR 代碼。前端事件必須調用一個與 PHP 類同名的 JavaScript 函數。代碼與清單 9 相似。


清單 9. 用自己的 PHP 類擴展 PHP AJAX
___FCKpd___8

調用覆蓋的方法執行 Ajax 生命周期中的各種任務。例如,如果在前端執行一個操作,就調用後端類的 main() 方法處理這個操作。在前端收集的所有輸入都傳遞給 input() 方法。

PHP-Ext

PHP-Ext 提供一個支持 PHP 4 和 5 的庫,這個庫提供大量前端用戶界面控制項。這些控制項的底層代碼實際上是由 Ext JS 提供的,但這個框架的特色是開發人員不需要提供 JavaScript 來操作前端控制項。相反,與控制項的所有交互都是通過用 PHP 編寫的後端服務來執行的。在需要時,根據指定的事件調用 PHP 代碼。當發生指定的事件時,就會調用對應的 PHP 代碼。按照這種方式,可以從 PHP 代碼幾乎直接地填寫網格和其他控制項的內容。

ExtPHP

用 PHP 編寫的另一種 Ext JS 包裝器是 ExtPHP(不要與前面提到的 PHP-Ext 混淆)。按照這個項目的開發負責人的說法,可以使用 ExtPHP 編寫侵入式和非侵入式 JavaScript 代碼,編程方式與使用 Ext JS 時相同。這個框架的優點是允許 PHP 編輯器探測未知的、拼寫錯誤的或使用不當的方法,這樣就不必在 Web 瀏覽器中調試 JavaScript 代碼。ExtPHP 的設計思想是生成可以從 PHP 腳本調用的 PHP 類。在實例化一個對象時,會把對應的 JavaScript 代碼存儲在一個內部緩衝區中。如果調用一個對象的方法,代碼也被添加到內部緩衝區中。準備好所有 JavaScript 代碼之後,只需調用一個方法 jsrender()。還可以通過調用 ExtPHP 函數在輸出中添加內容,這樣就可以在輸出中直接添加 JavaScript 代碼。

結束語

本文介紹了如何編寫基於 Ajax 的前端代碼,以及如何把前端代碼和後端 PHP 腳本結合起來。還介紹了一些最新的框架,可以使用這些框架大大加快 Ajax Web 應用程序的創建。通過結合使用這些框架、Ajax 和 PHP,可以編寫出外觀優美、功能豐富的 Web 應用程序。實際上,如果您掌握了這些新技術,就會覺得離不開它們了。(責任編輯:A6)



[火星人 ] 用 PHP 構建基於 Ajax 的 Web 站點已經有638次圍觀

http://coctec.com/docs/linux/show-post-69044.html