AJAX 初次使用的来龙去脉，本文涉及了以下内容：
AJAX 是什么？
要从那里开始？
需要多少时间可以学会？
一个详细的实例
转载请注明：转自过节乐－快乐节日站。
1, 事情起因
由于给老婆做了这个网站
过节乐－快乐节日站。
中间有一个页面，是通过每次刷新 URL 实现的，事实上这里只要更新极少的数据。
所以考虑使用 AJAX。
2, 从那里开始了解AJAX
之前知道AJAX是作这类简单数据通讯的，其他的不是很了解，先去充下电。
去了 AJAX 中国，
http://www.okajax.com/
这里有些资料文章，但是基本不怎么更新了，不过足够用了。
下载了一本书 《AJAX 基础教程》，据说是最早翻译过来的一本 AJAX 的书，2006年的。
如果要学习 AJAX， 只需要看第二章和第三章就够了。
我用了半天时间，顺便把前三章 Servlet和 JSP 的代码都修改为 php 的了。
3, AJAX是什么
AJAX 基本来说是一个异步通讯，就是说在用户通过点击按钮或者其他的触发行为（也许是自动触发），
使得页面在用户不知情的情况下，向服务器发送一个请求，当这个请求完成后，会回调页面上的一个 JavaScript 处理函数，
由这个函数去修改页面上的数据或者表现。
这其实不是任何的新的知识，机制与请求一个新页面没有任何不同，唯一不同的是：
页面在后台偷偷的调用，而不是重新在浏览器中载入一个页面。让用户感觉页面奇特的动态了。
以前这样的事可以通过 IFrame 来实现，或者在 FLASH 中发送请求，
现在要做的事情是用一个 XMLHttpRequest() 函数，简单了许多，同时也自由了很多。
总结一下：
如果你有不错的 JavaScript + DOM 的基础，同时又了解一定的后台服务比如 ASP, JSP, PHP 或者其他。
大概你能在 30 分钟内学会 AJAX。
如果你几乎没有啥基础，那也不必看了。
4, 开始动手了
我的需求是这样的，在过节乐网站中，有些节日是农历的，或者是一些特殊时间，比如13号星期五。
看看这几个节日：
春节 农历每年1月1日
感恩节 每年11月第4个星期4
黑色星期五13号同时星期五
注意：
他们每年发生的阳历日期都是不同的！
比如春节，今年是 2月 18日， 去年是 1月 19日，明年是 2月 7日
你已经注意到了节日年份左右的2个箭头了吧？对，这可以让你翻看不同年份的节日发生时间。
需求：
我们的需求是，在点年份左右的箭头时，在页面上直接替换，而不是重新刷一遍这个页面。
处理流程：
1, 当用户点击左右按钮，查看其他年份的节日时间时，发送 XMLHttpRequest() 到后台
2, 后台处理好请求年份的节日时间，自动返回内容
3, XMLHttpRequest() 对象发现内容返回时，把内容交给一个处理函数 handleStateChange()
4, handleStateChange() 函数修改页面内容
你可以直接查看页面源码，我精简了一下，让大家可以了解只与这件事相关的代码。
相关的 JavaScript:
<script type="text/javascript">
var xmlHttp;
// 这是创建 XMLHttpRequest 对象
function createXMLHttpRequest() {
// IE
if(window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// FireFox , Opera
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
// 开始请求，这是由下面页面上点击“左右箭头”触发的
function startRequest(xmlURI) {
createXMLHttpRequest();
// 请求完成后，由 handleStateChange() 函数处理
xmlHttp.onreadystatechange = handleStateChange;
// 发送请求了，用户是不知道的
xmlHttp.open("GET", xmlURI, true);
xmlHttp.send(null);
// 给用户一点友好的提示
document.getElementById("feast_ymd").innerHTML = '<h4 class="flist_ymd">计算中 ......</h4>';
}
function handleStateChange() {
// 状态 4 表示请求已经完成
if(xmlHttp.readyState == 4) {
// HTTP 相应状态, 200表示已经返回了内容
if(xmlHttp.status == 200) {
// 把 <div id="feast_ymd"> 中的内容换掉
document.getElementById("feast_ymd").innerHTML = xmlHttp.responseText;
}
}
}
</script>
下面是简化了的 HTML 内容，定义了一个要被我们修改内容的 <div id="feast_ymd">
以及左右2个箭头，点击箭头触发 startRequest()
<div id="feast_ymd">
<a href="javascript:startRequest('feast.php?feastid=1&tid=17&year=2006&ajax=1');" title="2006年春节">
<img src="images/feasts/style01/arrow_w_l.gif"></a>
2007年
<a href="javascript:startRequest('feast.php?feastid=1&tid=17&year=2008&ajax=1')" title="2008年春节">
<img src="images/feasts/style01/arrow_w_r.gif"></a>
2月 18日
</div>
后台 php 的代码就是计算好日期时间，发送回来。
5, 再深入一点
使用 DOM 修改界面表现
innerHTML 是IE支持的非标准方法，但事实上得到了所有流行的浏览器支持，更好的方式是使用 DOM 框架来修改页面。
这里就不多介绍了，本例之所以采用 innerHTML 是因为我比较懒，这个需求也太简单。
调试 DOM 的方法建议使用 FireFox 的 FireBugs 插件，无比之强大。
使用 XML 或者 JSON 传递数据
如果要使用 DOM 的话，你就不能象本例一样直接返回一个 HTML 内容回去，你应该返回一组数据回去，
使用标准的 XML 作为页面和服务器间沟通的内容。
另外就是 JSON，实际上这是 JavaScript 格式的数据，比 XML 的使用方便的多，同时受到所有流行的服务器开发语言的支持。
