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