Ajax添加数据即时显示信息篇

html>
head>
title>ajax无刷新添加数据/title>
/head>
body>
输入内容：input id="str" type="input" /> input type="button" value="确定添加" onclick="add_Post()"/>
span id="msg" style="color:red">/span>
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; imsXmlhttp.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 Post(){
var ajax = ajax_xmlhttp(); //将xmlhttprequest对象赋值给一个变量．
ajax.open("post","add_data.asp?action=read",true);//设置请求方式，请求文件，异步请求
ajax.onreadystatechange = function(){//你也可以这里指定一个已经写好的函数名称
if(ajax.readyState==4){//数据返回成功
if(ajax.status==200){//http请求状态码返回ok
var xmlData = ajax.responseXML;
var list = xmlData.getElementsByTagName("list");//获取所有的list标签
if(list.length!=0){
var t = document.createElement("table");
t.setAttribute("border","1");
t.setAttribute("id","abc"); //为表格设置一个id属性，值为abc
var thead = t.createTHead();
var _tr = thead.insertRow(0) //为thead创建一行
var _td = _tr.insertCell(0);
_td.innerHTML = "内容";
document.body.appendChild(t);
for(var i=0;ilist[0].childNodes.length;i++){ //遍历所有的list,有几个list的便为表格添加几行．
var tr = t.insertRow(0);
var td = tr.insertCell(0);
td.innerHTML = list[0].childNodes[i].firstChild.nodeValue;
}
}
}
}
}
ajax.send(null);
}

//提交数据函数
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_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 t = document.getElementById("abc");
var tr = t.insertRow(0);
var td = tr.insertCell();
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变量中的内容．
}
window.load = Post();//只有在打开网页或刷新网页以后才会执行读取数据函数
/script>
/body>
/html>

!--#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 else
xml = xml"msg>请求参数错误，请不要试图非法操作！/msg>"
End Select

xml=xml"/body>"
Response.Clear
Response.ContentType="text/xml"
Response.CharSet="gb2312"
Response.write xml '注意这句啊．上面的那些判断执行过程．其目的就是获取一个新的xml变量内容．然后在这里输出这个xml
Response.End

Sub Read '定义一个读取数据的过程
Call OpenConn '打开数据库链接
Sql = "Select * From web_table" '打开数据库中名字为web_table的表
Set Rs = Conn.Execute(Sql) '执行Sql语句，并将sql的索引赋值给rs变量
xml = xml"list>" '没开始读取之前先建立一个list标签．将所有数据都包含在该标签下
While Not Rs.Eof '如果表中有数据．则一直循环读取
xml = xml"li>"Rs("web")"/li>"
Rs.MoveNext '执行下一条数据的读取
Wend '如果数据库中没有了数据．则结束循环
xml = xml"/list>" '数据读完闭合list标签
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 web_table (web) values ('"str"')"
Conn.Execute(Sql) '执行添加数据
If Err.Number = 0 Then '判断是否有错误发生，
xml = xml"msg>0/msg>" '如果没有错误发生，则证明数据已经成功．返回0
Exit Sub
Else
xml = xml"msg>1/msg>" '如果发生错误．则证明有错误发生．数据很可能添加失败
Exit Sub
End If
End Sub
%>