推薦：教你用ajax開(kāi)發(fā)web應(yīng)用程序
在過(guò)去，由于為了獲得新數(shù)據(jù)而不得不重新加載web頁(yè)面（或者加載其他頁(yè)面）導(dǎo)致web應(yīng)用程序發(fā)展被限制。雖然有其他方法可用（不加載其他頁(yè)面），但是這些技術(shù)都沒(méi)有被很好地支持而且有bug成災(zāi)

　　 一、引言

　　如今，有相當(dāng)多的Web應(yīng)用程序，如Backpack，Blinksale和Gmail，都把數(shù)據(jù)庫(kù)技術(shù)與AJAX集成到一起。通過(guò)提供與數(shù)據(jù)庫(kù)通訊而不用刷新瀏覽器這種強(qiáng)有力的技術(shù)，這種集成對(duì)web應(yīng)用程序和用戶體驗(yàn)產(chǎn)生巨大的影響-這意味著，在用戶繼續(xù)其它交互的同時(shí)可以實(shí)現(xiàn)實(shí)時(shí)的數(shù)據(jù)傳輸。

　　本文將集中討論上述技術(shù)集成機(jī)理。同時(shí)提供了完整的參考源碼。這個(gè)示例是一個(gè)簡(jiǎn)單的職務(wù)記錄應(yīng)用程序，其中每個(gè)職務(wù)包含一個(gè)標(biāo)題，描述和日期-允許用戶添加、編輯和刪除職務(wù)。所有這些都是你與數(shù)據(jù)庫(kù)記錄數(shù)據(jù)打交道時(shí)的基本操作，但是這個(gè)應(yīng)用程序更進(jìn)了一步。一個(gè)職務(wù)可以變化成一個(gè)可編輯的表單-它將被從數(shù)據(jù)庫(kù)中加以保存或刪除，以及以其新?tīng)顟B(tài)顯示而不需要刷新瀏覽器并中斷用戶操作。

　　在本文中，我假定你已經(jīng)初步了解AJAX、MySQL和PHP，或一類似的服務(wù)器端語(yǔ)言。如果你還沒(méi)有創(chuàng)建過(guò)XML HTTP Request對(duì)象，那么可以先參考我的文章“怎樣使用AJAX”。下面，首先讓我們討論數(shù)據(jù)庫(kù)的問(wèn)題。

　　二、創(chuàng)建數(shù)據(jù)庫(kù)

　　你需要做的第一件事是創(chuàng)建數(shù)據(jù)庫(kù)表來(lái)為這些職務(wù)存儲(chǔ)數(shù)據(jù)。我創(chuàng)建了一個(gè)叫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查詢工具或開(kāi)發(fā)應(yīng)用程序所用的語(yǔ)言來(lái)執(zhí)行這段代碼。一旦準(zhǔn)備好數(shù)據(jù)庫(kù)，接下來(lái)就需要?jiǎng)?chuàng)建向PHP后臺(tái)發(fā)出請(qǐng)求的前端文件。

　　 三、發(fā)出請(qǐng)求

　　這里的索引HTML文件是一簡(jiǎn)單的數(shù)據(jù)占位符-它將被從數(shù)據(jù)庫(kù)中加以分析。該文件包含到javascript和CSS文件的參考；還包含一個(gè)發(fā)出首次請(qǐng)求的onload處理器和三個(gè)div標(biāo)簽：

　　· Layout-用于把頁(yè)面內(nèi)容居中

　　· loading-在被請(qǐng)求的數(shù)據(jù)加載期間加載消息，它將為HTTPRequest對(duì)象所接收

　　· posts-用于顯示每一個(gè)分析后的職務(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)頁(yè)面裝載時(shí)產(chǎn)生第一個(gè)請(qǐng)求。這個(gè)請(qǐng)求發(fā)送一個(gè)get查詢到一個(gè)我們稍后會(huì)創(chuàng)建的PHP類；但是首先我們需要為請(qǐng)求的響應(yīng)創(chuàng)建分析方法。javascript請(qǐng)求文件負(fù)責(zé)處理所有的基礎(chǔ)工作，例如創(chuàng)建對(duì)象，發(fā)送請(qǐng)求以及檢查準(zhǔn)備狀態(tài)等。當(dāng)從Request對(duì)象收到響應(yīng)時(shí)，我用這個(gè)javascript職務(wù)文件來(lái)處理這些職務(wù)的HTML生成。onResponse方法是相當(dāng)強(qiáng)壯的，因?yàn)樗�以文本和表單兩種版本處理每個(gè)職務(wù)的HTML頁(yè)面生成，并且把它們放置到它們自己定制的div標(biāo)簽中；這樣以來(lái)，我們就可以容易地在用戶交互期間定位它們。通過(guò)這種方法，我們可以在每個(gè)職務(wù)的文本和表單版本之間進(jìn)行切換-這可以通過(guò)點(diǎn)擊一個(gè)"edit this post"鏈接來(lái)實(shí)現(xiàn)。下面是針對(duì)每個(gè)職務(wù)創(chuàng)建的HTML頁(yè)面的代碼，你可以在本文相應(yīng)的下載源文件中看到完整的方法實(shí)現(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＞";
　　每個(gè)職務(wù)的文本版本簡(jiǎn)單地顯示標(biāo)題，描述和日期以及一個(gè)"edit this post"鏈接。每個(gè)職務(wù)的表單版本有三個(gè)按鈕：

　　·"cancel"按鈕-簡(jiǎn)單地把職務(wù)的狀態(tài)切換回文本版本。

　　·"delete this post"按鈕-把當(dāng)前職務(wù)的ID發(fā)送給PHP對(duì)象以從數(shù)據(jù)庫(kù)中把它刪除。

　　·"save this post"按鈕-允許用戶把新的或編輯過(guò)的職務(wù)保存到服務(wù)器。

　　處理服務(wù)器端請(qǐng)求通訊的核心方法有onResponse，saveNewPost，deletePost和getPost方法；還有存儲(chǔ)當(dāng)前正操作的職務(wù)索引的一個(gè)getter和一個(gè)setter方法。這些getter/setter方法把當(dāng)前索引值提供給這些核心方法，這樣正確的職務(wù)就可以用基于該索引的正確信息進(jìn)行更新。下面是針對(duì)每個(gè)核心方法（不包括onResponse，因?yàn)槲覀円郧坝^察過(guò)它的功能)的簡(jiǎn)短描述和代碼示例：

　　· 下面的saveNewPost方法通過(guò)收集并把表單輸入值發(fā)送給PHP對(duì)象來(lái)保存新的職務(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方法是一個(gè)回調(diào)方法-它負(fù)責(zé)當(dāng)從PHP對(duì)象收到響應(yīng)時(shí)更新單獨(dú)的職務(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)前索引作為一個(gè)請(qǐng)求發(fā)送給PHP對(duì)象，這最終將刪除數(shù)據(jù)庫(kù)中的記錄并以更新的職務(wù)進(jìn)行響應(yīng)：

function deletePost(_id){
　sendRequest("services/post.php?method=delete"id=" _id, onResponse);
}
　　令人驚訝的是，最復(fù)雜的部分已經(jīng)結(jié)束了。下面讓我們分析最為關(guān)鍵的部分-數(shù)據(jù)庫(kù)交互。

分享：如何用AJAX實(shí)現(xiàn)網(wǎng)頁(yè)無(wú)刷新功能
在本篇教程中，數(shù)據(jù)庫(kù)的表名和日志查看頁(yè)面以L-Blog為例，因?yàn)槲业牟┛统绦蚴菑腖-Blog修改而來(lái)。 本教程中的例子已經(jīng)通過(guò)實(shí)際測(cè)試，可以直接在L-Blog或FBS中使用。當(dāng)然，要真正應(yīng)用的話還