在AJAX開發(fā)中集成數(shù)據(jù)庫技術(shù)
一、引言
AJAX首先面臨無可避免的第一個問題即是瀏覽器的兼容性問題，而在在AJAX開發(fā)中集成數(shù)據(jù)庫技術(shù)就是把二者的兼容前來，此時，這個兼容性就是至關(guān)重要的一個環(huán)節(jié)。
如今，有相當(dāng)多的Web應(yīng)用程序，如Backpack，Blinksale和Gmail，都把數(shù)據(jù)庫技術(shù)與AJAX集成到一起。通過提供與數(shù)據(jù)庫通訊而不用刷新瀏覽器這種強(qiáng)有力的技術(shù)，這種集成對web應(yīng)用程序和用戶體驗產(chǎn)生巨大的影響-這意味著，在用戶繼續(xù)其它交互的同時可以實現(xiàn)實時的數(shù)據(jù)傳輸。
本文將集中討論上述技術(shù)集成機(jī)理。同時提供了完整的參考源碼。這個示例是一個簡單的職務(wù)記錄應(yīng)用程序，其中每個職務(wù)包含一個標(biāo)題，描述和日期-允許用戶添加、編輯和刪除職務(wù)。所有這些都是你與數(shù)據(jù)庫記錄數(shù)據(jù)打交道時的基本操作，但是這個應(yīng)用程序更進(jìn)了一步。一個職務(wù)可以變化成一個可編輯的表單-它將被從數(shù)據(jù)庫中加以保存或刪除，以及以其新狀態(tài)顯示而不需要刷新瀏覽器并中斷用戶操作。
在本文中，我假定你已經(jīng)初步了解AJAX、MySQL和PHP，或一類似的服務(wù)器端語言。如果你還沒有創(chuàng)建過XML HTTP Request對象，那么可以先參考我的文章“怎樣使用AJAX”。下面，首先讓我們討論數(shù)據(jù)庫的問題。
二、創(chuàng)建數(shù)據(jù)庫
你需要做的第一件事是創(chuàng)建數(shù)據(jù)庫表來為這些職務(wù)存儲數(shù)據(jù)。我創(chuàng)建了一個叫informit_ajax的MySQL表-它擁有ID，title，description和date字段-這些都是在本文中不斷重復(fù)出現(xiàn)的變量。下面是創(chuàng)建該表的代碼：
- 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查詢工具或開發(fā)應(yīng)用程序所用的語言來執(zhí)行這段代碼。一旦準(zhǔn)備好數(shù)據(jù)庫，接下來就需要創(chuàng)建向PHP后臺發(fā)出請求的前端文件。
三、發(fā)出請求
這里的索引HTML文件是一簡單的數(shù)據(jù)占位符-它將被從數(shù)據(jù)庫中加以分析。該文件包含到JavaScript和CSS文件的參考；還包含一個發(fā)出首次請求的onload處理器和三個div標(biāo)簽：
-用于把頁面內(nèi)容居中
-在被請求的數(shù)據(jù)加載期間加載消息，它將為HTTPRequest對象所接收
-用于顯示每一個分析后的職務(wù)數(shù)據(jù)
- ＜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＞
當(dāng)頁面裝載時產(chǎn)生第一個請求。這個請求發(fā)送一個get查詢到一個我們稍后會創(chuàng)建的PHP類；但是首先我們需要為請求的響應(yīng)創(chuàng)建分析方法。JavaScript請求文件負(fù)責(zé)處理所有的基礎(chǔ)工作，例如創(chuàng)建對象，發(fā)送請求以及檢查準(zhǔn)備狀態(tài)等。當(dāng)從Request對象收到響應(yīng)時，我用這個JavaScript職務(wù)文件來處理這些職務(wù)的HTML生成。onResponse方法是相當(dāng)強(qiáng)壯的，因為它以文本和表單兩種版本處理每個職務(wù)的HTML頁面生成，并且把它們放置到它們自己定制的div標(biāo)簽中；這樣以來，我們就可以容易地在用戶交互期間定位它們。通過這種方法，我們可以在每個職務(wù)的文本和表單版本之間進(jìn)行切換-這可以通過點擊一個"edit this post"鏈接來實現(xiàn)。下面是針對每個職務(wù)創(chuàng)建的HTML頁面的代碼，你可以在本文相應(yīng)的下載源文件中看到完整的方法實現(xiàn)。
- 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' 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＞";
每個職務(wù)的文本版本簡單地顯示標(biāo)題，描述和日期以及一個"edit this post"鏈接。每個職務(wù)的表單版本有三個按鈕：
1、"cancel"按鈕-簡單地把職務(wù)的狀態(tài)切換回文本版本。
2、"delete this post"按鈕-把當(dāng)前職務(wù)的ID發(fā)送給PHP對象以從數(shù)據(jù)庫中把它刪除。
3、"save this post"按鈕-允許用戶把新的或編輯過的職務(wù)保存到服務(wù)器。
處理服務(wù)器端請求通訊的核心方法有onResponse，saveNewPost，deletePost和getPost方法；還有存儲當(dāng)前正操作的職務(wù)索引的一個getter和一個setter方法。這些getter/setter方法把當(dāng)前索引值提供給這些核心方法，這樣正確的職務(wù)就可以用基于該索引的正確信息進(jìn)行更新。下面是針對每個核心方法（不包括onResponse，因為我們以前觀察過它的功能)的簡短描述和代碼示例：
下面的saveNewPost方法通過收集并把表單輸入值發(fā)送給PHP對象來保存新的職務(wù)并且把getPost方法設(shè)置為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方法是一個回調(diào)方法-它負(fù)責(zé)當(dāng)從PHP對象收到響應(yīng)時更新單獨的職務(wù)：
- 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方法把當(dāng)前索引作為一個請求發(fā)送給PHP對象，這最終將刪除數(shù)據(jù)庫中的記錄并以更新的職務(wù)進(jìn)行響應(yīng)：
- function deletePost(_id){
- sendRequest("services/post.php?method=delete"id="+ _id, onResponse);
- }
這些就是在AJAX開發(fā)中集成數(shù)據(jù)庫技術(shù)中最為復(fù)雜的部分，掌握了這些，其他的就是易如反掌，只要認(rèn)真學(xué)習(xí)，其實也沒什么難的，重在理解。
【編輯推薦】
