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="/1999/xhtml" >
4  <head runat="server">
5     <title>Lesson 1 - Demo 1 - IFrame "Ajax"</title>
6     <script language="javascript">
7         function refresh()
8         {
9             ElementById('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="/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="/1999/xhtml" >
<head runat="server">
    <title>Lesson 1 - Demo 1 - IFrame "Ajax"</title>
    <script language="javascript">
        function setCurrentTime(strTime)
        {
            ElementById("currentTime").innerHTML = strTime;
        }
       
        function refresh()
        {
            ElementById('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()中有这么一行代码：
&ElementById('iframe').src =  "IFramePage.aspx?" + new Date();
将iframe参数传递src属性设置为IFramePage.aspx，它的代码如下：
 
 
<%@ Page Language="C#" AutoEventWireup="true" %>

<html xmlns="/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 = ElementById("currentTime").innerHTML;
        window.parent.setCurrentTime(strTime);
    </script>
</body>
</html>
 
在这个页面上有一个DIV块，内容是在服务器端取的当前时间，然后紧接着执行了一段javascript代码，
 
  var strTime = ElementById("currentTime").innerHTML;
  window.parent.setCurrentTime(strTime);
先取出了前面那个DIV块的HTML内容，然后用window.parent调用了父页面的setCurrentTime函数，
        function setCurrentTime(strTime)
        {
            ElementById("currentTime").innerHTML = strTime;
        }
来把父页面的我们要刷新的那一个块的HTML代码替换为了新的代码。这样就间接实现了那个块的部分刷新。
这个例子让我初步意识到了后面要学的AJAX异步刷新的这个异步的意义所在。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。