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.jb51.net" 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．add_del_data.asp?action=read．从服务端传回的xml数据里获取所有的list标签以后．我们先使用getElementById方法获取到了存放数据的表格．然后循环遍历这些list 标签．每个list代表一条数据．每个list内包含着2个子元素．第１个子元素内存储着该条数据的id值，第２个子元素内存储着该条数据的文本内容．好，我们来看下Read()函数中for循环里的语句：
