AJAX的出现使得页面部分内容更新成为现实,下面的示例程序演示了AJAX的工作原理。
第一,使用AppServ工具包所带的服务器作为Web服务器,该工具包安装成功后,访问其首页,会出现如下所示画面:
第二,在index.html页面中编写用JavaScript实现的AJAX代码,如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="AJAX">
<meta name="Description" content="AJAX">
<title>LearnAJAX</title>
<script type="text/javascript">
function useAjax() {
var xmlHttpReq = null;
if (window.ActiveXObject){
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest){
xmlHttpReq = new XMLHttpRequest();
}
xmlHttpReq.open("GET", "test.txt?t=" + Math.random(), true);
xmlHttpReq.onreadystatechange = RequestCallBack;
xmlHttpReq.send(null);
function RequestCallBack() {
if (xmlHttpReq.readyState == 4)
{
if (xmlHttpReq.status == 200)
{
document.getElementById("resText").innerHTML = xmlHttpReq.responseText;
}
}
}
}
</script>
</head>
<body>
<input type="text" id="textId" οnkeyup="useAjax();" />
<div id="resText">此处显示异步请求到的内容</div>
</body>
</html>
代码中所请求的是test.txt文件,该文件中只有一行内容:You are using AJAX!
第三,把index.html和test.txt文件放在AppServ安装目录的www文件夹下;当input输入框输入内容时会触发onkeyup事件,进而实现异步请求,并把请求到的内容显示到输入框下方,如下:
这就是初步了解AJAX的示例。