Ajax添加數據即時顯示信息篇
2024-09-01 08:29:14
供稿：網友
今天我們要學習的內容是：使用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");//用來顯示提示信息
