让web应用实现无刷新数据交互-基于iframe实现

 1、新建两个web页面,mainpage和innerpage

2、mainpage中添加<iframe>标签 其属性src设置为innerpage,再搞一个图片img在iframe之外

       mainpage页面代码:

<head runat="server">
    <title>无标题页</title>
</head>
<body>
    <form id="form1" runat="server">
    <iframe src="innerpage.aspx" frameborder="0"></iframe>
    <div>
        <input id="Text1" type="text" />
    </div>
    <div>
        <img src="IMG_2445.jpg" /></div>
    </form>
</body>

3、innerpage中加入label控件,加入js代码周期提交到后台,后台写代码更新label为一个后台产生的随机数

 

    innerpage页面代码

<head  >
    <title>无标题页</title>
   <script  language ="javascript" >
function clockon(){//在页面load时设一个定时器,定时器响应函数为getTime,定时器定为5秒触发一次该函数

var timer=setTimeout("getTime()",5000);

}

function getTime(){//定时器到时则触发提交页面

form1.submit();
}

</script>
</head>
<body onload="clockon();" >
    <form id="form1" runat="server" >

    <div>
       自动刷新获得服务器产生的随机数</div>
       <div><asp:Label ID="Label1" runat="server" Text=""></asp:Label>
         </div>       
        </form>
</body>

 

innerpage后台代码

 protected void Page_Load(object sender, EventArgs e)
    {                      
         System.Random myrand = new Random(System.DateTime.Now.Millisecond);
        this.Label1.Text = Convert.ToString(myrand.Next());      
    }

4、利用框架标签iframe,大页面套小页面,小页面周期更新,大页面的其他部分(图片)不会刷新

你可能感兴趣的:(让web应用实现无刷新数据交互-基于iframe实现)