無刷新網頁[數據島技術應用]

有些時候，只是需要更新頁面的一個部分甚至只是更新中間的幾個數據卻需要從服務器DOWN整個頁面，導致各種資源的浪費。

使用數據島技術可以很好的解決這個問題：

通過定時器或用戶事件觸發數據島（XML對象）象服務器獲取數據，在數據獲取完成後，適時更新相關數據。

示例
HTML部分：
<xml id=xmlData src="http://localhost/WebService/LoadData/FeaturedService.asmx/GetScores"></xml>

<div id=divDataList>
<table datasrc=#xmlData width="500"  border="0" width="70%"   cellspacing="1" cellpadding="1" showalign="left" style="line-height: 140%">
<thead>
<tr bgcolor="#0033CC" style="color: #ffffff">
<td width="13%" nowrap>賽事名</td>
<td width="3%" nowrap>對賽隊伍</td>
<td width="25%">比分</td>
<td width="10%" nowrap>對賽隊伍</td>
<td width="25%">半場</td>
<td width="13%" nowrap>比賽狀態</td>
</tr>
</thead>
<tbody>
<tr bgcolor="#0033CC" style="color: #ffffff">
<td width="13%" nowrap><span datafld=MatchName></span></td>
<td width="13%" nowrap><span datafld=MatchTime></span></td>
<td width="11%"  nowrap><span datafld=HostTeam></span></td>
<td width="3%" nowrap><span datafld=MatchScore></span></td>
<td width="25%"><span datafld=CustomerTeam></span></td>
<td width="10%" nowrap><span datafld=HalfScore></span></td>
<td width="25%"><span datafld=MatchState></span></td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</div>
<div id=divWaitMsg>
請稍候，正在更新數據
</div>
<script language=javascript>
function ShowDataList()
{
divDataList.style.display="";
divWaitMsg.style.display="none";
setTimeout(GetNewData,10000);
}
function GetNewData()
{
divDataList.style.display="none";
divWaitMsg.style.display="";
xmlData.src=xmlData.src;
}
</script>

WebService 部分：
[WebMethod]
  public string GetScores()
  {
   string connectionString="Server=Root;database=kakai;User id=sa;password=201080";
   SqlConnection conn;
   conn=new SqlConnection(connectionString);
   string SQL;
   SqlDataAdapter Adpt;
   DataSet ds;
   SQL="Select MatchName,MatchTime, HostTeam,CustomerTeam,MatchScore,HalfScore,MatchState From ShowScores where MatchDate='11月8日'";
   Adpt=new SqlDataAdapter(SQL,conn);
   ds=new DataSet();
   Adpt.Fill(ds,"ShowScores");
return ds.Getxml();
}

新技術經歷了大致幾個階段: 一、在HTML文件頭裏增加一個鍵,使該頁面在設定的時間後跳轉到指定的頁面(包括自身);

例如:


二、使用框架然後在JS腳本里定時刷新框架內容。

上面兩種方式都會重新加載頁面，即刷新，給人的感覺不是很好！於是無刷新技術出現了。

三、是對第二種方式的一種變通。

即將衆多框架中的一個長寬設置爲0，使其不可見，然後通過腳本定時刷新該隱藏框架內容，再將該框架內容“寫”到可瀏覽的框架裏。早期的聊天室大多使用了這種技術。

真正意義上實現無刷新技術的還是以下兩種技術，它們甚至可以實現局部刷新：

四、xmlHttp技術，可以通過xmlHttp訪問asp頁面、aspx頁面、WebService等。




五、WebService，使用WebService.htc組件訪問Web服務。

var OBJ;
function init(obj,op,id)
{
OBJ=obj;
?OBJ.useService("admin/DataOperation.asmx?WSDL","getBody");
?OBJ.getBody.callService(show,op,id);
}

function show(result){
OBJ.innerHTML=result.value;
}

六、Remoting,使用Remoting也可以實現無刷新技術。因爲Remoting組件可以提供包括Http在內的多種訪問方式，當作爲Http訪問時相當於一個WebService。