我把這篇文章稱為Ajax裸奔，因?yàn)槲掖蛩悴挥萌魏维F(xiàn)成的框架和除了文本編輯器之外的工具來開發(fā)這里面的例子。一切從原碼開始，從鍵盤開始。
在這篇文章里，我要一起一步一步的做一個(gè)堪稱最簡單的Ajax的示范應(yīng)用。
完全理解本文，你需要:
1 了解xml的基本概念：
* 一對(duì)尖括號(hào)定義了一個(gè)xml標(biāo)記
* 一個(gè)合法xml標(biāo)記或者是開始標(biāo)記，或者是結(jié)束標(biāo)記，或者是獨(dú)立標(biāo)記。
* 標(biāo)記有標(biāo)記名、標(biāo)記體和屬性三個(gè)基礎(chǔ)組成部分
* 標(biāo)記可以嵌套。
* 一個(gè)xml文件只有一個(gè)頂層標(biāo)記。
* 一個(gè)成功解析后的xml文件對(duì)應(yīng)一個(gè)文檔對(duì)象模型（DOM）
* xml中的標(biāo)記和Dom中的節(jié)點(diǎn)有嚴(yán)格的對(duì)應(yīng)關(guān)系：
* 一個(gè)xml標(biāo)記在DOM中對(duì)應(yīng)一個(gè)節(jié)點(diǎn)（node），
* 子標(biāo)記對(duì)應(yīng)dom的子節(jié)點(diǎn)
* 父標(biāo)記對(duì)應(yīng)dom的父節(jié)點(diǎn)
* 標(biāo)記屬性對(duì)應(yīng)節(jié)點(diǎn)屬性
* 我們通常通過文檔對(duì)象模型來訪問xml的內(nèi)容，而不是自己解析xml字符串。
* xhtml是xml的一個(gè)子集。
2 對(duì)javascript和html有一些基本的了解。至少要可以對(duì)照手冊看明白我們要用到的腳本。
第一步，問題定義。
我們在將要實(shí)現(xiàn)的應(yīng)用是：用Ajax技術(shù)讀取一個(gè)新聞標(biāo)題的列表，并展現(xiàn)在頁面上。
第二步，原型頁面設(shè)計(jì)
step2.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb18030" />
<meta name="Author" content="emu" />
<meta name="Keywords" content="ajax" />
<meta name="Description" content="Ajax裸奔-原型頁面" />
<title> 原型頁面 </title>
</head>
<body>
工行小額賬戶明年收費(fèi) 不足300元要?dú)w并<br />
"神六"飛行開銷僅為美航天飛機(jī)4.5% 花9億<br />
2005能源富豪榜揭榜 超市要撤致癌保鮮膜<br />
神六催生高價(jià)股 mbo公司股改 高管一夜暴富<br />
保險(xiǎn)公司告基金利益輸送 科龍管理班子亮相 <br />
神六飛船成功著陸 載人飛行取得圓滿成功<br />
索尼中國不裁員 夏普與南京熊貓分道揚(yáng)鑣 <br />
北電任命新總裁兼ceo 索愛發(fā)布第三季財(cái)報(bào)<br />
300萬像素手機(jī)推薦 最有降價(jià)潛力手機(jī)導(dǎo)購<br />
近期五大dc跳水王 怪模怪樣個(gè)性手機(jī)推薦<br />
亞歷山大古城的文化歷史 勝利者改寫歷史 <br />
</body>
</html>
做好頁面，不要忘了帖上http://validator.w3.org驗(yàn)證一下是否完全符合規(guī)范。如果通過了，你就可以非常驕傲的在自己的頁面上帖上這一行：
<p><a href=" src="當(dāng)然，前提是你的頁面有公網(wǎng)地址。
第三步，分析頁面，分解出需要用Ajax技術(shù)獲取的信息。
從問題定義中我們已經(jīng)了解到，新聞標(biāo)題的列表是需要獨(dú)立獲取并顯示在頁面上的內(nèi)容。
因此我們定義如下的xml：
news.xml:
<?xml version="1.0" encoding="gb2312"?>
<data>
焦點(diǎn)|工行小額賬戶明年收費(fèi) 不足300元要?dú)w并<br />
財(cái)經(jīng)|"神六"飛行開銷僅為美航天飛機(jī)4.5% 花9億<br />
財(cái)經(jīng)|2005能源富豪榜揭榜 超市要撤致癌保鮮膜<br />
證券|神六催生高價(jià)股 MBO公司股改 高管一夜暴富<br />
證券|保險(xiǎn)公司告基金利益輸送 科龍管理班子亮相 <br />
科技|神六飛船成功著陸 載人飛行取得圓滿成功<br />
關(guān)注|索尼中國不裁員 夏普與南京熊貓分道揚(yáng)鑣 <br />
熱點(diǎn)|北電任命新總裁兼CEO 索愛發(fā)布第三季財(cái)報(bào)<br />
數(shù)碼|300萬像素手機(jī)推薦 最有降價(jià)潛力手機(jī)導(dǎo)購<br />
測評(píng)|近期五大DC跳水王 怪模怪樣個(gè)性手機(jī)推薦<br />
探索|亞歷山大古城的文化歷史 勝利者改寫歷史 <br />
</data>
第四步，我們修改原型頁面，讓它可以接受xml數(shù)據(jù)并把它顯示出來。
因?yàn)橹皇且粋€(gè)中間步驟，我們會(huì)暫時(shí)破壞一下xhtml規(guī)范。下面這個(gè)頁面將只能在IE上面顯示：
step4.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb18030" />
<meta name="Author" content="emu" />
<meta name="Keywords" content="ajax" />
<meta name="Description" content="Ajax裸奔-步驟4" />
<title> 原型頁面 </title>
<xml id="newsXML">
<data>
焦點(diǎn)|工行小額賬戶明年收費(fèi) 不足300元要?dú)w并<br />
財(cái)經(jīng)|"神六"飛行開銷僅為美航天飛機(jī)4.5% 花9億<br />
財(cái)經(jīng)|2005能源富豪榜揭榜 超市要撤致癌保鮮膜<br />
證券|神六催生高價(jià)股 MBO公司股改 高管一夜暴富<br />
證券|保險(xiǎn)公司告基金利益輸送 科龍管理班子亮相 <br />
科技|神六飛船成功著陸 載人飛行取得圓滿成功<br />
關(guān)注|索尼中國不裁員 夏普與南京熊貓分道揚(yáng)鑣 <br />
熱點(diǎn)|北電任命新總裁兼CEO 索愛發(fā)布第三季財(cái)報(bào)<br />
數(shù)碼|300萬像素手機(jī)推薦 最有降價(jià)潛力手機(jī)導(dǎo)購<br />
測評(píng)|近期五大DC跳水王 怪模怪樣個(gè)性手機(jī)推薦<br />
探索|亞歷山大古城的文化歷史 勝利者改寫歷史 <br />
</data>
</xml>
<SCRIPT>
<!--
function init(){
document.body.innerHTML=newsXML.getElementsByTagName("data")[0].text;
}
//-->
</SCRIPT>
</head>
<body onload="init()">
</body>
</html>
第五步，我們繼續(xù)修改頁面，把xml從文件中獨(dú)立出來，并讓頁面可以訪問獨(dú)立的xml文件并把它顯示出來。
首先，確認(rèn)第三步定義的xml已經(jīng)保存為一個(gè)xml文件 news.xml
然后頁面就可以改成這樣了：
step5.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb18030" />
<meta name="Author" content="emu" />
<meta name="Keywords" content="ajax" />
<meta name="Description" content="Ajax裸奔-步驟5" />
<title> 原型頁面 </title>
<script type="text/JavaScript">
<!--
var newsXML;
function init(){
newsXML = new ActiveXObject("microsoft.XMLDOM"); //創(chuàng)建XMLDOM對(duì)象，用以通過文件系統(tǒng)或者h(yuǎn)ttp連接訪問xml文件
newsXML.async= true; //規(guī)定XMLDOM對(duì)象采用異步方式加載數(shù)據(jù)
newsXML.onreadystatechange= handleXML; //指定加載到xml之后采用那個(gè)函數(shù)來處理xml數(shù)據(jù)
newsXML.load("news.xml"); //開始裝載xml數(shù)據(jù)
}
function handleXML(){
if(newsXML.readyState==4)
document.body.innerHTML=newsXML.getElementsByTagName("data")[0].text;
}
//-->
</script>
</head>
<body onload="init()">
</body>
</html>
確認(rèn)news.xml和step5.html保存在同一個(gè)目錄下，現(xiàn)在在IE中你已經(jīng)可以看到你的第一個(gè)Ajax頁面在工作了。
不過現(xiàn)在我們還沒有通過http來訪問xml，也還不能在非IE瀏覽器上運(yùn)行這個(gè)應(yīng)用，我們將在下篇文章中解決這兩個(gè)問題。
本文全部原碼下載