通过本例，可以大概了解AJAX访问服务器的过程以及基本方法，本例结合DOM动态创建表的行
基本思路：定时间内向服务器请求数据，服务器将返回不同的数据信息（其中以XML格式返回），
AJAX获取服务器返回的信息后，动态创建表的行，从而形成了动态表的生成。
实现如下：
（1）客户端代码：
<HTML>
<HEAD>
<Title>sx.asp</Title>
<Meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<Meta name="Generator" content="Asp Studio 1.0">
<script language="javascript">
var xmlHttp;
//创建XMLHTTPRequest对象
function createXMLHttpRequest()
{
var xp;
try{
if(window.ActiveXObject)
{
xp=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
xp=new XMLHTTPRequest();
}
}
catch(e)
{
alert("err!");
}
return xp;
}
//启动发送请求
function doStart()
{
xmlHttp=createXMLHttpRequest();
var url="server/doPost.asp?type=start";
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=startCallback;
xmlHttp.send(null);
}
//startCallback方法
function startCallback()
{
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
setTimeout("pollServer()",5000);
refreshTime();
}
}
}
//pollServer()方法
function pollServer()
{
xmlHttp=createXMLHttpRequest();
var url="server/doPost.asp?type=chance";
xmlHttp.open("GET",true);
xmlHttp.onreadystatechange=pollCallback;
xmlHttp.send(null);
}
//pollCallback方法
function pollCallback()
{
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
var xmlDoc=xmlHttp.responseXML;
var message=xmlDoc.getElementsByTagName("message")[0].firstChild.data;
if(message!="end")
{
var new_row=createRow(message);
var table=document.getElementById("myTable");
var table_body=table.getElementsByTagName("tbody").item(0);
var first_row=table_body.getElementsByTagName("tr").item(0);
table_body.insertBefore(new_row,first_row);
setTimeout("pollServer()",5000);
refreshTime();
}
}
}
}
//refreshTime方法
function refreshTime()
{
var time_span=document.getElementById("time");
var time_val=time_span.innerHTML;
var int_val=parseInt(time_val);
var new_int_val=int_val-1;
if(new_int_val>-1)
{
setTimeout("refreshTime()",1000);
time_span.innerHTML=new_int_val;
}else
{
time_span.innerHTML=5;
}
}
//创建表的行
function createRow(message)
{
var row=document.createElement("tr");
var cell=document.createElement("td");
var cell_data=document.createTextNode(message);
cell.appendChild(cell_data);
row.appendChild(cell);
return row;
}
</script>
</HEAD>
<BODY onLoad="doStart()">
<span id="time" style='display=none' >5</span>
</p>
<table id="myTable" align="center">
<tbody>
<tr id="row_0">
<td></td>
</tr>
</tbody>
</table>
</BODY>
</HTML>
（2）服务端代码（本例为了测试，所以用ASP，当然PHP、ASP.NET、JSP等都是一个道理）
<%rem 必须设置成"text/xml"Response.CharSet="gb2312"Response.ContentType="text/xml"%><%dim typesdim resdim messagedim counter:counter=1if(session("counter")="") then session("counter")=0types=replace(Trim(Request.QueryString("type")),"'","")counter=session("counter")if types="start" then counter=1end ifselect case counter case 1:message="姓名：莫小明，学号：20032564，性别：男，年龄：25岁，籍贯：广西" case 2:message="姓名：刘德华，学号：20062564，性别：男，年龄：44岁，籍贯：香港" case 3:message="姓名：黎 明，学号：16588587，性别：男，年龄：36岁，籍贯：重庆" case 4:message="姓名：张三 5，学号：20062564，性别：女，年龄：29岁，籍贯：重庆" case 5:message="姓名：张三 6，学号：20062564，性别：男，年龄：24岁，籍贯：重庆" case 6:message="姓名：张三 7，学号：20062564，性别：女，年龄：18岁，籍贯：重庆" case 7:message="end" case else message="end"end selectsession("counter")=session("counter")+1res="<message>"+message+"</message>"Response.Write("<response>"+res+"</response>")%>
