程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> 關於PHP編程 >> 使用jQuery和PHP構建一個受Ajax驅動的Web頁面(1)

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

編輯:關於PHP編程

大多數 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 交互的方式,加快代碼完成的進度。

最後的兩項:+ 和 x 又代表什麼呢?它們代表的是 及 XML,不過,XML 部分並不確切。大量 Ajax 應用程序在沒有任何 XML 代碼時仍工作得很好:它們只來回傳遞 HTML,甚至是純文本。更准確的說法是讓 x 代表 XMLHttpRequest,因為可使用該對象在後台檢索數據,而不會干擾現有頁面的顯示或行為。

何為 jQuery?

jQuery 是 John Resig 創建的一種輕量的 JavaScript 庫,在 2006 年早期發布於 Internet。它是免費的開源軟件,具有 Massachusetts Institute of Technology (MIT) 和 GNU General Public License 的雙重許可。由於它簡單直觀,因此贏得了開發界很多人的擁護。

那麼它為何如此流行呢?因為它提供了一種簡單易用的庫,簡化了 JavaScript,因此任何人(沒錯,甚至一個徹徹底底的後端程序員)無需艱苦的工作就能創建非凡的效果。您可以進行 Document Object Model (DOM) 元素選擇、修改和處理 CSS、使元素更加吸引人以及處理 Ajax。所有這些功能性的實現都來自於一個 JavaScript 文件,該文件可從 jQuery 站點下載(參見 參考資料)。

下載 jQuery 之後,通過包括進一個簡單的 ﹤script﹥ 標記就可以將其添加到任何的 HTML 或 PHP 文件:

﹤script type="text/javascript" src="/path/to/jquery.js"﹥﹤/script﹥

假設,您有一個非常簡單卻很煩人的任務要完成 — 需要很多手動操作,比如在您站點上的每個表單標簽末尾添加一個冒號(:)。您可以遍歷並尋找每個表單標簽並在每行的末尾添加一個冒號,您也可以部署如下的 jQuery 代碼:

清單 1. 使用 jQuery 添加一個冒號

﹤script type="text/javascript"﹥ 

$(document).ready(function(){

$("label").append(":");

});

﹤/script﹥

此函數很簡單:它將一直等待,直到頁面准備好並全部加載($(document).ready() 部分)完畢,這時將運行一個匿名函數,該函數尋找所有 DOM label 元素,然後向所找到的文本的末尾追加一個冒號。$() 函數的功能是允許以其本地名字訪問 DOM 元素,這就讓此接口成為了已經熟悉 DOM 的那些開發人員的最佳選擇。

當然,用 jQuery 還能做很多其他的事情,這只是一個好的開端。借助一個簡單的內置函數,jQuery 可以確保您的代碼能夠工作,因為它會等待頁面加載。有了另一行代碼,就能對代碼所找到的所有 DOM label 元素進行徹底更改,所有都在客戶機內進行,而無需乏味地遍歷所有標記並在那裡進行更改。

1

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved