Ajax修改數(shù)據(jù)即時(shí)顯示篇實(shí)現(xiàn)代碼

html>
head>
title>ajax修改數(shù)據(jù)/title>
style>
body{
font-size:12px;
}
/style>
/head>
body>
p>同時(shí)在線測(cè)試的人很多，有時(shí)可能會(huì)出現(xiàn)并發(fā)修改現(xiàn)象．/p>
hr/>
table border="1">
thead>tr>td>數(shù)據(jù)編號(hào)/td>td>數(shù)據(jù)內(nèi)容/td>/tr>/thead>
tbody id="a">!--用于存放內(nèi)容的tbody-->
/tbody>
/table>

輸入編號(hào)：input id="data_id" type="text" />br/>
修改內(nèi)容：input id="data_content" type="text" />br/>

input type="button" value="確定修改" onclick="Edit_Data()"/>
span id="msgaes" style="color:red">/span>
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對(duì)象賦值給一個(gè)變量．
ajax.open("post","Edit_Data.asp?action=read",true);//設(shè)置請(qǐng)求方式，請(qǐng)求的網(wǎng)頁，url的action參數(shù)為read，異步請(qǐng)求
ajax.onreadystatechange = function(){//你也可以這里指定一個(gè)已經(jīng)寫好的函數(shù)名稱
if(ajax.readyState == 4){//數(shù)據(jù)返回成功
if(ajax.status == 200){//http請(qǐng)求狀態(tài)碼返回ok
var xmlData = ajax.responseXML;//以xml格式接收返回的數(shù)據(jù)，并保存在xmlData變量里
var list = xmlData.getElementsByTagName("list");//在返回的數(shù)據(jù)里，獲取所有l(wèi)ist標(biāo)簽
if(list.length!=0){
var t = document.getElementById("a");//獲取展示數(shù)據(jù)的表格
for(var i=0;ilist.length;i++){
var tr = t.insertRow();//有幾個(gè)list就為表格增加幾行．
for(var k=0;klist[i].childNodes.length;k++){ //遍歷每個(gè)list中的子元素
var td = tr.insertCell();//每個(gè)list中有幾個(gè)子元素，便為一行增加幾列
td.innerHTML = list[i].childNodes[k].firstChild.nodeValue;//在單元格內(nèi)寫入第i個(gè)list的第k個(gè)子元素中的文本內(nèi)容
}
}
}
}
}
}
ajax.send(null);//提交請(qǐng)求，參數(shù)為null
}
window.load = Read();

//修改數(shù)據(jù)的函數(shù)
function Edit_Data(){
var msgaes = document.getElementById("msgaes");//用來顯示一些當(dāng)前操作信息
var id = document.getElementById("data_id");//獲取要修改的數(shù)據(jù)編號(hào)
var content = document.getElementById("data_content");//獲取修改后的內(nèi)容
if(id.value.length == 0 || content.value.length == 0){
msgaes.innerHTML = "編號(hào)或內(nèi)容不許為空!";
return;
}
//下面這行將id和content的值賦給param變量，然后用send方法提交param
var param = "id="+escape(id.value)+ "content="+escape(content.value);
var ajax = ajax_xmlhttp();
ajax.open("post","Edit_Data.asp?action=edit",true);
ajax.onreadystatechange = function(){//
if(ajax.readyState == 4){
if(ajax.status == 200){
var xmlData = ajax.responseXML;

var msg = xmlData.getElementsByTagName("msg");
if(msg.length!=0){
switch (msg[0].firstChild.nodeValue){//判斷msg的值
case "0": msgaes.innerHTML = "修改數(shù)據(jù)成功！";
var a = document.getElementById("a");
for(var i=0;ia.rows.length;i++){//遍歷表格的每一列．這個(gè)方法有點(diǎn)笨
for(var k=0;ka.rows[i].cells.length;k++){
if(a.rows[i].cells[0].innerHTML == id.value){
a.rows[i].cells[1].innerHTML = content.value;
id.value="";
content.value="";
return;
}

}
}
break;
case "1": msgaes.innerHTML = "服務(wù)端寫入數(shù)據(jù)時(shí)發(fā)生錯(cuò)誤！";
break;
case "3": msgaes.innerHTML = "請(qǐng)正確填寫要修改的數(shù)據(jù)編號(hào)和修改內(nèi)容！";
break;
case "4": msgaes.innerHTML = "數(shù)據(jù)庫中不存在你輸入的數(shù)據(jù)編號(hào)，請(qǐng)重新輸入！";
break;
default: msgaes.innerHTML = "發(fā)生未知錯(cuò)誤!請(qǐng)聯(lián)系作者：QQ30458885";
break;
}
}
}
}
}
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");//
ajax.send(param);
}
/script>
/body>
/html>

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

Sub Read '定義一個(gè)讀取數(shù)據(jù)的過程
Call OpenConn '打開數(shù)據(jù)庫鏈接
Sql = "Select * From edit_table" '打開數(shù)據(jù)庫中名字為web_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)建一個(gè)list標(biāo)簽
xml = xml"id>"Rs("id")"/id>" 'id字段內(nèi)容
xml = xml"content>"Rs("content")"/content>" 'content字段內(nèi)容
xml = xml"/list>" '每讀完一條數(shù)據(jù)，就閉合list標(biāo)簽
Rs.MoveNext '執(zhí)行下一條數(shù)據(jù)的讀取
Wend '如果數(shù)據(jù)庫中沒有了數(shù)據(jù)．則結(jié)束循環(huán)
Close_Conn '關(guān)閉數(shù)據(jù)庫鏈接
End Sub

Sub Edit_Data
On Error Resume Next '忽略錯(cuò)誤
OpenConn '打開數(shù)據(jù)庫鏈接
id = Trim(Request.Form("id")) '接收客戶端傳過來的id數(shù)據(jù)編號(hào)
Sql = "Select * From edit_table Where id="id
Set Rs=Conn.Execute(Sql)
If Rs.Eof then
xml = xml"msg>4/msg>"
Exit Sub
End If
content = Trim(Request.Form("content")) '接收修改后的內(nèi)容
If id = "" Or content = "" Then '如果id或content有一項(xiàng)為空，返回3
xml = xml"msg>3/msg>"
Exit Sub '退出過程
End If
Sql = "Update edit_table Set content='"content"' Where id="id
Conn.Execute(Sql) '執(zhí)行修改數(shù)據(jù)的sql語句

If Err.Number = 0 Then '如果沒有錯(cuò)誤發(fā)生
xml = xml"msg>0/msg>" '添加一個(gè)msg標(biāo)簽，內(nèi)容為0

Exit Sub '退出過程
Else '如果有錯(cuò)誤發(fā)生
xml = xml"msg>1/msg>" '如果有錯(cuò)誤發(fā)生，添加msg標(biāo)簽，內(nèi)容為1
Exit Sub '退出過程
End If
End Sub
%>