我把这篇文章称为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="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a></p>
当然，前提是你的页面有公网地址。
第三步，分析页面，分解出需要用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浏览器上运行这个应用，我们将在下篇文章中解决这两个问题。
本文全部原码下载