Div 部分刷新 利用iframe刷新div 利用AJAX刷新部分div
Div 部分刷新
利用iframe刷新div
利用AJAX刷新部分div
一般的WEB页面,当用户访问时,会按需请求一个新页面,而这个新页面很大一部分的内容其实跟原页面是相同的,无非是某一行内容,或者某一小块内容要被刷新,这时候如果把整个页面再重新请求一遍,就很不划算,这时候我们可以使用一种部分刷新方法,就是使用HTML的iframe 标签。
iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。这个标签的可用属性如下:
其中我们需要注意的是一个src 属性,它指定了在这个iframe块中你要用于显示的原代码。
例如:
Your browser does not support iframes.
好,下面我们就可以用JAVASCRIPT改变iframe块的内容,来实现页面的部分刷新了,示例代码如下:
1 <%@ Page Language="C#" AutoEventWireup="true" %>
2 //...
3
4
5
6
7 function refresh()
8 {
9 document.getElementById('iframe').src =
10"IFramePage.aspx?" + new Date();
11 }
12
13
14
15
26
27
28
29
在这个页面中,先显示一个Page Load:的时间,以及一个按钮,然后一个iframe块,当点击按钮的时候,我们在它的响应函数refresh()中改变iframe块的src属性,也就是页面地址(url参数变化也算地址变动)这样就会引起这个iframe重新被加载,那个参数中用了一个?new Date()型参数,这样保证了每次都是不同的参数,每次都要变,如果这儿是个固定值比如"123"那么只有第一次点的时候变,而后面就不变了。但事实上,请求的一直都是IFramePage.aspx页面,只是每次都被服务端重新加载了,这样就会显示iframe更新的时间随按钮点击而变化,但页面load的那个时间是始终不变的。
下面是IFramePage.aspx的代码:
1 <%@ Page Language="C#" AutoEventWireup="true" %>
2//...
3
4
5
6
7
8
11
12
13
实际上你就发现那个传进来的参数根本没有在对象页面中用到过。
其实上面的示例来自于老赵06年的AJAX视频,但是我改变了一下,因为老赵为了让页面好看一点,把iframe隐藏了起来,只是用它来取数据。老赵的原始代码如下:
首先主页面是:
<%@ Page Language="C#" AutoEventWireup="true" %>
function setCurrentTime(strTime)
{
document.getElementById("currentTime").innerHTML = strTime;
}
function refresh()
{
document.getElementById('iframe').src =
"IFramePage.aspx?" + new Date();
}
在这儿有一个ID为iframe 的iframe对象,它的显示设置为了隐藏,隐藏的原因是因为我们这个iframe 块完全是用来取数据的,它不用显示出来,事实上,页面上要刷新的块是:
这个块!
然后页面上面有个BUTTON,响应函数是refresh(),在refresh()中有这么一行代码:
document.getElementById('iframe').src = "IFramePage.aspx?" + new Date();
将src属性设置为IFramePage.aspx,它的代码如下:
<%@ Page Language="C#" AutoEventWireup="true" %>
var strTime = document.getElementById("currentTime").innerHTML;
window.parent.setCurrentTime(strTime);
在这个页面上有一个DIV块,内容是在服务器端取的当前时间,然后紧接着执行了一段javascript代码,
var strTime = document.getElementById("currentTime").innerHTML;
window.parent.setCurrentTime(strTime);
先取出了前面那个DIV块的HTML内容,然后用window.parent调用了父页面的setCurrentTime函数,
function setCurrentTime(strTime)
{
document.getElementById("currentTime").innerHTML = strTime;
}
来把父页面的我们要刷新的那一个块的HTML代码替换为了新的代码。这样就间接实现了那个块的部分刷新。
这个例子让我初步意识到了后面要学的AJAX异步刷新的这个异步的意义所在。