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