在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 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＞