无刷新网页[数据岛技术应用]

转载 2006年06月09日 10:26:00

有些时候,只是需要更新页面的一个部分甚至只是更新中间的几个数据却需要从服务器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。

滚屏加载--无刷新动态加载数据技术的应用

我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览。这种技术我暂且称它为滚屏加载技术。我们发现很多网站用到这种技术,必应图片搜索、新浪微博、QQ空间等将该技术...
  • watye
  • watye
  • 2012年05月27日 09:53
  • 642

thinkphp滚屏加载--无刷新动态加载数据技术的应用

我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览。这种技术我暂且称它为滚屏加载技术。我们发现很多网站用到这种技术,必应图片搜索、新浪微博、QQ空间等将该技术...
  • vailook
  • vailook
  • 2016年08月03日 18:23
  • 500

滚屏加载--无刷新动态加载数据技术的应用

我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览。这种技术我暂且称它为滚屏加载技术。我们发现很多网站用到这种技术,必应图片搜索、新浪微博、QQ空间等将该技术...

Hybrid移动应用:用网页技术提供Native体验

移动app可以大致被分为三种,native、hybrid和web app。如果使用native app,你可以使用设备和操作系统的所有能力,同时,平台的性能负荷最小。然而,构建web app可以让你的...

高效网站开发缓存技术应用——网页输出缓存

网页输出缓存 是 ASP.NET 缓存中的重要组成部分。网页输出缓存又分为:完整页缓存、用户控件缓存 和 缓存后替换。下面我们先来学习一下 ——完整页缓存!        使用@Ou...

高效网站开发缓存技术应用——网页输出缓存(Ⅱ)

高效网站开发缓存技术应用——网页输出缓存(Ⅱ)        网页输出缓存 是 ASP.NET 缓存中的重要组成部分。网页输出缓存又分为:完整页缓存、用户控件缓存 和 缓存后替换。接下来下面我们来学习...

高效网站开发缓存技术应用——网页输出缓存(Ⅰ)

高效网站开发缓存技术应用——网页输出缓存(Ⅰ)        网页输出缓存 是 ASP.NET 缓存中的重要组成部分。网页输出缓存又分为:完整页缓存、用户控件缓存 和 缓存后替换。下面我们先来学些一下...

Flex技术在企业级开发中的应用-网页设计

转自:http://www.samhy.com/article/560.htm 从我个人的从业经历来看,在长达十几年的软件研发过程中,无论是研发的产品或实施的项目,大部分是在为企业客户提供服务。当然...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:无刷新网页[数据岛技术应用]
举报原因:
原因补充:

(最多只允许输入30个字)