时间：2021-07-01 10:21:17 帮助过：33人阅读
输出的xml．add_del_data.asp?action=read．从服务端传回的xml数据里获取所有的list标签以后．我们先使用getElementById方法获取到了存放数据的表格．然后循环遍历这些list 标签．每个list代表一条数据．每个list内包含着2个子元素．第１个子元素内存储着该条数据的id值，第２个子元素内存储着该条数据的文本内容．好，我们来看下Read()函数中for循环里的语句：
<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="//www.gxlcms.com" 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格式数据技术．我在前几篇都有讲解．你可以使用php，.net，Jsp轻松模拟出来．
<!--#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