（源创）AJAX简单的例子（对服务器定时刷新页面）(页 1) - Ajax论坛

ming206 发表于 2008-2-22 14:50

（源创）AJAX简单的例子（对服务器定时刷新页面）

（1）客户端

<HTML>
<HEAD>
<Title>Ajax</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",url,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.NET或JSP或PHP，道理一样）

<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<%
rem 必须设置成"text/xml"
Response.CharSet="gb2312"
Response.ContentType="text/xml"
%>
<%
dim types
dim res
dim message
dim counter:counter=1
if(session("counter")="") then session("counter")=0
types=replace(Trim(Request.QueryString("type")),"'","")
counter=session("counter")
if types="start" then
counter=1
end if
select 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 select
session("counter")=session("counter")+1
res="<message>"+message+"</message>"
Response.Write("<response>"+res+"</response>")
%>

至于细节，相信大家都能很快的理解。

beniao 发表于 2008-3-18 23:58

代码写得很零乱.
阅读性差

页: [1]