Ajax在網上已經叫喊了好幾年了, 但是還是有很多像我這樣的新手沒掌握它, 像這樣能改善交互體驗的技術不會用真是很遺憾呢. 所以我就把我學到的記錄下來,供高手指正,新手共勉.

首先,稍微掃掃盲: AJAX = Asynchronous JavaScript And XML , 這里有三個關鍵詞: Asynchronous, javascript和XML. 用一個圖來表示它們的關系(我自己的理解,若有不妥望指出):

這里綠色箭頭是讀取數(shù)據庫的流, 藍色的箭頭是寫入數(shù)據庫的流.

我們不去研究后臺程序和數(shù)據庫的交互過程, 只是來看看前面的東西.

大部分時候我們都是在讀數(shù)據, 而寫數(shù)據庫的機會先對少一些. 假設現(xiàn)在有一個back.asp的文件讀取了數(shù)據庫的一條數(shù)據, 然后打印出來:

... ...
response.write("<MemberList>")
response.write("<Member>")
response.write("<Name>" & sname & "</Name>")
response.write("<Age>" & sage& "</Age>")
... ...
response.write("</Member>")
response.write("</MemberList>")
... ...

并且假設將來生成的文件內容能像下面那樣的:

<memberlist>
<member>
<name>Robin</name>
<age>23</age>
</member>
<member>
<name>Jack</name>
<age>13</age>
</member>
</memberlist>


我省略了上下文, 至于是怎么讀到數(shù)據的我們不去關心它. 只要知道這個文件運行的結果會生成如上的XML文件就ok, 簡單的一個步驟我們完成了 “后端程序”–>”XML”的過程.

接下來就是jQuery大顯身手的時候了. 我們會讓jQuery讀取并解析這個XML文件, 并且將人名以一個列表的形式顯示在頁面上. 廢話少說, 上代碼:

JS代碼:
(document).ready(
function (){
.ajax({
url: 'data.xml', //把剛才生成的那段和這個文件放在同級目錄里,并起名叫data.xml.(其實應該是back.asp, 這里為了測試方便)
type: "POST",
ContentType: "text/xml;utf-8", //這里需要加個utf-8
dataType:'xml',
success:function(xml)
{
alert(xml); //如果alert出來時object就對了
(xml).find("Ctg").each(function(i){ //遍歷XML對象里的Member節(jié)點
var id_value=(this).children("Name").text(); //取文本
('<li></li>').html(id_value).appendTo('dl'); //最后輸出
});
},
error:function(){alert('Error!');}
});
});
HTML代碼:
<dl></dl> //上面的js會將解析好的內容追加到這里里面

趕緊去試試吧, 是不是很簡單? 這里只是顯示出了人名的列表, 并沒有顯示年齡. 我們可以使用一個兩層的循環(huán)嵌套達到那樣的目的. 就留給大家自己發(fā)揮吧. 如果你實驗不成功 點這里下載 我做好的例子.

讀數(shù)據就這樣了,下次試試怎么把頁面的數(shù)據寫進數(shù)據庫里.