资源描述
Div 部分刷新
利用iframe刷新div
利用AJAX刷新部分div
一般的WEB页面，当用户访问时，会按需请求一个新页面，而这个新页面很大一部分的内容其实跟原页面是相同的，无非是某一行内容，或者某一小块内容要被刷新，这时候如果把整个页面再重新请求一遍，就很不划算，这时候我们可以使用一种部分刷新方法，就是使用HTML的 iframe 标签。
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。这个标签的可用属性如下：
其中我们需要注意的是一个 src 属性，它指定了在这个iframe块中你要用于显示的原代码。
例如：
<iframe src ="/index.html">
<p>Your browser does not support iframes.</p>
</iframe>
好，下面我们就可以用JAVASCRIPT改变iframe块的内容，来实现页面的部分刷新了，示例代码如下：
1 <%@ Page Language="C#" AutoEventWireup="true" %>
2 //...
3 <html xmlns="http://www.w3.org/1999/xhtml" >
4 <head runat="server">
5 <title>Lesson 1 - Demo 1 - IFrame "Ajax"</title>
6 <script language="javascript">
7 function refresh()
8 {
9 document.getElementById('iframe').src =
10 "IFramePage.aspx?" + new Date();
11 }
12 </script>
13 </head>
14 <body style="font-family:Verdana; font-size:13px;">
15 <form id="form1" runat="server">
16 <div>
17 <b>Page Load:</b>
18 <span><%= DateTime.Now.ToLocalTime() %></span>
19 </div>
20 <div>
21 <b>Current Time:</b>
22 <span id="currentTime"></span>
23 </div>
24 <input type="button" value="Refresh" onclick="refresh()" />
25 </form>
26 <iframe id="iframe" src="IFramePage.aspx"></iframe>
27 </body>
28 </html>
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 <html xmlns="http://www.w3.org/1999/xhtml" >
4 <head runat="server">
5 <title>Untitled Page</title>
6 </head>
7 <body>
8 <form id="form1" runat="server">
9 <div id="currentTime"><%= DateTime.Now.ToLocalTime() %></div>
10 </form>
11
12 </body>
13 </html>
实际上你就发现那个传进来的参数根本没有在对象页面中用到过。
其实上面的示例来自于老赵06年的AJAX视频，但是我改变了一下，因为老赵为了让页面好看一点，把iframe隐藏了起来，只是用它来取数据。老赵的原始代码如下：
首先主页面是：
<%@ Page Language="C#" AutoEventWireup="true" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Lesson 1 - Demo 1 - IFrame "Ajax"</title>
<script language="javascript">
function setCurrentTime(strTime)
{
document.getElementById("currentTime").innerHTML = strTime;
}
function refresh()
{
document.getElementById('iframe').src =
"IFramePage.aspx?" + new Date();
}
</script>
</head>
<body style="font-family:Verdana; font-size:13px;">
<form id="form1" runat="server">
<div>
<b>Page Load:</b>
<span><%= DateTime.Now.ToLocalTime() %></span>
</div>
<div>
<b>Current Time:</b>
<span id="currentTime"></span>
</div>
<input type="button" value="Refresh" onclick="refresh()" />
</form>
<iframe id="iframe" style="display:none"></iframe>
</body>
</html>
在这儿有一个ID为 iframe 的iframe对象，它的显示设置为了隐藏，隐藏的原因是因为我们这个iframe块完全是用来取数据的，它不用显示出来，事实上，页面上要刷新的块是：
<span id="currentTime"></span> 这个块！
然后页面上面有个 BUTTON，响应函数是refresh(),在refresh()中有这么一行代码：
document.getElementById('iframe').src = "IFramePage.aspx?" + new Date();
将src属性设置为IFramePage.aspx，它的代码如下：
<%@ Page Language="C#" AutoEventWireup="true" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div id="currentTime"><%= DateTime.Now.ToLocalTime() %></div>
</form>
<script language="javascript">
var strTime = document.getElementById("currentTime").innerHTML;
window.parent.setCurrentTime(strTime);
</script>
</body>
</html>
在这个页面上有一个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异步刷新的这个异步的意义所在。
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
