Ajax添加数据即时显示信息篇
网学网为广大网友收集整理了，Ajax添加数据即时显示信息篇，希望对大家有所帮助！
今天我们要学习的内容是：使用ajax向服务端的数据库添加数据，然后在网页不刷新情况下即时显示被添加的数据．需要说明的是．本次ajax实例教程与前3篇有2点大不同之处．1：我们要对数据库进行操作．2：更换请求的服务端网页．不再使用Web_ajax.Asp文件．新的请求网页是：Add_Data.Asp．看后缀大家就应该能明白．我在服务端采用的技术是Asp．都说Asp过时了．可他的简单易用，易学深深地吸引着我！当然也你可以使用php, .net,或jsp轻松的模拟该Asp文件的源码．我会在该次教程最后提供该asp的源码给大家！
下面我们先来看下前端的代码．和本次的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; 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 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;i<list[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");//获取服