| 在 AJAX 開發中集成數據庫技術 |  |
 |
 |
| Written by gcy | |
| Трв 09 2007 р., 01:02 | |
|
作者：佚名 來源：csdn
一、引言
如今，有相當多的Web應用程序，如Backpack，Blinksale和Gmail，都把數據庫技術與AJAX集成到一起。通過提供與數據庫通訊而不用刷新瀏覽器這種強有力的技術，這種集成對web應用程序和用戶體驗產生巨大的影響-這意味着，在用戶繼續其它交互的同時可以實現實時的數據傳輸。 本文將集中討論上述技術集成機理。同時提供了完整的參考源碼。這個示例是一個簡單的職務記錄應用程序，其中每個職務包含一個標題，描述和日期-允許用戶添加、編輯和刪除職務。所有這些都是你與數據庫記錄數據打交道時的基本操作，但是這個應用程序更進了一步。一個職務可以變化成一個可編輯的表單-它將被從數據庫中加以保存或刪除，以及以其新狀態顯示而不需要刷新瀏覽器並中斷用戶操作。 在本文中，我假定你已經初步瞭解AJAX、MySQL和PHP，或一類似的服務器端語言。如果你還沒有創建過XML HTTP Request對象，那麼可以先參考我的文章“怎樣使用AJAX”。下面，首先讓我們討論數據庫的問題。 二、創建數據庫 你需要做的第一件事是創建數據庫表來爲這些職務存儲數據。我創建了一個叫informit_ajax的MySQL表-它擁有ID，title，description和date字段-這些都是在本文中不斷重複出現的變量。下面是創建該表的代碼： CREATE TABLE ′informit_ajax′ ( 你可以用任何MySQL查詢工具或開發應用程序所用的語言來執行這段代碼。一旦準備好數據庫，接下來就需要創建向PHP後臺發出請求的前端文件。 三、發出請求 這裏的索引HTML文件是一簡單的數據佔位符-它將被從數據庫中加以分析。該文件包含到JavaScript和CSS文件的參考；還包含一個發出首次請求的onload處理器和三個div標籤： · Layout-用於把頁面內容居中 · loading-在被請求的數據加載期間加載消息，它將爲HTTPRequest對象所接收 · posts-用於顯示每一個分析後的職務數據 ＜head＞ 當頁面裝載時產生第一個請求。這個請求發送一個get查詢到一個我們稍後會創建的PHP類；但是首先我們需要爲請求的響應創建分析方法。JavaScript請求文件負責處理所有的基礎工作，例如創建對象，發送請求以及檢查準備狀態等。當從Request對象收到響應時，我用這個JavaScript職務文件來處理這些職務的HTML生成。onResponse方法是相當強壯的，因爲它以文本和表單兩種版本處理每個職務的HTML頁面生成，並且把它們放置到它們自己定製的div標籤中；這樣以來，我們就可以容易地在用戶交互期間定位它們。通過這種方法，我們可以在每個職務的文本和表單版本之間進行切換-這可以通過點擊一個"edit this post"鏈接來實現。下面是針對每個職務創建的HTML頁面的代碼，你可以在本文相應的下載源文件中看到完整的方法實現。 var html = "＜div class='post' id='post_"+ i +"' "+ postDisplay +"＞"+ "＜div class='description' id='description_"+ i +"'＞"+ _description +"＜/div＞" + "＜div class='date' id='date_"+ i +"'＞"+ _date +"＜/div＞" + "＜a href=/"javascript:toggle('"+ i +"');/"＞edit this post＜/a＞＜br/＞" + "＜/div＞" + "＜div class='post' id='formPost_"+ i +"' "+ formPostDisplay +"＞" + "＜div class='title'＞＜input type='text' name='title' id='formTitle_"+ i +"' size='60' value='"+ _title +"'＞＜/div＞" + "＜div class='description'＞＜textarea type='text' id='formDescription_"+ i +"' wrap='virtual' cols='60' rows='15'＞"+ _description +"＜/textarea＞＜/div＞" + "＜div class='date'＞"+ _date +"＜/div＞" + "＜input type='button' name='cancel' value='cancel' onclick=/"javascript:toggle('"+ i +"');/"＞" + "＜input type='button' name='delete' value='delete this post' onclick=/"javascript:deletePost("+ _id +");/"＞" + "＜input type='button' name='submit' value='save this post' onclick=/"javascript:saveNewPost("+ _id +","+ i +");/"＞" + "＜/div＞" + "＜p＞"nbsp;＜/p＞"; 每個職務的文本版本簡單地顯示標題，描述和日期以及一個"edit this post"鏈接。每個職務的表單版本有三個按鈕： ·"cancel"按鈕-簡單地把職務的狀態切換回文本版本。 ·"delete this post"按鈕-把當前職務的ID發送給PHP對象以從數據庫中把它刪除。 ·"save this post"按鈕-允許用戶把新的或編輯過的職務保存到服務器。 處理服務器端請求通訊的核心方法有onResponse，saveNewPost，deletePost和getPost方法；還有存儲當前正操作的職務索引的一個getter和一個setter方法。這些getter/setter方法把當前索引值提供給這些核心方法，這樣正確的職務就可以用基於該索引的正確信息進行更新。下面是針對每個核心方法（不包括onResponse，因爲我們以前觀察過它的功能)的簡短描述和代碼示例： · 下面的saveNewPost方法通過收集並把表單輸入值發送給PHP對象來保存新的職務並且把getPost方法設置爲onreadystatechange的回叫方法： function saveNewPost(_id, _index){ · 下面的getPost方法是一個回調方法-它負責當從PHP對象收到響應時更新單獨的職務： function getPost(){ · 下面的deletePost方法把當前索引作爲一個請求發送給PHP對象，這最終將刪除數據庫中的記錄並以更新的職務進行響應： function deletePost(_id){ sendRequest("services/post.php?method=delete"id="+ _id, onResponse); 令人驚訝的是，最複雜的部分已經結束了。下面讓我們分析最爲關鍵的部分-數據庫交互。
四、與數據庫交互
爲了實現與數據庫的交互，你需要創建方法用於檢索，插入，代替和刪除職務。我選擇創建一個post類，其中有get，save和delete方法來處理這些交互。這個類還有一個到數據庫連接文件（用於連接到數據庫）的參考。你必須用自己的數據庫信息來代替登錄，口令和數據庫名。DEFINE ('DB_USER', 'USERNAME');
DEFINE ('DB_PASSWORD', 'PASSWORD'); DEFINE ('DB_HOST', 'localhost'); DEFINE ('DB_NAME', 'DATABASE'); $dbc = @mysql_connect (DB_HOST, DB_USER, DB_PASSWORD) OR die ('Could not connect to MySQL: ' . mysql_error() ); 到連接文件的參考以及數據庫的名字位於該類的構造器中。你的構造器看上去應該與下面代碼相似：
function Post(){
require_once('mysql_connect.php'); $this-＞table = "informit_ajax"; } 下面的dbConnect方法負責創建連接-通過把登錄信息傳送給數據庫；這個方法被重用於查詢數據庫前的所有核心方法中：
function dbConnect(){
DEFINE ('LINK', mysql_connect (DB_HOST, DB_USER, DB_PASSWORD)); } 下面的get方法循環遍歷數據庫表，它基於數據庫行創建一個XML字符串，並把該字符串返回給請求者：
function get(){
$this-＞dbConnect(); $query = "SELECT * FROM $this-＞table ORDER BY id"; $result = mysql_db_query (DB_NAME, $query, LINK); $xml = "＜?xml version=/"1.0/" encoding=/"ISO-8859-1/" ?＞/n"; $xml .= "＜posts＞/n"; while($row = mysql_fetch_array($result)) { $xml .= "＜post＞/n"; $xml .= "＜id＞" . $row['id'] . "＜/id＞/n"; $xml .= "＜date＞" . $row['date'] . "＜/date＞/n"; $xml .= "＜title＞＜![CDATA[" . $row['title'] . "]]＞＜/title＞/n"; $xml .= "＜description＞＜![CDATA[" . $row['description'] . "]]＞＜/description＞/n"; $xml .= "＜/post＞/n"; } $xml .= "＜/posts＞"; mysql_close(); header("Content-Type: application/xml; charset=UTF-8"); echo $xml; } 下面的save方法通過處理更新和插入位置實現兩個目的：
function save($id, $title, $description){
$this-＞dbConnect(); $query = "SELECT * FROM $this-＞table WHERE id='$id'"; $result = @mysql_query ($query); if (mysql_num_rows($result) ＞ 0) { $query = "UPDATE $this-＞table SET title='$title', description='$description', date=NOW() WHERE id='$id'"; $result = @mysql_query($query); } else { $query = "INSERT INTO $this-＞table (title, description, date) VALUES ('$title', '$description', NOW())"; $result = @mysql_query($query); } mysql_close(); $this-＞get(); } 下面的delete方法負責刪除一個基於被作爲參數傳遞的ID的位置。然後調用get方法來把新的數據返回到請求文件：
function delete($id){
$this-＞dbConnect(); $query = "DELETE FROM $this-＞table WHERE id='$id'"; $result = @mysql_query($query); mysql_close(); $this-＞get(); } 五、綜合應用
爲了把以上各部分整合到一起,需要創建一個簡單的文件來承擔XML HTTP請求和PHP對象之間的通訊橋樑。這時的頁面不僅創建PHP對象，還接收查詢並把變量傳遞給動態生成的方法-在此是指get，save或delete。下面的一個示例查詢包括了一個$method和可靠的$id，$title和$description變量。$post = new Post();
$post-＞$method($id, $title, $description); 以後我們還會更進一步討論這些技術。如今的web開發看起來再次變得年輕而充滿活力，而我們也很幸運地成爲這種新技術時代的一部分。 |