欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

Ajax如何添加數(shù)據(jù)即時(shí)顯示信息

這篇文章主要介紹了Ajax如何添加數(shù)據(jù)即時(shí)顯示信息，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的納雍網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

下面我們先來看下前端的代碼 

<html>
<head>
<title>ajax無刷新添加數(shù)據(jù)</title>
</head>
<body>
輸入內(nèi)容：<input id="str" type="input" /> <input type="button" value="確定添加" onclick="add_Post()"/>
<span id="msg" ></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對象賦值給一個(gè)變量．
ajax.open("post","add_data.asp?action=read",true);//設(shè)置請求方式，請求文件，異步請求
ajax.onreadystatechange = function(){//你也可以這里指定一個(gè)已經(jīng)寫好的函數(shù)名稱
if(ajax.readyState==4){//數(shù)據(jù)返回成功
if(ajax.status==200){//http請求狀態(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");//用來顯示提示信息
var str = document.getElementById("str");//接收輸入的內(nèi)容
if(str.value.length == 0){
msgaes.innerHTML = "不接受空內(nèi)容！"
return;
}
msgaes.innerHTML = "正在提交";
var ajax = ajax_xmlhttp();//定義xmlhttprequest對象
ajax.open("post","add_data.asp?action=add",true);//設(shè)置請求方式，請求文件，異步請求

var param = "str="+escape(str.value);//獲取你輸入的內(nèi)容,注意這里的str,服務(wù)端將接收str中的值
ajax.onreadystatechange = function(){
if(ajax.readyState==4){
if(ajax.status==200){
var msg = ajax.responseXML.getElementsByTagName("msg");//獲取服務(wù)端返回的msg標(biāo)簽
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 = "不接受空的內(nèi)容";
return;
}
else if(msg[0].firstChild.nodeValue == 1){
msgaes.innerHTML = "服務(wù)端發(fā)生了錯(cuò)誤，數(shù)據(jù)添加失敗!";
return;
}
else{
msgaes.innerHTML = "該實(shí)例供學(xué)習(xí)使用．請不要惡意輸入．謝謝！";
}
}
}
}
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");//注意向服務(wù)端提交數(shù)據(jù)，必須設(shè)置該頭．否則服務(wù)端會(huì)接收不到
ajax.send(param);//注意send方法向服務(wù)端提交param變量中的內(nèi)容．
}
window.load = Post();//只有在打開網(wǎng)頁或刷新網(wǎng)頁以后才會(huì)執(zhí)行讀取數(shù)據(jù)函數(shù)
</script>
</body>
</html>



點(diǎn)擊上面的查看實(shí)例效果，就是我們今天要學(xué)習(xí)的目的．上面的代碼只是前端的html代碼．在代碼里有3個(gè)自定義函數(shù)．


1、ajax_xmlhttp();該函數(shù)我們在前面的教程已經(jīng)講過，是用來創(chuàng)建一個(gè)可用性的XMLHTTPRequest對象，如果你還不了解，請參閱：ajax開始準(zhǔn)備篇

2、Post();該函數(shù)還是用來讀取數(shù)據(jù)．我們在本章教程中不再解釋ajax是如何讀取數(shù)據(jù)的．你可以參閱：ajax初試讀取數(shù)據(jù)篇與ajax讀取數(shù)據(jù)到表格 不過跟前２篇不同的是．該P(yáng)ost函數(shù)不是在點(diǎn)擊 按扭時(shí)被觸發(fā)．而是在你第一次打開網(wǎng)頁或刷新頁面的時(shí)候才會(huì)執(zhí)行該函數(shù)．其目的是用來讀取數(shù)據(jù)庫中已存在的數(shù)據(jù)．在數(shù)據(jù)添加成功以后．并沒有運(yùn)行該函數(shù)．其中的秘密下面的解釋中我會(huì)告訴你！另外你再看一下open方法中的設(shè)置．我們在請求的網(wǎng)址后面多了一個(gè)action=read,這個(gè)大家應(yīng)該用過．在url后面的參數(shù)， 服務(wù)端可以接收該參數(shù)．在Asp中使用Request.QueryString來接收．Php中使用$get方法來接收．我們設(shè)置這個(gè)url的參數(shù)目的是想要告訴服務(wù)器．我們要執(zhí)行什么動(dòng)作．在Add_Data.Asp網(wǎng)頁中有兩個(gè)自定義過程，一個(gè)用來讀取數(shù)據(jù)，一個(gè)用來添加數(shù)據(jù)．這個(gè)action=read參數(shù)服務(wù)端接收以后．經(jīng)過判斷會(huì)執(zhí)行讀取數(shù)據(jù)的過程！

3、我們重點(diǎn)來講一下這個(gè)add_Post函數(shù)．函數(shù)剛開始便使用getElementById方法在網(wǎng)頁查找msg與str．msg是用來顯示一些當(dāng)前的操作信息．str是用來獲取你輸入的內(nèi)容．然后判斷你是否在str的文本框中輸入了內(nèi)容．如果為空則退出函數(shù)．
再看open方法的設(shè)置．請求的網(wǎng)頁url后面的參數(shù)是action=add，服務(wù)端網(wǎng)頁接收action這個(gè)參數(shù)．經(jīng)過判斷如果值是add，則執(zhí)行插入數(shù)據(jù)的過程．

var param = "str="+escape(str.value);將str文本框的內(nèi)容等于一個(gè)str，然后一并賦值給param變量．待會(huì)發(fā)送請求時(shí)．send會(huì)提交這個(gè)param變量中的內(nèi)容．escape的意思是對 String 對象編碼以便它們能在所有計(jì)算機(jī)上可讀，就是解碼你輸入的內(nèi)容．經(jīng)過測試有時(shí)候可以忽略，但有時(shí)候會(huì)出現(xiàn)亂碼．為保險(xiǎn)起見我們還是使用escape

我們先不講readystatechange指定的程序．看下面：
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");這行的意思是．我要向服務(wù)端提交表單內(nèi)容．當(dāng)你的請求方式是post，并且有數(shù)據(jù)向服務(wù)端提交時(shí)．必須設(shè)置setRequestHeader．如果你使用的請求方式是get或者沒有數(shù)據(jù)要提交則可以忽略該句．

ajax.send(param);發(fā)送請求．并在send的參數(shù)里指定要提交param變量中的內(nèi)容．你可以alert一下param，會(huì)彈出str="你輸入的內(nèi)容"，然后我們在服務(wù)端的網(wǎng)頁接收這個(gè)str，便可以獲取str中的內(nèi)容了．也就是你在文本框中輸入的． 講到這里應(yīng)該是時(shí)候看一下這個(gè)被請求的服務(wù)端網(wǎng)頁了．看看他到底在服務(wù)端干了些什么．請看：

復(fù)制代碼 代碼如下:


<!--#include file="Conn.Asp"-->
<%
'出自：http://Www.Web666.Net
'作者：康董
'如需轉(zhuǎn)載請務(wù)必保留以上信息
'定義一個(gè)變量，來保存xml數(shù)據(jù)
xml="<?xml version='1.0' encoding='gb2312'?><body>"
action=Request.QueryString("action") '使用get方式接受一個(gè)action來判斷客戶端想要執(zhí)行什么操作
Select case action
case "read" '如果為read則執(zhí)行讀取數(shù)據(jù)的操作
Call Read
case "add" '如果為add則執(zhí)行添加數(shù)據(jù)的操作
Call Add_Data
case else
xml = xml&"<msg>請求參數(shù)錯(cuò)誤，請不要試圖非法操作！</msg>"
End Select

xml=xml&"</body>"
Response.Clear
Response.ContentType="text/xml"
Response.CharSet="gb2312"
Response.write xml '注意這句?。厦娴哪切┡袛鄨?zhí)行過程．其目的就是獲取一個(gè)新的xml變量內(nèi)容．然后在這里輸出這個(gè)xml
Response.End

Sub Read '定義一個(gè)讀取數(shù)據(jù)的過程
Call OpenConn '打開數(shù)據(jù)庫鏈接
Sql = "Select * From web_table" '打開數(shù)據(jù)庫中名字為web_table的表
Set Rs = Conn.Execute(Sql) '執(zhí)行Sql語句，并將sql的索引賦值給rs變量
xml = xml&"<list>" '沒開始讀取之前先建立一個(gè)list標(biāo)簽．將所有數(shù)據(jù)都包含在該標(biāo)簽下
While Not Rs.Eof '如果表中有數(shù)據(jù)．則一直循環(huán)讀取
xml = xml&"<li>"&Rs("web")&"</li>"
Rs.MoveNext '執(zhí)行下一條數(shù)據(jù)的讀取
Wend '如果數(shù)據(jù)庫中沒有了數(shù)據(jù)．則結(jié)束循環(huán)
xml = xml&"</list>" '數(shù)據(jù)讀完閉合list標(biāo)簽
Close_Conn '關(guān)閉數(shù)據(jù)庫鏈接
End Sub

Sub Add_Data '添加數(shù)據(jù)過程
On Error Resume Next '如果發(fā)生錯(cuò)誤繼續(xù)執(zhí)行程序
OpenConn '打開數(shù)據(jù)庫鏈接
str = Trim(Request.Form("str")) '接收客戶端傳過來的str內(nèi)容
If str = "" Then
xml = xml&"<msg>3</msg>" '如果提交的內(nèi)容為空．返回3
Exit Sub '退出過程
End If
Sql = "Insert Into web_table (web) values ('"&str&"')"
Conn.Execute(Sql) '執(zhí)行添加數(shù)據(jù)
If Err.Number = 0 Then '判斷是否有錯(cuò)誤發(fā)生，
xml = xml&"<msg>0</msg>" '如果沒有錯(cuò)誤發(fā)生，則證明數(shù)據(jù)已經(jīng)成功．返回0
Exit Sub
Else
xml = xml&"<msg>1</msg>" '如果發(fā)生錯(cuò)誤．則證明有錯(cuò)誤發(fā)生．?dāng)?shù)據(jù)很可能添加失敗
Exit Sub
End If
End Sub
%>


上面是你使用ajax請求的服務(wù)端網(wǎng)頁：Add_Data.Asp的源碼．現(xiàn)在使用Asp的應(yīng)該不多了吧？但我依然癡情于她．無論你用的服務(wù)端技術(shù)是Php，.Net，或者Jsp等．經(jīng)過我的解釋你應(yīng)該很容易的會(huì)模擬出這個(gè)源碼的功能．
1：include file="Conn.asp"在Asp里的作用是引入一個(gè)網(wǎng)頁．Conn.asp是我的數(shù)據(jù)庫鏈接文件．為安全起見．我就不暴露數(shù)據(jù)庫名稱了．你自己建個(gè)庫．隨便起個(gè)名進(jìn)行測試吧．
2：定義一個(gè)名字為xml變量．將xml格式的數(shù)據(jù)保存在這個(gè)變量中．使用Response.Write輸出xml變量中的內(nèi)容．
3：接收你在前端url傳過來的action參數(shù)．并判斷action的值．Select case不用解釋了吧．多支判斷．如果action的值是read,則執(zhí)行Read過程．如果是add則執(zhí)行Add_Data過程．如果兩者都不是則證明不是通過正常渠道進(jìn)行請求的． 向xml變量中再增加一個(gè)msg標(biāo)簽．輸出以后會(huì)給出顯示的內(nèi)容
4：Response.Clear清除緩存．
5：Response.ContentType="text/xml"定義輸出的文本格式．xml類型
6：Response.CharSet="gb2312"輸出編碼，中文編碼．
7：Response.write xml向客戶端輸出xml變量中的數(shù)據(jù)．該變量保存的是xml格式的數(shù)據(jù)．
8：Response.End停止一切輸出．
9：定義一個(gè) Read　過程．用來讀取數(shù)據(jù)庫test_table表中的web字段內(nèi)的數(shù)據(jù)．打開數(shù)據(jù)庫，sql語句．執(zhí)行sql．開始讀?。∵@些知識(shí)我就不講了．如果你還不會(huì)．我想你應(yīng)該去學(xué)習(xí)一下操作數(shù)據(jù)庫的知識(shí)！我重點(diǎn)講一下該Read過程的 意義．在讀取數(shù)據(jù)之前先為xml變量中增加了一個(gè)list的標(biāo)簽．然后將所有的數(shù)據(jù)都讀取到list標(biāo)簽內(nèi)，每條數(shù)據(jù)又被包含在了一個(gè)li標(biāo)簽內(nèi)．?dāng)?shù)取讀取完畢．閉合list標(biāo)簽．我想說的是，這個(gè)Read過程并沒有向客戶端輸出任何內(nèi)容． 他的工作就是將數(shù)據(jù)庫中的內(nèi)容以xml的格式讀取到那個(gè)xml變量中．當(dāng)客戶端action=add的時(shí)候．執(zhí)行Read過程．Read過程給出一個(gè)新的xml變量．Response.Write xml輸出這個(gè)變量到客戶端，客戶端接受到這個(gè)xml，我們在前端使用responseXML接收這個(gè)xml．然后顯示！明白嗎？不明白加我Q：30458885
10：我們再來講Add_Data這個(gè)過程．Add_Data的意義和Read是相同的．都是在執(zhí)行一系列操作以后向xml變量中賦值．Add_Data的作用是接受客戶端發(fā)送過來的數(shù)據(jù)．并將數(shù)據(jù)寫到數(shù)據(jù)庫內(nèi)．你仔細(xì)看下Add_Data中的程序邏輯．首先他會(huì)判斷你提交的數(shù)據(jù)是否為空．如果為空向xml變量中增加一個(gè)msg標(biāo)簽．內(nèi)容是3．然后退出Add_Data． 如果數(shù)據(jù)不為空．則向數(shù)據(jù)庫寫入該數(shù)據(jù)．然后判斷是否有錯(cuò)誤發(fā)生．如果沒有錯(cuò)誤也向xml變量中增加一個(gè)msg標(biāo)簽，內(nèi)容是0．代表在寫入數(shù)據(jù)時(shí)一切正常．?dāng)?shù)據(jù)被成功添加．相反Err.Number不等于0．則代表在寫入數(shù)據(jù)時(shí)發(fā)生了錯(cuò)誤．?dāng)?shù)據(jù)沒有被成功添加．這時(shí)也會(huì)向xml變量中添加一個(gè)msg標(biāo)簽．內(nèi)容為1．這三種情況無論那種發(fā)生 都會(huì)在添加msg標(biāo)簽以后立即退出Add_Data．所以只有一個(gè)msg標(biāo)簽會(huì)被寫入．那么我們馬上回來客戶端Add_Post中函數(shù)正是接收了這個(gè)msg標(biāo)簽以后．根據(jù)msg的內(nèi)容來判斷服務(wù)端究竟發(fā)生了什么事！如果msg的內(nèi)容為0，證明服務(wù)端一切正常，沒有錯(cuò)誤發(fā)生．?dāng)?shù)據(jù)已被添加到數(shù)據(jù)庫．我們直接使用Dom將str中的內(nèi)容寫入到了表格內(nèi)．并沒有 執(zhí)行讀取數(shù)據(jù)的Post函數(shù)．如果msg內(nèi)容為3，證明你輸入了空的內(nèi)容．如果msg內(nèi)容為1，證明服務(wù)端有錯(cuò)誤發(fā)生．?dāng)?shù)據(jù)寫入失??！

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Ajax如何添加數(shù)據(jù)即時(shí)顯示信息”這篇文章對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

網(wǎng)站標(biāo)題：Ajax如何添加數(shù)據(jù)即時(shí)顯示信息
文章轉(zhuǎn)載：http://chinadenli.net/article8/ppihop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、網(wǎng)頁設(shè)計(jì)公司、全網(wǎng)營銷推廣、服務(wù)器托管、網(wǎng)站排名、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站建設(shè)