Ajax在網(wǎng)上已經(jīng)叫喊了好幾年了, 但是還是有很多像我這樣的新手沒掌握它, 像這樣能改善交互體驗(yàn)的技術(shù)不會(huì)用真是很遺憾呢. 所以我就把我學(xué)到的記錄下來,供高手指正,新手共勉.

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

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

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

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

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

并且假設(shè)將來生成的文件內(nèi)容能像下面那樣的:

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


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

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

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

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

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