Ajax添加数据与删除篇实现代码
网学网Ajax编辑为广大网友搜集整理了：Ajax添加数据与删除篇实现代码绩等信息，祝愿广大网友取得需要的信息，参考学习。
如果你真的把前几篇掌握了．实现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就为表格增加几行．
t