如果你真的把前幾篇掌握了．實現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讀取數據之分頁顯示篇