时间：2021-07-01 10:21:17 帮助过：33人阅读
输出的xml．add_del_data.asp?action=read．从服务端传回的xml数据里获取所有的list标签以后．我们先使用getElementById方法获取到了存放数据的表格．然后循环遍历这些list 标签．每个list代表一条数据．每个list内包含着2个子元素．第１个子元素内存储着该条数据的id值，第２个子元素内存储着该条数据的文本内容．好，我们来看下Read()函数中for循环里的语句：
- <br><html> <br><head> <br><title>ajax无刷新添加与删除数据</title> <br><style> <br>body{ <br>font-size:12px; <br>} <br>table{ <br>border-collapse:collapse; <br><br>} <br></style> <br></head> <br><body> <br>为显示更流畅，我们只读取数据库内最新的10条数据．由于在线测试人数多．都在操作一个数据库．可能会出现并发情况！ <br><hr/> <br>输入内容：<input id="str" type="input" /> <input type="button" value="确定添加" onclick="add_Post()"/> <br><span id="msg" style="color:red"></span> <br><table border="1"><!--该表格用来显示数据内容--> <br><tbody id="a"></tbody> <br></table> <br><span style="color:red">操作提示：请用鼠标单击你想要删除的数据．然后点击删除按扭！</span> <br><input id="hid_id" type="hidden" /> <br><input type="button" value="删除数据" onclick="del_Data()" /> <br><script type="text/javascript"> <br>function ajax_xmlhttp(){ <br>//在IE中创建xmlhttpRequest,适用于IE5.0以上所有版本 <br>var msXmlhttp = new Array("Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0","Msxml2.XMLHTTP","Microsoft.XMLHTTP"); <br>for(var i=0; i<msXmlhttp.length; i++){ <br>try <br>{ <br>_xmlhttp=new ActiveXObject(msXmlhttp[i]); <br>} <br>catch(e) <br>{ <br>_xmlhttp=null; <br>} <br>} //循环创建基于IE浏览器的xmlhttp.结束 <br>//如果非IE浏览器，则创建基于FireFox等浏览器的xmlhttpRequest <br>if(!_xmlhttp && typeof XMLHttpRequest != "undefined") <br>{ <br>_xmlhttp=new XMLHttpRequest(); <br>} <br>return _xmlhttp; <br>} <br><br>//读取数据函数 <br>function Read(){ <br>var ajax = ajax_xmlhttp(); //将xmlhttprequest对象赋值给一个变量． <br>ajax.open("post","Add_Del_Data.asp?action=read",true);//设置请求方式，请求的网页，url的action参数为read，异步请求 <br>ajax.onreadystatechange = function(){//你也可以这里指定一个已经写好的函数名称 <br>if(ajax.readyState == 4){//数据返回成功 <br>if(ajax.status == 200){//http请求状态码返回ok <br>var xmlData = ajax.responseXML;//以xml格式接收返回的数据，并保存在xmlData变量里 <br>var list = xmlData.getElementsByTagName("list");//在返回的数据里，获取所有list标签 <br>if(list.length!=0){ <br>var t = document.getElementById("a");//获取展示数据的表格 <br>while(t.rows.length!=0){ //在读取数据时如果表格已存行．一律删除 <br>t.removeChild(t.rows[0]); <br>} <br>for(var i=0;i<list.length;i++){ <br>var tr = t.insertRow(t.rows.length);//有几个list就为表格增加几行． <br>tr.setAttribute("id",list[i].childNodes[0].firstChild.nodeValue); <br>tr.onclick = function(e){add_Event(e)}; <br>var td = tr.insertCell(0); <br>td.innerHTML = list[i].childNodes[1].firstChild.nodeValue; <br>} <br>} <br>} <br>} <br>} <br>ajax.send(null);//提交请求，参数为null <br>} <br><br>window.load = Read(); <br><br>function add_Event(e){ <br>e = e || window.event; <br>var elem = e.target || e.srcElement; <br>if(elem.tagName == "TD"){ <br>elem = elem.parentNode; <br>} <br>var table = elem.parentNode; <br>for(var i=0;i<table.rows.length;i++){ <br>table.rows[i].style.background=""; <br>} <br>elem.style.background="#999ccc"; <br>document.getElementById("hid_id").value = elem.id; <br>} <br><br>//删除数据函数 <br>function del_Data(){ <br>var mesage = document.getElementById("msg");//获取显示操作信息的span <br>mesage.innerHTML="正在删除请稍候......"; <br>var table = document.getElementById("a");//获取要显示数据的表格 <br>if(table.rows.length == 0){ <br>mesage.innerHTML = "表格内没有数据可供删除！"; <br>return; <br>} <br>var id = document.getElementById("hid_id"); <br>if(id.value.length == 0){ <br>mesage.innerHTML = "您还没有选择数据！"; <br>return; <br>} <br>var ajax = ajax_xmlhttp();//定义xmlhttprequest对象 <br>ajax.open("post","Add_Del_data.asp?action=del",true);//设置请求方式，请求文件，异步请求 <br><br>var param = "id="+escape(id.value);//获取要删除数据的id <br><br>ajax.onreadystatechange = function(){ <br>if(ajax.readyState==4){ <br>if(ajax.status==200){ <br>var xml = ajax.responseXML; <br>var msg = xml.getElementsByTagName("msg")[0].firstChild.nodeValue; <br>if(msg == 0){ <br>mesage.innerHTML = "成功删除数据！"; <br>var tr = document.getElementById(id.value);//获取当前选择的行 <br>tr.parentNode.removeChild(tr);//引用该行的父元素．然后删除该行． <br>id.value="";//删除完成清空文本框里的值， <br>} <br>if(msg == 1){ <br>mesage.innerHTML = "服务端发生错误，删除失败！"; <br>} <br>} <br>} <br>} <br>ajax.setRequestHeader("content-type","application/x-www-form-urlencoded"); <br>ajax.send(param); <br>} <br><br>//提交数据函数 <br>function add_Post(){ <br>var msgaes = document.getElementById("msg");//用来显示提示信息 <br>var str = document.getElementById("str");//接收输入的内容 <br>if(str.value.length == 0){ <br>msgaes.innerHTML = "不接受空内容！" <br>return; <br>} <br>msgaes.innerHTML = "正在提交"; <br>var ajax = ajax_xmlhttp();//定义xmlhttprequest对象 <br>ajax.open("post","Add_Del_data.asp?action=add",true);//设置请求方式，请求文件，异步请求 <br><br>var param = "str="+escape(str.value);//获取你输入的内容,注意这里的str,服务端将接收str中的值 <br>ajax.onreadystatechange = function(){ <br>if(ajax.readyState==4){ <br>if(ajax.status==200){ <br>var msg = ajax.responseXML.getElementsByTagName("msg");//获取服务端返回的msg标签 <br>if(msg[0].firstChild.nodeValue == 0){ <br>var max_num = ajax.responseXML.getElementsByTagName("count")[0].firstChild.nodeValue; <br><br>var t = document.getElementById("a"); <br>var tr = t.insertRow(0); <br>tr.setAttribute("id",max_num); <br>tr.onclick = function(e){add_Event(e)}; <br>var td = tr.insertCell(0); <br>td.innerHTML = str.value; <br>str.value = ""; <br>msgaes.innerHTML = "添加完成"; <br>} <br>else if(msg[0].firstChild.nodeValue == 3){ <br>msgaes.innerHTML = "不接受空的内容"; <br>return; <br>} <br>else if(msg[0].firstChild.nodeValue == 1){ <br>msgaes.innerHTML = "服务端发生错误，数据添加失败！"; <br>return; <br>} <br>else{ <br>msgaes.innerHTML = "该实例供学习使用．请不要恶意输入．谢谢！"; <br>} <br>} <br>} <br>} <br>ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");//注意向服务端提交数据，必须设置该头．否则服务端会接收不到 <br>ajax.send(param);//注意send方法向服务端提交param变量中的内容． <br>} <br></script> <br><a href="//www.gxlcms.com" target="_blank">脚本之家+</a> <br></body> <br></html> <br> <br>怎么样效果是不是很酷？上面的文本框里是前台的html源码．我们先来讲一下我们在前端干了什么．从body标签开始讲起． <br><br><br>一段友情提示的文字．告诉你会出现些什么情况！ <br>添加数据的文本框和按扭！用来向服务端数据库写入数据内容． <br>一个span标签．ID为msg，用来显示你当前操作的信息 <br>一个表格．表格内有tbody元素，id为a．用来显示读取到的数据．你可以在表格内选择要删除的数据． <br>一个隐藏的输入框．当你选择数据时．会把该数据的id值放到输入框里．删除时引用这个值．提交给服务端 <br>删除数据按扭．定义了一个onclick单击事件．del_Data()函数．向服务发送删除指令 <br>下面进入script脚本部份．script里面有5个自定义函数．分别是：ajax_xmlhttp()，Read()，add_Event()，del_Data()，add_Post()．我们来一一讲解函数的作用． <br><br>1、ajax_xmlhttp();创建一个可用的XMLHTTPRequest对象，如果你还不知道什么是XMLHTTPRequest，请参阅：XMLHTTPRequest <br>2、Read();读取数据函数．前几篇教程中都有讲过ajax读取数据．我只讲今天读取过程中的重点，先看下服务端网页
输出xml格式数据技术．我在前几篇都有讲解．你可以使用php，.net，Jsp轻松模拟出来．
- <br><!--#include file="Conn.Asp"--> <br><% <br>'出自：http://Www.Web666.Net <br>'作者：康董 <br>'如需转载请务必保留以上信息 <br>'定义一个变量，来保存xml数据 <br>xml="<?xml version='1.0' encoding='gb2312'?><body>" <br>action=Request.QueryString("action") '使用get方式接受一个action来判断客户端想要执行什么操作 <br>Select case action <br>case "read" '如果为read则执行读取数据的操作 <br>Call Read <br>case "add" '如果为add则执行添加数据 <br>Call Add_Data <br>case "del" '如果为del则执行删除数据的操作 <br>Call Del_Data <br>case else <br>xml = xml&"<msg>请求参数错误，请不要试图非法操作！</msg>" <br>End Select <br>xml=xml&"</body>" <br>Response.Clear <br>Response.ContentType="text/xml" <br>Response.CharSet="gb2312" <br>Response.write xml <br>Response.End <br><br><br>Sub Read '定义一个读取数据的过程 <br>Call OpenConn '打开数据库链接 <br>Sql = "Select top 10 * From del_table order by id desc" '打开数据库中名字为del_table的表 <br>Set Rs = Conn.Execute(Sql) '执行Sql语句，并将sql的索引赋值给rs变量 <br><br>While Not Rs.Eof '如果表中有数据．则一直循环读取 <br>xml = xml&"<list>" '每读取一条数据则创建一个list标签 <br>xml = xml&"<id>"&Rs("id")&"</id>" 'id字段内容 <br>xml = xml&"<content>"&Rs("content")&"</content>" 'content字段内容 <br>xml = xml&"</list>" '每读完一条数据，就闭合list标签 <br>Rs.MoveNext '执行下一条数据的读取 <br>Wend '如果数据库中没有了数据．则结束循环 <br>Close_Conn '关闭数据库链接 <br>End Sub <br><br>Sub Add_Data '添加数据过程 <br>On Error Resume Next '如果发生错误继续执行程序 <br>OpenConn '打开数据库链接 <br><br>str = Trim(Request.Form("str")) '接收客户端传过来的str内容 <br>If str = "" Then <br>xml = xml&"<msg>3</msg>" '如果提交的内容为空．返回3 <br>Exit Sub '退出过程 <br>End If <br><br>Sql = "Insert Into del_table (content) values ('"&str&"')" <br>Conn.Execute(Sql) '执行添加数据 <br>If Err.Number = 0 Then '判断是否有错误发生， <br>xml = xml&"<msg>0</msg>" '如果没有错误发生，则证明数据已经成功．返回0 <br>Else <br>xml = xml&"<msg>1</msg>" '如果发生错误．则证明有错误发生．数据很可能添加失败 <br>End If <br>Close_Conn <br>End Sub <br><br>Sub Del_Data '删除数据过程 <br>On Error Resume Next <br>OpenConn <br>id = Request("id") <br>Sql = "Delete From del_table where id="&id <br>Conn.Execute(sql) <br>If Err.Number = 0 Then <br>xml = xml&"<msg>0</msg>" <br>Else <br>xml = xml&"<msg>1</msg>" <br>End If <br>Close_Conn <br>End Sub <br>%> <br> <br>我在服务端使用的是Asp