2.3 使用Ajax完成数据传输
下面的工作将从后台编程转移到前台脚本中，请你打开index.html页面。切换到【代码】视图，在头部区域输入下面代码：
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest(){
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
}
</script>
有点面熟吧，这正是第2.1.2节中创建XMLHttpRequest对象实例的源代码，我们把它封装在一个函数中，这样可以在其他代码位置随时调用。不明白的读者可以返回看一下，这里就不再费口舌了。
然后在其下面再定义一个事情驱动函数：
function handleStateChange(){
if(xmlHttp.readyState == 4){
if (xmlHttp.status == 200 || xmlHttp.status == 0){
document.all.message.innerHTML=xmlHttp.responseText;
}
}
}
上面代码先判断当前响应是否结束，如果结束则读取响应信息，并赋值给页面中ID为message的元素。你可以参阅第2.1.6节了解为什么要这样编写。
最后在编写一个开始请求的函数，代码如下：
function startRequest(url){
createXMLHttpRequest();
try{
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", url, false);
xmlHttp.send(null);
}catch(exception){
alert("您要访问的资源不存在!");
}
}
</script>
上面函数以GET方法向指定文件发出请求并接收响应的数据（详细讲解可以参阅第2.1.4节内容）。然后在HTML结构代码中输入一个包含空值的div元素，设置该元素的ID值为message：
<div id="container">
<div id="sidebar1">
<h3>留言板</h3>
<FORM action="save.asp" method=post>… </FORM>
</div>
<div id="mainContent">
<h2>留言内容</h2>
<div id="message"></div>
</div>
<br class="clearfloat" />
</div>
最后，在<body>标签中调用startRequest(url)函数即可：
<body class="twoColFixRt" onload="startRequest('list.asp');">
好啦，整个示例的功能基本完成，你不妨试验一下，在留言板中输入简单的留言并提交之后，返回即可看到自己的留言，感觉不错吧（如图2-16所示）。
图 2-16
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
您可能感兴趣的文章:
- 上一篇：2.4 使用CSS美化留言板
- 下一篇：2.2 开始留言板示例的准备工作
