今天我們要學習的內容是：使用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");//獲取服務端返回的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>
點擊上面的查看實例效果，就是我們今天要學習的目的．上面的代碼只是前端的html代碼．在代碼裡有3個自定義函數．
1、ajax_xmlhttp();該函數我們在前面的教程已經講過，是用來創建一個可用性的XMLHTTPRequest對象，如果你還不了解，請參閱：ajax開始准備篇
2、Post();該函數還是用來讀取數據．我們在本章教程中不再解釋ajax是如何讀取數據的．你可以參閱：ajax初試讀取數據篇與ajax讀取數據到表格 不過跟前２篇不同的是．該Post函數不是在點擊 按扭時被觸發．而是在你第一次打開網頁或刷新頁面的時候才會執行該函數．其目的是用來讀取數據庫中已存在的數據．在數據添加成功以後．並沒有運行該函數．其中的秘密下面的解釋中我會告訴你！另外你再看一下open方法中的設置．我們在請求的網址後面多了一個action=read,這個大家應該用過．在url後面的參數， 服務端可以接收該參數．在Asp中使用Request.QueryString來接收．Php中使用$get方法來接收．我們設置這個url的參數目的是想要告訴服務器．我們要執行什麼動作．在Add_Data.Asp網頁中有兩個自定義過程，一個用來讀取數據，一個用來添加數據．這個action=read參數服務端接收以後．經過判斷會執行讀取數據的過程！
3、我們重點來講一下這個add_Post函數．函數剛開始便使用getElementById方法在網頁查找msg與str．msg是用來顯示一些當前的操作信息．str是用來獲取你輸入的內容．然後判斷你是否在str的文本框中輸入了內容．如果為空則退出函數．
再看open方法的設置．請求的網頁url後面的參數是action=add，服務端網頁接收action這個參數．經過判斷如果值是add，則執行插入數據的過程．
var param = "str="+escape(str.value);將str文本框的內容等於一個str，然後一並賦值給param變量．待會發送請求時．send會提交這個param變量中的內容．escape的意思是對 String 對象編碼以便它們能在所有計算機上可讀，就是解碼你輸入的內容．經過測試有時候可以忽略，但有時候會出現亂碼．為保險起見我們還是使用escape
我們先不講readystatechange指定的程序．看下面：
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");這行的意思是．我要向服務端提交表單內容．當你的請求方式是post，並且有數據向服務端提交時．必須設置setRequestHeader．如果你使用的請求方式是get或者沒有數據要提交則可以忽略該句．
ajax.send(param);發送請求．並在send的參數裡指定要提交param變量中的內容．你可以alert一下param，會彈出str="你輸入的內容"，然後我們在服務端的網頁接收這個str，便可以獲取str中的內容了．也就是你在文本框中輸入的． 講到這裡應該是時候看一下這個被請求的服務端網頁了．看看他到底在服務端干了些什麼．請看：
復制代碼 代碼如下:
<!--#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
%>
上面是你使用ajax請求的服務端網頁：Add_Data.Asp的源碼．現在使用Asp的應該不多了吧？但我依然癡情於她．無論你用的服務端技術是Php，.Net，或者Jsp等．經過我的解釋你應該很容易的會模擬出這個源碼的功能．
1：include file="Conn.asp"在Asp裡的作用是引入一個網頁．Conn.asp是我的數據庫鏈接文件．為安全起見．我就不暴露數據庫名稱了．你自己建個庫．隨便起個名進行測試吧．
2：定義一個名字為xml變量．將xml格式的數據保存在這個變量中．使用Response.Write輸出xml變量中的內容．
3：接收你在前端url傳過來的action參數．並判斷action的值．Select case不用解釋了吧．多支判斷．如果action的值是read,則執行Read過程．如果是add則執行Add_Data過程．如果兩者都不是則證明不是通過正常渠道進行請求的． 向xml變量中再增加一個msg標簽．輸出以後會給出顯示的內容
4：Response.Clear清除緩存．
5：Response.ContentType="text/xml"定義輸出的文本格式．xml類型
6：Response.CharSet="gb2312"輸出編碼，中文編碼．
7：Response.write xml向客戶端輸出xml變量中的數據．該變量保存的是xml格式的數據．
8：Response.End停止一切輸出．
9：定義一個 Read 過程．用來讀取數據庫test_table表中的web字段內的數據．打開數據庫，sql語句．執行sql．開始讀取！這些知識我就不講了．如果你還不會．我想你應該去學習一下操作數據庫的知識！我重點講一下該Read過程的 意義．在讀取數據之前先為xml變量中增加了一個list的標簽．然後將所有的數據都讀取到list標簽內，每條數據又被包含在了一個li標簽內．數取讀取完畢．閉合list標簽．我想說的是，這個Read過程並沒有向客戶端輸出任何內容． 他的工作就是將數據庫中的內容以xml的格式讀取到那個xml變量中．當客戶端action=add的時候．執行Read過程．Read過程給出一個新的xml變量．Response.Write xml輸出這個變量到客戶端，客戶端接受到這個xml，我們在前端使用responseXML接收這個xml．然後顯示！明白嗎？不明白加我Q：30458885
10：我們再來講Add_Data這個過程．Add_Data的意義和Read是相同的．都是在執行一系列操作以後向xml變量中賦值．Add_Data的作用是接受客戶端發送過來的數據．並將數據寫到數據庫內．你仔細看下Add_Data中的程序邏輯．首先他會判斷你提交的數據是否為空．如果為空向xml變量中增加一個msg標簽．內容是3．然後退出Add_Data． 如果數據不為空．則向數據庫寫入該數據．然後判斷是否有錯誤發生．如果沒有錯誤也向xml變量中增加一個msg標簽，內容是0．代表在寫入數據時一切正常．數據被成功添加．相反Err.Number不等於0．則代表在寫入數據時發生了錯誤．數據沒有被成功添加．這時也會向xml變量中添加一個msg標簽．內容為1．這三種情況無論那種發生 都會在添加msg標簽以後立即退出Add_Data．所以只有一個msg標簽會被寫入．那麼我們馬上回來客戶端Add_Post中函數正是接收了這個msg標簽以後．根據msg的內容來判斷服務端究竟發生了什麼事！如果msg的內容為0，證明服務端一切正常，沒有錯誤發生．數據已被添加到數據庫．我們直接使用Dom將str中的內容寫入到了表格內．並沒有 執行讀取數據的Post函數．如果msg內容為3，證明你輸入了空的內容．如果msg內容為1，證明服務端有錯誤發生．數據寫入失敗！
怎麼樣你學會使用ajax技術向數據庫添加數據了嗎？不要說No!拜托我講的很辛苦．．．．．．
下一篇我們講：ajax修改數據即時顯示篇