使用jQuery和PHP構建一個受Ajax驅動的Web頁面

大多數 PHP 開發人員都是以老式的方法學習技能。他們一般先學習如何定義和構建簡單 的 PHP 頁面，然後再瞭解如何將這些頁面串連到簡單的 MySQL 表，於是就可以由此進行自 己的開發了。隨著技能水平的提高，他們還逐漸學會了如何建立更為複雜的 PHP 功能，以及 如何串連 MySQL 內的表並執行其他進階任務。

在這個過程中，他們有可能還會掌握 一些用戶端技能來將 Web 應用程式投入使用。也有可能學會有關 XHTML 或 CSS 甚至一些 JavaScript 編程的知識。隨著所參與項目的種類的增多，他們甚至有機會接觸到 Ajax 以便 為您的 Web 應用程式賦予 Web 2.0 或 “案頭” 的感覺。不過，如果您初次使 用 Ajax 的經驗與我類似的話，您可能已經做了太多的工作 — 手動實現各種函數、經 曆建立一個受 Ajax 驅動頁面的艱難過程。

對於某些人而言，Ajax 仍是個謎。它似 乎是 Web 開發/互動社區中的 “酷小孩（cool kid）” 和 “壞小孩（bad boys）” 才會做的事情，而他們則沒有時間和耐心或者能力去瞭解並使用它。這真是 個遺憾，因為很多客戶的確喜歡添加 Ajax 風格的功能 — 它讓 Web 應用程式更容易 使用。如果您是這些 PHP 開發人員中的一員，也請不要害怕：讀完本文，您所掌握的知識足 以讓您成為一名真正的 Ajax 專業人士。

本文展示了如何使用 jQuery 來向 PHP Web 應用程式輕鬆添加 Ajax 功能。我們將使用 PHP 和 MySQL 構建一個簡單的 Web 應用程式 — 一個包含名字和電話號碼的電話本。這個應用程式具備預期的所有標準功能 — 比如可以尋找名字或電話號碼、具有 MySQL 表等。接下來，還將嚮應用程式添加 jQuery，以便能夠在鍵入時即時尋找名字和電話號碼。在完成上述任務後，您也就具備了有 關 jQuery 及 Ajax 的充足的基礎知識。

何為 Ajax？

描述 Ajax 的最佳方法 是將其與傳統方式進行對比。大多數 Web 頁面和應用程式都在同步模式下工作。單擊一個鏈 接或表單的提交 按鈕後，請求就被發送給伺服器，而此伺服器之後會處理該請求並發送回一 個響應。總結此模型的最好方法是 “單擊、等候、查看”。這就是您所熟知的一 個永不終止的漂洗-和-重複（rinse-and-repeat）的迴圈過程。換言之，如果頁面需要經常 顯示被更新的資訊，那麼就必須放上某類自動重新整理 hack，或者是讓使用者重新整理或單擊一個連結 執行重新整理。

Ajax 改變了這一切。Ajax 中的第一個字母 A 代表的是 非同步。Ajax 允 許以任何一種程式設計語言建立頁面，然後用來自資料庫或其他後端伺服器過程的資訊重新整理該頁 面的不同部分。比如，假如說您有一個電子商務網站，上面顯示了所銷售的產品。在每個產 品頁面，都有幾個常見項目：標題、銷售說明、縮圖圖片、庫存數量。

假如，您想 讓網站的訪問者能夠獲得庫存數量的最新資訊。您就可以添加一個 Ajax 函數，該函數能運 行包含 MySQL 查詢的一個單獨的 PHP 頁面，然後就可重新填充原始頁面上的資訊，無需用 戶輸入，也不必考慮事件的單擊-等待-查看模式的同步性。

Ajax 中的 j 代表的是 JavaScript，它是所有行為的驅動力。這既是好事也是壞事 — 好的一面是由於是客戶 端代碼，所以它是可移植的，而且不會影響到伺服器；對 PHP 開發人員而言不好的一面是它 完全不同於他們所習慣使用的那個環境。這就需要像 jQuery 這樣的工具和架構來大大簡化 您與 Ajax 互動的方式，加快程式碼完成的進度。