Ajax添加數(shù)據(jù)與刪除篇實現(xiàn)代碼

html>
head>
title>ajax無刷新添加與刪除數(shù)據(jù)/title>
style>
body{
font-size:12px;
}
table{
border-collapse:collapse;

}
/style>
/head>
body>
為顯示更流暢，我們只讀取數(shù)據(jù)庫內(nèi)最新的10條數(shù)據(jù)．由于在線測試人數(shù)多．都在操作一個數(shù)據(jù)庫．可能會出現(xiàn)并發(fā)情況！
hr/>
輸入內(nèi)容：input id="str" type="input" /> input type="button" value="確定添加" onclick="add_Post()"/>
span id="msg" style="color:red">/span>
table border="1">!--該表格用來顯示數(shù)據(jù)內(nèi)容-->
tbody id="a">/tbody>
/table>
span style="color:red">操作提示：請用鼠標單擊你想要刪除的數(shù)據(jù)．然后點擊刪除按扭！/span>
input id="hid_id" type="hidden" />
input type="button" value="刪除數(shù)據(jù)" onclick="del_Data()" />
script type="text/javascript">
function ajax_xmlhttp(){
//在IE中創(chuàng)建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; imsXmlhttp.length; i++){
try
{
_xmlhttp=new ActiveXObject(msXmlhttp[i]);
}
catch(e)
{
_xmlhttp=null;
}
} //循環(huán)創(chuàng)建基于IE瀏覽器的xmlhttp.結(jié)束
//如果非IE瀏覽器，則創(chuàng)建基于FireFox等瀏覽器的xmlhttpRequest
if(!_xmlhttp typeof XMLHttpRequest != "undefined")
{
_xmlhttp=new XMLHttpRequest();
}
return _xmlhttp;
}

//讀取數(shù)據(jù)函數(shù)
function Read(){
var ajax = ajax_xmlhttp(); //將xmlhttprequest對象賦值給一個變量．
ajax.open("post","Add_Del_Data.asp?action=read",true);//設(shè)置請求方式，請求的網(wǎng)頁，url的action參數(shù)為read，異步請求
ajax.onreadystatechange = function(){//你也可以這里指定一個已經(jīng)寫好的函數(shù)名稱
if(ajax.readyState == 4){//數(shù)據(jù)返回成功
if(ajax.status == 200){//http請求狀態(tài)碼返回ok
var xmlData = ajax.responseXML;//以xml格式接收返回的數(shù)據(jù)，并保存在xmlData變量里
var list = xmlData.getElementsByTagName("list");//在返回的數(shù)據(jù)里，獲取所有l(wèi)ist標簽
if(list.length!=0){
var t = document.getElementById("a");//獲取展示數(shù)據(jù)的表格
while(t.rows.length!=0){ //在讀取數(shù)據(jù)時如果表格已存行．一律刪除
t.removeChild(t.rows[0]);
}
for(var i=0;ilist.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);//提交請求，參數(shù)為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;itable.rows.length;i++){
table.rows[i].style.background="";
}
elem.style.background="#999ccc";
document.getElementById("hid_id").value = elem.id;
}

//刪除數(shù)據(jù)函數(shù)
function del_Data(){
var mesage = document.getElementById("msg");//獲取顯示操作信息的span
mesage.innerHTML="正在刪除請稍候......";
var table = document.getElementById("a");//獲取要顯示數(shù)據(jù)的表格
if(table.rows.length == 0){
mesage.innerHTML = "表格內(nèi)沒有數(shù)據(jù)可供刪除！";
return;
}
var id = document.getElementById("hid_id");
if(id.value.length == 0){
mesage.innerHTML = "您還沒有選擇數(shù)據(jù)！";
return;
}
var ajax = ajax_xmlhttp();//定義xmlhttprequest對象
ajax.open("post","Add_Del_data.asp?action=del",true);//設(shè)置請求方式，請求文件，異步請求

var param = "id="+escape(id.value);//獲取要刪除數(shù)據(jù)的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 = "成功刪除數(shù)據(jù)！";
var tr = document.getElementById(id.value);//獲取當前選擇的行
tr.parentNode.removeChild(tr);//引用該行的父元素．然后刪除該行．
id.value="";//刪除完成清空文本框里的值，
}
if(msg == 1){
mesage.innerHTML = "服務(wù)端發(fā)生錯誤，刪除失敗！";
}
}
}
}
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
ajax.send(param);
}

//提交數(shù)據(jù)函數(shù)
function add_Post(){
var msgaes = document.getElementById("msg");//用來顯示提示信息
var str = document.getElementById("str");//接收輸入的內(nèi)容
if(str.value.length == 0){
msgaes.innerHTML = "不接受空內(nèi)容！"
return;
}
msgaes.innerHTML = "正在提交";
var ajax = ajax_xmlhttp();//定義xmlhttprequest對象
ajax.open("post","Add_Del_data.asp?action=add",true);//設(shè)置請求方式，請求文件，異步請求

var param = "str="+escape(str.value);//獲取你輸入的內(nèi)容,注意這里的str,服務(wù)端將接收str中的值
ajax.onreadystatechange = function(){
if(ajax.readyState==4){
if(ajax.status==200){
var msg = ajax.responseXML.getElementsByTagName("msg");//獲取服務(wù)端返回的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 = "不接受空的內(nèi)容";
return;
}
else if(msg[0].firstChild.nodeValue == 1){
msgaes.innerHTML = "服務(wù)端發(fā)生錯誤，數(shù)據(jù)添加失?。?;
return;
}
else{
msgaes.innerHTML = "該實例供學習使用．請不要惡意輸入．謝謝！";
}
}
}
}
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");//注意向服務(wù)端提交數(shù)據(jù)，必須設(shè)置該頭．否則服務(wù)端會接收不到
ajax.send(param);//注意send方法向服務(wù)端提交param變量中的內(nèi)容．
}
/script>
a target="_blank">腳本之家+/a>
/body>
/html>

!--#include file="Conn.Asp"-->
%
'出自：http://Www.Web666.Net
'作者：康董
'如需轉(zhuǎn)載請務(wù)必保留以上信息
'定義一個變量，來保存xml數(shù)據(jù)
xml="?xml version='1.0' encoding='gb2312'?>body>"
action=Request.QueryString("action") '使用get方式接受一個action來判斷客戶端想要執(zhí)行什么操作
Select case action
case "read" '如果為read則執(zhí)行讀取數(shù)據(jù)的操作
Call Read
case "add" '如果為add則執(zhí)行添加數(shù)據(jù)
Call Add_Data
case "del" '如果為del則執(zhí)行刪除數(shù)據(jù)的操作
Call Del_Data
case else
xml = xml"msg>請求參數(shù)錯誤，請不要試圖非法操作！/msg>"
End Select
xml=xml"/body>"
Response.Clear
Response.ContentType="text/xml"
Response.CharSet="gb2312"
Response.write xml
Response.End


Sub Read '定義一個讀取數(shù)據(jù)的過程
Call OpenConn '打開數(shù)據(jù)庫鏈接
Sql = "Select top 10 * From del_table order by id desc" '打開數(shù)據(jù)庫中名字為del_table的表
Set Rs = Conn.Execute(Sql) '執(zhí)行Sql語句，并將sql的索引賦值給rs變量

While Not Rs.Eof '如果表中有數(shù)據(jù)．則一直循環(huán)讀取
xml = xml"list>" '每讀取一條數(shù)據(jù)則創(chuàng)建一個list標簽
xml = xml"id>"Rs("id")"/id>" 'id字段內(nèi)容
xml = xml"content>"Rs("content")"/content>" 'content字段內(nèi)容
xml = xml"/list>" '每讀完一條數(shù)據(jù)，就閉合list標簽
Rs.MoveNext '執(zhí)行下一條數(shù)據(jù)的讀取
Wend '如果數(shù)據(jù)庫中沒有了數(shù)據(jù)．則結(jié)束循環(huán)
Close_Conn '關(guān)閉數(shù)據(jù)庫鏈接
End Sub

Sub Add_Data '添加數(shù)據(jù)過程
On Error Resume Next '如果發(fā)生錯誤繼續(xù)執(zhí)行程序
OpenConn '打開數(shù)據(jù)庫鏈接

str = Trim(Request.Form("str")) '接收客戶端傳過來的str內(nèi)容
If str = "" Then
xml = xml"msg>3/msg>" '如果提交的內(nèi)容為空．返回3
Exit Sub '退出過程
End If

Sql = "Insert Into del_table (content) values ('"str"')"
Conn.Execute(Sql) '執(zhí)行添加數(shù)據(jù)
If Err.Number = 0 Then '判斷是否有錯誤發(fā)生，
xml = xml"msg>0/msg>" '如果沒有錯誤發(fā)生，則證明數(shù)據(jù)已經(jīng)成功．返回0
Else
xml = xml"msg>1/msg>" '如果發(fā)生錯誤．則證明有錯誤發(fā)生．數(shù)據(jù)很可能添加失敗
End If
Close_Conn
End Sub

Sub Del_Data '刪除數(shù)據(jù)過程
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
%>