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

<<<返回技術中心

技術文章

站內新聞

我要啦免费统计