一、引言
如今，有相當多的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 onload="javascript:makeRequest('services/post.php?method=get');"＞
＜div id="layout" align="center"＞
＜div id="posts"＞＜/div＞
＜p＞＜input type="button" value="add a post" onmousedown="javascript:makeRequest('services/post.php?method=save');" /＞＜/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＞＜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