Ajax局部重新整理例子

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

通過本例，可以大概瞭解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",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，當然PHP、ASP.NET、JSP等都是一個道理）

<%
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>")
%>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More