如果你真的把前幾篇掌握了．實現ajax刪除功能會易如反常．我所要教你的是．靈活利用JavaScript和Dom來實現一個酷酷的刪除效果．其實你學習到這裡．已經能夠明白，在ajax技術中那些被請求的 服務端網頁，在非ajax應用中並無太大區別．無非也是接受前端發過來的請求．在後台執行一些操作而已！學習完這篇教程以後．你會明白想要實現夠炫夠酷的的ajax效果．你必須要熟練掌握JavaScript Dom 這些技術精通．
剛剛我喝多了，上面的這段話是我在兩天前就寫好的．我本來想直接睡覺的．但我想試試．是不是在我喝酒之後，我能夠講的更好．
其實我覺得在我酒醉迷離的時候更能很好的將我的知識傳授與你．今天的添加效果與前一篇的添加資料一樣．但今天的刪除效果或許是你從未看到過的．想要刪除那條資料．請單擊他．然後點擊刪除按扭．這跟傳統型應用程式並無二樣．ajax就是這樣的神奇．不然 他不會被全世界的Web開發人員所追求！還是先看執行個體吧．你會為此而感到驚訝的！
複製代碼 代碼如下:
<html>
<head>
<title>ajax無重新整理添加與刪除資料</title>
<style>
body{
font-size:12px;
}
table{
border-collapse:collapse;
}
</style>
</head>
<body>
為顯示更流暢，我們唯讀取資料庫內最新的10條資料．由於線上測試人數多．都在操作一個資料庫．可能會出現並發情況！
<hr/>
輸入內容：<input id="str" type="input" /> <input type="button" value="確定添加" onclick="add_Post()"/>
<span id="msg" style="color:red"></span>
<table border="1"><!--該表格用來顯示資料內容-->
<tbody id="a"></tbody>
</table>
<span style="color:red">操作提示：請用按一下滑鼠你想要刪除的資料．然後點擊刪除按扭！</span>
<input id="hid_id" type="hidden" />
<input type="button" value="刪除資料" onclick="del_Data()" />
<script type="text/javascript">
function ajax_xmlhttp(){
//在IE中建立xmlhttpRequest,適用於IE5.0以上所有版本
var msXmlhttp = new Array("Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0","Msxml2.XMLHTTP","Microsoft.XMLHTTP");
for(var i=0; i<msXmlhttp.length; i++){
try
{
_xmlhttp=new ActiveXObject(msXmlhttp[i]);
}
catch(e)
{
_xmlhttp=null;
}
} //迴圈建立基於IE瀏覽器的xmlhttp.結束
//如果非IE瀏覽器，則建立基於FireFox等瀏覽器的xmlhttpRequest
if(!_xmlhttp && typeof XMLHttpRequest != "undefined")
{
_xmlhttp=new XMLHttpRequest();
}
return _xmlhttp;
}
//讀取資料函數
function Read(){
var ajax = ajax_xmlhttp(); //將xmlhttprequest對象賦值給一個變數．
ajax.open("post","Add_Del_Data.asp?action=read",true);//佈建要求方式，請求的網頁，url的action參數為read，非同步請求
ajax.onreadystatechange = function(){//你也可以這裡指定一個已經寫好的函數名稱
if(ajax.readyState == 4){//資料返回成功
if(ajax.status == 200){//http請求狀態代碼返回ok
var xmlData = ajax.responseXML;//以xml格式接收返回的資料，並儲存在xmlData變數裡
var list = xmlData.getElementsByTagName("list");//在返回的資料裡，擷取所有list標籤
if(list.length!=0){
var t = document.getElementById("a");//擷取展示資料的表格
while(t.rows.length!=0){ //在讀取資料時如果表格已存行．一律刪除
t.removeChild(t.rows[0]);
}
for(var i=0;i<list.length;i++){
var tr = t.insertRow(t.rows.length);//有幾個list就為表格增加幾行．
tr.setAttribute("id",list[i].childNodes[0].firstChild.nodeValue);
tr.onclick = function(e){add_Event(e)};
var td = tr.insertCell(0);
td.innerHTML = list[i].childNodes[1].firstChild.nodeValue;
}
}
}
}
}
ajax.send(null);//提交請求，參數為null
}
window.load = Read();
function add_Event(e){
e = e || window.event;
var elem = e.target || e.srcElement;
if(elem.tagName == "TD"){
elem = elem.parentNode;
}
var table = elem.parentNode;
for(var i=0;i<table.rows.length;i++){
table.rows[i].style.background="";
}
elem.style.background="#999ccc";
document.getElementById("hid_id").value = elem.id;
}
//刪除資料函數
function del_Data(){
var mesage = document.getElementById("msg");//擷取顯示操作資訊的span
mesage.innerHTML="正在刪除請稍候......";
var table = document.getElementById("a");//擷取要顯示資料的表格
if(table.rows.length == 0){
mesage.innerHTML = "表格內沒有資料可供刪除！";
return;
}
var id = document.getElementById("hid_id");
if(id.value.length == 0){
mesage.innerHTML = "您還沒有選擇資料！";
return;
}
var ajax = ajax_xmlhttp();//定義xmlhttprequest對象
ajax.open("post","Add_Del_data.asp?action=del",true);//佈建要求方式，請求檔案，非同步請求
var param = "id="+escape(id.value);//擷取要刪除資料的id
ajax.onreadystatechange = function(){
if(ajax.readyState==4){
if(ajax.status==200){
var xml = ajax.responseXML;
var msg = xml.getElementsByTagName("msg")[0].firstChild.nodeValue;
if(msg == 0){
mesage.innerHTML = "成功刪除資料！";
var tr = document.getElementById(id.value);//擷取當前選擇的行
tr.parentNode.removeChild(tr);//引用該行的父元素．然後刪除該行．
id.value="";//刪除完成清空文字框裡的值，
}
if(msg == 1){
mesage.innerHTML = "服務端發生錯誤，刪除失敗！";
}
}
}
}
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
ajax.send(param);
}
//提交資料函數
function add_Post(){
var msgaes = document.getElementById("msg");//用來顯示提示資訊
var str = document.getElementById("str");//接收輸入的內容
if(str.value.length == 0){
msgaes.innerHTML = "不接受空內容！"
return;
}
msgaes.innerHTML = "正在提交";
var ajax = ajax_xmlhttp();//定義xmlhttprequest對象
ajax.open("post","Add_Del_data.asp?action=add",true);//佈建要求方式，請求檔案，非同步請求
var param = "str="+escape(str.value);//擷取你輸入的內容,注意這裡的str,服務端將接收str中的值
ajax.onreadystatechange = function(){
if(ajax.readyState==4){
if(ajax.status==200){
var msg = ajax.responseXML.getElementsByTagName("msg");//擷取服務端返回的msg標籤
if(msg[0].firstChild.nodeValue == 0){
var max_num = ajax.responseXML.getElementsByTagName("count")[0].firstChild.nodeValue;
var t = document.getElementById("a");
var tr = t.insertRow(0);
tr.setAttribute("id",max_num);
tr.onclick = function(e){add_Event(e)};
var td = tr.insertCell(0);
td.innerHTML = str.value;
str.value = "";
msgaes.innerHTML = "添加完成";
}
else if(msg[0].firstChild.nodeValue == 3){
msgaes.innerHTML = "不接受空的內容";
return;
}
else if(msg[0].firstChild.nodeValue == 1){
msgaes.innerHTML = "服務端發生錯誤，資料添加失敗！";
return;
}
else{
msgaes.innerHTML = "該執行個體供學習使用．請不要惡意輸入．謝謝！";
}
}
}
}
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");//注意向服務端提交資料，必須設定該頭．否則服務端會接收不到
ajax.send(param);//注意send方法向服務端提交param變數中的內容．
}
</script>
<a href="http://www.jb51.net" target="_blank">雲棲社區+</a>
</body>
</html>
怎麼樣效果是不是很酷？上面的文字框裡是前台的html源碼．我們先來講一下我們在前端幹了什麼．從body標籤開始講起．
一段友情提示的文字．告訴你會出現些什麼情況！
添加資料的文字框和按扭！用來向服務端資料庫寫入資料內容．
一個span標籤．ID為msg，用來顯示你當前操作的資訊
一個表格．表格內有tbody元素，id為a．用來顯示讀取到的資料．你可以在表格內選擇要刪除的資料．
一個隱藏的輸入框．當你選擇資料時．會把該資料的id值放到輸入框裡．刪除時引用這個值．提交給服務端
刪除資料按扭．定義了一個onclick單擊事件．del_Data()函數．向服務發送刪除指令
下面進入script指令碼部份．script裡面有5個自訂函數．分別是：ajax_xmlhttp()，Read()，add_Event()，del_Data()，add_Post()．我們來一一講解函數的作用．
1、ajax_xmlhttp();建立一個可用的XMLHTTPRequest對象，如果你還不知道什麼是XMLHTTPRequest，請參閱：XMLHTTPRequest
2、Read();讀取資料函數．前幾篇教程中都有講過ajax讀取資料．我只講今天讀取過程中的重點，先看下服務端網頁輸出的xml．add_del_data.asp?action=read．從服務端傳回的xml資料裡擷取所有的list標籤以後．我們先使用getElementById方法擷取到了存放資料的表格．然後迴圈遍曆這些list 標籤．每個list代表一條資料．每個list內包含著2個子項目．第１個子項目記憶體儲著該條資料的id值，第２個子項目記憶體儲著該條資料的常值內容．好，我們來看下Read()函數中for迴圈裡的語句：
（１）：var tr = t.insertRow(t.rows.length);每迴圈一個list便為表格增加一行．因為表格的每一行顯示一條資料．並返回對該行的引用．
（２）：tr.setAttribute("id",list[i].childNodes[0].firstChild.nodeValue);為新增的行設定一個id屬性．並為該屬性指定一個值．注意，這裡是重點．list[i].childNodes[0].firstChild.nodeValue這句的意思是要擷取每條資料中id欄位的值．也就是該條資料的id值．我們將這個值寫給tr的id屬性．以方便我們用滑鼠點擊了某行以後來引用這個id．
（３）：tr.onclick=function(e){add_Event(e)};緊接著再為新增的行綁定一個自訂函數．函數的名稱是add_Event();
（４）：var td.tr.insertCell(0);為新的增添加一列．並返回對該列的引用．
（５）：td.innerHTML = list[i].childNodes[1].firstChild.nodeValue;在該列中寫入第i個list的第2個子項目中的常值內容．也就是content欄位裡的內容了
我們把每條資料的id設定給表格中每一行的id屬性．把每條資料中的content中的常值內容填寫到每一行中的儲存格內．至此整個資料的顯示過程已完成！
3、add_Event(e);我們在Read函數內向表格的每一行綁定了該函數．並利用閉包技術向addEvent傳遞了事件對象．該函數的作用就是找出你單擊的行．並獲得該行資料的id：
（１）：e = e || window.event;標準化事件對象．FF等瀏覽器利用參數傳遞，IE可直接使用window.event．
（２）：var elem = e.target || e.srcElement; 請參閱：target或srcElement．標準化觸發事件的元素．是那個元素觸發了該事件．在這裡的意思是說：你點擊了表格中的那一行．但事實上我取到的是TD，而並非TR．這應該是傳說中的事件捕獲和冒泡所致．沒關係我們使用tagName判斷一下 如果是TD，則取該TD的父元素．這下肯定是TR了吧．呵呵．
（３）：var table = elem.parentNode;取TR的父元素．就是那個tbody．並返回對tbody的引用．
（４）：使用一個for迴圈遍曆tbody中所有的行．將每行的背景顏色設定為空白．
（５）：elem.style.background="#999000";迴圈完畢以後．為你點擊的這一行添加一個背景色．
（６）：document.getElementById("hid_id").value = elem.id;擷取網頁中那個隱藏的文字框．並將你點擊的這一行的id寫入到文字框內．該行的id屬性值．正是你選取資料的id值．而且每點擊一行．這個文字框裡的值都會隨著你點擊的行而改變．而我們在提交刪除的函數裡正是引用的該文字框裡的值．
4、del_Data();該函數的作用：把被刪除的資料的ID提交給服務端請求的網頁．然後根據服務端返回的一個msg標籤．來判斷資料是否被成功刪除．老規矩我只講以前沒有涉及過的內容：
（１）：點擊刪除按扭啟用del_Data()函數．我們先找出id為msg的span標籤．然後寫一段操作資訊．告訴你正在刪除資料．
（２）：擷取要存放資料的表格．也就是那個id為a的tbody．判斷tbody中是否有資料．如果tbody中沒有任何資料．則告訴你沒有資料可供選擇．然後退出函數．不再往下執行．
（３）：擷取那個隱藏的文字框．並判斷文字框是否有值．如果為空白顯示一段提示資訊．退出函數．不再執行！如果有值存在則證明你選擇了某條資料．下面的ajax會將你選擇的這條資料提交給服務端網頁進行刪除
（４）：關於ajax是如何提交和回收資料的．請參閱"ajax初試之讀取資料篇"與"ajax讀取數到表格"．
（５）：del_Data()重點是這裡：判斷服務端傳回那個msg標籤．如果該標籤的內容為0，則代表格服務端工作一切順利，資料已被成功刪除．
（６）：資料被成功刪除以後：var tr = document.getElementById(id.value);擷取當前選擇的行．
（７）：tr.parentNode.removeChild(tr);//引用該行的父元素tbody，刪除該行！
至此刪除資料完成．其經過是接受服務端發回來的訊號．如果刪除成功，則刪除前端選擇的表格行．如果失敗則給出提示資訊！
5、add_Post();該函數與上一篇中基本一樣．提交添加的資料給服務端．唯一不同的地方是：當資料被成功添加以後．我們又調用了Read();函數來讀取新的資料．因為我們必須要獲得新添加資料的正確id，以便我們可以正確刪除！
好了，前端的代碼已經講解完了．
下面是本次ajax執行個體教程請求的服務端網頁源碼：
複製代碼 代碼如下:
<!--#include file="Conn.Asp"-->
<%
'出自：http://Www.Web666.Net
'作者：康董
'如需轉載請務必保留以上資訊
'定義一個變數，來儲存xml資料
xml="<?xml version='1.0' encoding='gb2312'?><body>"
action=Request.QueryString("action") '使用get方式接受一個action來判斷用戶端想要執行什麼操作
Select case action
case "read" '如果為read則執行讀取資料的操作
Call Read
case "add" '如果為add則執行添加資料
Call Add_Data
case "del" '如果為del則執行刪除資料的操作
Call Del_Data
case else
xml = xml&"<msg>請求參數錯誤，請不要試圖非法操作！</msg>"
End Select
xml=xml&"</body>"
Response.Clear
Response.ContentType="text/xml"
Response.CharSet="gb2312"
Response.write xml
Response.End
Sub Read '定義一個讀取資料的過程
Call OpenConn '開啟資料庫連結
Sql = "Select top 10 * From del_table order by id desc" '開啟資料庫中名字為del_table的表
Set Rs = Conn.Execute(Sql) '執行Sql語句，並將sql的索引賦值給rs變數
While Not Rs.Eof '如果表中有資料．則一直迴圈讀取
xml = xml&"<list>" '每讀取一條資料則建立一個list標籤
xml = xml&"<id>"&Rs("id")&"</id>" 'id欄位內容
xml = xml&"<content>"&Rs("content")&"</content>" 'content欄位內容
xml = xml&"</list>" '每讀完一條資料，就閉合list標籤
Rs.MoveNext '執行下一條資料的讀取
Wend '如果資料庫中沒有了資料．則結束迴圈
Close_Conn '關閉資料庫連結
End Sub
Sub Add_Data '添加資料過程
On Error Resume Next '如果發生錯誤繼續執行程式
OpenConn '開啟資料庫連結
str = Trim(Request.Form("str")) '接收用戶端傳過來的str內容
If str = "" Then
xml = xml&"<msg>3</msg>" '如果提交的內容為空白．返回3
Exit Sub '退出過程
End If
Sql = "Insert Into del_table (content) values ('"&str&"')"
Conn.Execute(Sql) '執行添加資料
If Err.Number = 0 Then '判斷是否有錯誤發生，
xml = xml&"<msg>0</msg>" '如果沒有錯誤發生，則證明資料已經成功．返回0
Else
xml = xml&"<msg>1</msg>" '如果發生錯誤．則證明有錯誤發生．資料很可能添加失敗
End If
Close_Conn
End Sub
Sub Del_Data '刪除資料過程
On Error Resume Next
OpenConn
id = Request("id")
Sql = "Delete From del_table where id="&id
Conn.Execute(sql)
If Err.Number = 0 Then
xml = xml&"<msg>0</msg>"
Else
xml = xml&"<msg>1</msg>"
End If
Close_Conn
End Sub
%>
我在服務端使用的是Asp輸出xml格式資料技術．我在前幾篇都有講解．你可以使用php，.net，Jsp輕鬆類比出來．
(!--#include file="Conn.Asp"--)是我的資料庫連結檔案．為保安全我不透露資料庫名字．本次讀取的表名是：del_table 欄位為：ID，Content
今天就講到這裡，有什麼不明白地方．請加 ajax技術交流群：110167482
下一篇我們講：ajax讀取資料之分頁顯示篇
