在AJAX開發中整合資料庫技術

ajax|資料|資料庫 一、引言

　　如今，有相當多的Web應用程式，如Backpack，Blinksale和Gmail，都把資料庫技術與AJAX整合到一起。 通過提供與資料庫通訊而不用重新整理瀏覽器這種強有力的技術，這種整合對web應用程式和使用者體驗產生巨大的影響-這意味著，在使用者繼續其它互動的同時可以實現即時的資料轉送。

　　本文將集中討論上述技術整合機理。同時提供了完整的參考源碼。這個樣本是一個簡單的職務記錄應用程式，其中每個職務包含一個標題，描述和日期-允許使用者添加、編輯和刪除職務。所有這些都是你與資料庫記錄資料打交道時的基本操作，但是這個應用程式更進了一步。一個職務可以變化成一個可編輯的表單-它將被從資料庫中加以儲存或刪除，以及以其新狀態顯示而不需要重新整理瀏覽器並中斷使用者操作。

　　在本文中，我假定你已經初步瞭解AJAX、MySQL和PHP，或一類似的伺服器端語言。如果你還沒有建立過XML HTTP Request對象，那麼可以先參考我的文章“怎樣使用AJAX”。下面，首先讓我們討論資料庫的問題。

　　二、建立資料庫

　　你需要做的第一件事是建立資料庫表來為這些職務儲存資料。我建立了一個叫informit_ajax的MySQL表-它擁有ID，title，description和date欄位-這些都是在本文中不斷重複出現的變數。下面是建立該表的代碼：

CREATE TABLE ′informit_ajax′ ( ′id′ int(11) NOT NULL auto_increment, ′date′ datetime NOT NULL default '0000-00-00 00:00:00', ′description′ longtext NOT NULL, ′title′ varchar(100) NOT NULL default '', PRIMARY KEY (′id′) ) TYPE=MyISAM;

　　你可以用任何MySQL查詢工具或開發應用程式所用的語言來執行這段代碼。一旦準備好資料庫，接下來就需要建立向PHP後台發出請求的前端檔案。

　　 三、發出請求

　　這裡的索引HTML檔案是一簡單的資料預留位置-它將被從資料庫中加以分析。該檔案包含到JavaScript和CSS檔案的參考；還包含一個發出首次請求的onload處理器和三個div標籤：

　　· Layout-用於把頁面內容置中

　　· loading-在被請求的資料載入期間載入訊息，它將為HTTPRequest對象所接收

　　· posts-用於顯示每一個分析後的職務資料

＜head＞ ＜title＞How to Integrate a Database with AJAX＜/title＞ ＜link href="css/layout.css" rel="stylesheet" type="text/css" /＞ ＜script src="js/request.js"＞＜/script＞ ＜script src="js/post.js"＞＜/script＞ ＜/head＞ ＜body ＞ ＜div id="layout" align="center"＞ ＜div id="posts"＞＜/div＞ ＜p＞＜input type="button" value="add a post" /＞＜/p＞ ＜p＞＜div id="loading"＞＜/div＞＜/p＞ ＜/div＞ ＜/body＞

　　當頁面裝載時產生第一個請求。這個請求發送一個get查詢到一個我們稍後會建立的PHP類；但是首先我們需要為請求的響應建立分析方法。JavaScript請求檔案負責處理所有的基礎工作，例如建立對象，發送請求以及檢查準備狀態等。當從Request對象收到響應時，我用這個JavaScript職務檔案來處理這些職務的HTML產生。onResponse方法是相當強壯的，因為它以文本和表單兩種版本處理每個職務的HTML頁面產生，並且把它們放置到它們自己定製的div標籤中；這樣以來，我們就可以容易地在使用者互動期間定位它們。通過這種方法，我們可以在每個職務的文本和表單版本之間進行切換-這可以通過點擊一個"edit this post"連結來實現。下面是針對每個職務建立的HTML頁面的代碼，你可以在本文相應的下載源檔案中看到完整的方法實現。

var html = "＜div class='post' id='post_"+ i +"' "+ postDisplay +"＞" + "＜div class='title' id='title_"+ i +"'＞"+ _title +"＜/div＞" + "＜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＞ " + "＜/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){ 　var newDescription = document.getElementById("formDescription_"+ _index).value; 　var newTitle = document.getElementById("formTitle_"+ _index).value; 　setIndex(_index); 　sendRequest("services/post.php?method=save"id="+ _id +""title="+ newTitle +""description="+ newDescription, getPost); }

　　· 下面的getPost方法是一個回調方法-它負責當從PHP對象收到響應時更新單獨的職務：

function getPost(){ 　if(checkReadyState(request)) { 　　var response = request.responseXML.documentElement; 　　var _title = response.getElementsByTagName('title')[getIndex()].firstChild.data; 　　var _description = response.getElementsByTagName('description')[getIndex()].firstChild.data; 　　var _date = response.getElementsByTagName('date')[getIndex()].firstChild.data; 　　document.getElementById("title_"+ getIndex()).innerHTML = _title; 　　document.getElementById("description_"+ getIndex()).innerHTML = _description; 　　document.getElementById("date_"+ getIndex()).innerHTML = _date; 　　toggle(getIndex()); 　} }

　　· 下面的deletePost方法把當前索引作為一個請求發送給PHP對象，這最終將刪除資料庫中的記錄並以更新的職務進行響應：

function deletePost(_id){ 　sendRequest("services/post.php?method=delete"id="+ _id, onResponse); }

　　令人驚訝的是，最複雜的部分已經結束了。下面讓我們分析最為關鍵的部分-資料庫互動。

[1] [2]  下一頁