Ajax添加數(shù)據(jù)即時(shí)顯示信息篇
2024-09-01 08:29:14
供稿：網(wǎng)友
今天我們要學(xué)習(xí)的內(nèi)容是：使用ajax向服務(wù)端的數(shù)據(jù)庫(kù)添加數(shù)據(jù)，然后在網(wǎng)頁(yè)不刷新情況下即時(shí)顯示被添加的數(shù)據(jù)．需要說(shuō)明的是．本次ajax實(shí)例教程與前3篇有2點(diǎn)大不同之處．
1：我們要對(duì)數(shù)據(jù)庫(kù)進(jìn)行操作．2：更換請(qǐng)求的服務(wù)端網(wǎng)頁(yè)．不再使用Web_ajax.Asp文件．新的請(qǐng)求網(wǎng)頁(yè)是：Add_Data.Asp．看后綴大家就應(yīng)該能明白．我在服務(wù)端采用的技術(shù)是Asp．都說(shuō)Asp過(guò)時(shí)了．可他的簡(jiǎn)單易用，易學(xué)深深地吸引著我！當(dāng)然也你可以使用php, .net,或jsp輕松的模擬該Asp文件的源碼．我會(huì)在該次教程最后提供該Asp的源碼給大家！
下面我們先來(lái)看下前端的代碼．和本次的ajax實(shí)例效果演示
代碼如下:
<html>
<head>
<title>ajax無(wú)刷新添加數(shù)據(jù)</title>
</head>
<body>
輸入內(nèi)容：<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中創(chuàng)建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;
}
} //循環(huán)創(chuàng)建基于IE瀏覽器的xmlhttp.結(jié)束
//如果非IE瀏覽器，則創(chuàng)建基于FireFox等瀏覽器的xmlhttpRequest
if(!_xmlhttp && typeof XMLHttpRequest != "undefined")
{
_xmlhttp=new XMLHttpRequest();
}
return _xmlhttp;
}
//讀取數(shù)據(jù)函數(shù)
function Post(){
var ajax = ajax_xmlhttp(); //將xmlhttprequest對(duì)象賦值給一個(gè)變量．
ajax.open("post","add_data.asp?action=read",true);//設(shè)置請(qǐng)求方式，請(qǐng)求文件，異步請(qǐng)求
ajax.onreadystatechange = function(){//你也可以這里指定一個(gè)已經(jīng)寫(xiě)好的函數(shù)名稱(chēng)
if(ajax.readyState==4){//數(shù)據(jù)返回成功
if(ajax.status==200){//http請(qǐng)求狀態(tài)碼返回ok
var xmlData = ajax.responseXML;
var list = xmlData.getElementsByTagName("list");//獲取所有的list標(biāo)簽
if(list.length!=0){
var t = document.createElement("table");
t.setAttribute("border","1");
t.setAttribute("id","abc"); //為表格設(shè)置一個(gè)id屬性，值為abc
var thead = t.createTHead();
var _tr = thead.insertRow(0) //為thead創(chuàng)建一行
var _td = _tr.insertCell(0);
_td.innerHTML = "內(nèi)容";
document.body.appendChild(t);
for(var i=0;i<list[0].childNodes.length;i++){ //遍歷所有的list,有幾個(gè)list的便為表格添加幾行．
var tr = t.insertRow(0);
var td = tr.insertCell(0);
td.innerHTML = list[0].childNodes[i].firstChild.nodeValue;
}
}
}
}
}
ajax.send(null);
}
//提交數(shù)據(jù)函數(shù)
function add_Post(){
var msgaes = document.getElementById("msg");//用來(lái)顯示提示信息
