为了简化过程,服务器端没有应用任何CGI,通过这个例子,可以看到Ajax处理的一般过程:
WebPage通过JavaScript调用Ajax处理函数--->(函数内)根据不同的浏览器创建XMLHttpRequest对象--->为其onreadystatechange设置回调函数--->在回调函数中判断状态,OK时将数据显示到WebPage内。
演示:
http://homepage3.nifty.com/myinfo/ajax.html
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>ajax test</title>
<script language="javascript"><!--
//函数;取得指定服务器上文件的数据。文件名通过参数pageURL指定。
function getPage(pageURL) {
//创建XMLHttpRequest对象,是Ajax的灵魂。
xmlhttp = createXMLHttp();
if (xmlhttp)
{
//设置一个回调函数setPageData ,当状态改变的时候调用。
xmlhttp.onreadystatechange = setPageData;
//用Get方式取得数据。
xmlhttp.open('GET', pageURL);
//通过Get方式取得数据的时候,send(null)即可。如果通过Post方式的时候,要指定具体的参数
//比如:xmlhttp.send("nickname="encodeURL(document.sampleForm.nickname.value));
xmlhttp.send(null);
}else{
alert("XMLHttpRequest Fail.");
}
}
//供回调用的函数。
function setPageData()
{
//当XMLHttpRequest对象取得数据完毕且状态是200(OK)的时候
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
//将数据设置到WebPage
document.getElementById("disp").innerHTML = xmlhttp.responseText;
}
}
//创建XMLHttpRequest对象
function createXMLHttp()
{
try {
//微软系列浏览器的时候
return new ActiveXObject ("Microsoft.XMLHTTP");
}catch(e){
try {
//非微软系列浏览器的时候。
return new XMLHttpRequest();
}catch(e) {
return null;
}
}
//创建不成功则返回Null
return null;
}
// --></script>
</head>
<body>
<form>
<!-- 点击网页上的Form按钮,调用getPage函数 -->
<input type="button" value="Page 1" onClick="getPage('1.html')">
<input type="button" value="Page 2" onClick="getPage('2.html')">
<input type="button" value="Page 3" onClick="getPage('3.html')">
</form>
<div id="disp"></div>
</body>
</html>