揭开AJAX神秘面纱

揭开AJAX神秘面纱2008-05-08AJAX，即"Asynchronous JavaScript And XML"的缩写，可翻译为异步JavaScript及XML技术。其核心是一个寄宿在浏览器中名为XMLHTTPRequest的类。通过此类，可以做到无需提交表单就可以实现与服务器的连接；无需刷新整个页面，就可以动态更新页面中一部分的内容。XMLHTTPRequest通常使用XML作为数据交换的载体，但也可使用其他的载体，如纯文本。简单来说，就是通过XMLHTTPRequest发送信息给服务器，异步接收服务器处理并返回信息，然后通过JavaScript动态更新页面的部分内容。

尽管AJAX近来非常火爆，但AJAX并非新的技术，正如其名所示，只不过是JavaScript加上XML的技术罢了。而且使用上非常简单。

应用AJAX的流程：

1、定义一个事件处理器

2、获取XMLHTTPRequest，并将事件处理器注册给它

3、与服务器连接

4、发送信息

5、服务器返回处理完毕的信息

6、每当XMLHTTPRequest的状态发生变化，自动触发事件处理器

7、事件处理器动态更新页面

本文通过一个简单的例子来说明如何在IE6中使用AJAX技术。在这例子中，客户端每隔十秒，从服务器端取回一个随机的字符串，在不重新刷新页情况下，自动更新部分页面内容。例子仅用到了两个jsp文件，client.jsp及server.jsp。为了方便说明，我用server.jsp来代替本应作为Servlet的Server.java。

先看client.jsp内容：

<%@page contentType="text/html"%>
<%@page pageEncoding="gb2312"%>
<！DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>AJAX Demo</title>
<script language="JavaScript">
var xmlHttp;
function getGiftFromServer（） {
var url = "http://localhost:8084/ajax/server.jsp";
if （window.ActiveXObject） {
xmlHttp = new ActiveXObject（"Microsoft.XMLHTTP"）;
}
xmlHttp.onreadystatechange = showGift;
xmlHttp.open（"GET", url, true）;
xmlHttp.send（null）;
setTimeout（"getGiftFromServer（）",10000）;
}
function showGift（） {
if （xmlHttp.readyState == 4 || xmlHttp.readyState == "complete"） {
document.getElementById（"output"）.innerHTML = "Time is for " + xmlHttp.responseText + ".";
}
}
</script>
</head>
<body onload="getGiftFromServer（）">
<h1>AJAX例子</h1>
<div id="output"></div>
</body>
</html>