隐藏 iframe 技术——Ajax 时代一个重要的环节

本文内容

虽然现在的 Ajax 框架很多，直接用就好了，但还是有必要了解一下它内部的实现机制。

促使 Ajax 产生的 Web 技术演化
隐藏帧技术
隐藏 iframe 技术

促使 Ajax 产生的 Web 技术演化

超文本和 URI
HTML
JavaScript
frame
隐藏帧技术（frameset）
DHTML 和 DOM
隐藏 iframe 技术
XMLHttp 和 XMLHttpRequest

超文本和 URI，通俗一点就是文本和链接，只是为了创建一个彼此关联的信息网，毕竟，当初它的产生只是了科技人员之间交流最新的科研成果。因此，第一版的 HTML 完全不能构建交互性很强的 Web 应用程序。

那么，接下来我们要做什么？显然，要增强 HTML 信息的格式化和显示能力。于是有了 JavaScript。开发人员第一次能够干预页面与用户之间的交互。在静态页面时代，没必要这样做，也做不了啊。没有 JavaScript，一切都要靠服务器端，即便是一些再简单不过的工作，比如验证用户输入。

接下来——帧（frame）。帧的理念是使一个页面能够分成几个独立的文档。而 HTML 最初版本是将每个文档都看作是独立的，直到 HTML 4.0 版，帧还没有被正式引入。试想，如果你在一个页面里嵌入一个 frame，而这个 frame 指向另一个页面，那么，当用户操作 frame 里边的页面给服务器，并获得服务器的响应后，将会发的内容嵌入到之前的页面。这就是一个异步啊——这还仅仅是个开始而已，离 Ajax 还远。

但有 frame 貌似还不够，要是能将 frame 组织起来就更好了。因此，隐藏帧技术是客户端/服务器端通信的一种有效工具。隐藏帧技术配置一个帧集（frameset）。隐藏帧技术是 Web 应用系统第一个异步请求/响应模型。然而这只是第一个 Ajax 通信模型，另一个技术的发展已经不远了。

直到1996年前后，Web 的主流还是静态页面。尽管 JavaScript 和隐藏帧技术能够使用户交互更具活力，但除了重新加载页面外，我们还没有改变页面内容显示的方法——DHTML 和 DOM。DHTML 使得开发人员能通过 JavaScript 修改已经载入页面的任何部分。将 DHTML 和隐藏帧技术结合起来，意味着可以随时根据服务器的信息来更新页面的任何部分，这才是Web开发一次真正的范型转变。与 DHTML 只追求修改页面的某个部分不同，DOM 的目标更加宏伟：为整个页面提供一个标准结构，对该结构的操作将使得修改 DHTML 风格的页面成为可能——这是向 Ajax 发展的下一个重要步骤。

隐藏帧技术实现了异步请求/响应，但它存在不足：必须提前计划，为可预见的隐藏帧设置帧集。1997年，<iframe/> 元素作为 HTML 4.0 官方标注的一部分，这是 Web 进化的另一个重要步骤。开发人员可以在页面的任何地方放置隐形的 iframe，更加灵活，不再定义帧集 frameset。这就是新一代的隐藏帧技术——隐藏 iframe 技术。

现在 HTML 和 DOM 有了，JavaScript 也有了，而且能够通过 JavaScript 在客户端操作 HTML；我们还有隐藏 iframe 技术（是这个异步模型，而不是隐藏 iframe 技术本身），那么还缺少什么？其实，也不缺了，只是麻烦了点而已。即便像你我都能看出其中的端倪，那微软的开发人员就更不用说了——XMLHttp。这个工具在2001年以 ActiveX 对象的形式引入。它是一个能够在 JavaScript 中控制特定的 HTTP 请求。可以独立与页面的载入/重载周期，使用纯 JavaScript 通过程序访问服务器，而不再需要使用隐藏帧或隐藏 iframe 技术。随着使用者越来越多，Mozilla 的开发人员开始移植 XMLHttp，为了避免使用 ActiveX，将它的主要方法和属性都复制到他们自己浏览器的 XMLHttpRequest 对象。现在越来越多的浏览器都现实 XMLHttpRequest 对象。

隐藏帧技术

例子1

本例演示隐藏帧技术实现的最简单的异步刷新。

<html>

<frameset cols="25%,50%,25%">

  <frame src="/example/html/frame_a.html">

  <frame src="/example/html/frame_b.html">

  <frame src="/example/html/frame_c.html">

<noframes>

<body>您的浏览器无法处理框架！</body>

</noframes>

</frameset>

</html>

说明：

上面代码是 W3school 给出的占线测试的一个简单例子。你会发现，当你改变一个 frame 的链接时，无论是手动，也就是直接改变链接，再点击“测试”，还是通过 JavaScript。整个页面都不会刷新，而只刷新框架内部。

假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。
为不支持框架的浏览器添加 <noframes> 标签。
不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。

例子2

本例演示隐藏帧技术。向服务器端发送 GET 请求。

新建页面 main.htm，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

</head>

<frameset rows="100%,0" frameborder="0">

    <frame name="displayFrame" src="display.htm" noresize="noresize" />

    <frame name="hiddenFrame" src="about:blank" noresize="noresize" />

</frameset>

</html>

新建页面 display.htm，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script type="text/javascript">   1:  
   2:         function requestEmpInfo() {
   3:             var obj = document.getElementById("txt_empno");
   4:             if (obj) top.frames["hiddenFrame"].location = "search.aspx?id=" + obj.value;
   5:         };
   6:     
</script>   1:  
   2:  
   3:     <script type="text/javascript">
   4:         function getEmpInfo(info) {
   5:             var obj = document.getElementById("div_empInfo");
   6:             if (obj) obj.innerHTML = info;
   7:         }
   8:     
</script>

</head>

<body>

<p>

        客户ID：

        <input type="text" id="txt_empno" value="7499" /></p>

<p>

        <input type="button" value="检索" onclick="requestEmpInfo()" /></p>

    <div id="div_empInfo">

    </div>

</body>

</html>

说明：

requestEmpInfo() 函数是根据文本框中的值，创建链接查询字符串，然后赋值给隐藏帧。"top" 对象可以获取浏览器顶级窗口，该对象返回一个 frame 数组。每个帧都是一个窗口对象，可以对其位置进行设置。
getEmpInfo() 函数是用来显示从隐藏帧获得检索到的员工信息。

新建页面 search.aspx，代码如下：

<%@ Page Language="C#" %>

<%@ Import Namespace="HiddenFrame" %>

<%@ Import Namespace="System.Data" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script type="text/javascript">   1:  
   2:         window.onload = function() {
   3:             var obj = document.getElementById("div_empHiddenInfo");
   4:             if (obj) top.frames["displayFrame"].getEmpInfo(obj.innerHTML);
   5:         };
   6:     
</script>   1:  
   2:  
   3:     <script runat="server">
   4:         protected void Page_Load(object sender, EventArgs e)
   5:         {
   6:             if (!IsPostBack)
   7:             {
   8:                 string id = Request.QueryString["id"].ToString();
   9:                 DataTable dt = HiddenFrame.DS.CreateEMPDataSource();
  10:                 DataRow[] dr = dt.Select("empno=" + id);
  11:  
  12:                 if (dr.Length > 0)
  13:                 {
  14:                     this.div_empHiddenInfo.InnerHtml = "员工ID：" + dr[0]["EMPNO"].ToString() + "<br />" +
  15:                                                     "员工姓名：" + dr[0]["ENAME"].ToString() + "<br />" +
  16:                                                     "职位：" + dr[0]["JOB"].ToString() + "<br />" +
  17:                                                     "生日：" + dr[0]["HIREDATE"].ToString() + "<br />" +
  18:                                                     "薪水：" + dr[0]["SAL"].ToString() + "<br />" +
  19:                                                     "部门：" + dr[0]["DEPTNO"].ToString() + "<br />";
  20:                 }
  21:                 else
  22:                 {
  23:                     this.div_empHiddenInfo.InnerHtml = "没有检索到员工编号为 <'" + id + "'> 的员工。";
  24:                 }
  25:             }
  26:         }
  27:     
</script>

</head>

<body>

    <form id="form1" runat="server">

    <div id="div_empHiddenInfo" runat="server">

    </div>

    </form>

</body>

</html>

自定义 DS 类如下：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Data;

namespace HiddenFrame

    public class DS

        public static DataTable CreateEMPDataSource()

            DataSet ds = new DataSet();

            ds.ReadXml(HttpRuntime.AppDomainAppPath + "\\" + "emp.xml");

            return ds.Tables[0];

自定义 XML 文件作为“数据库”：

<?xml version="1.0" standalone="yes"?>

<EMPS>

  <EMP>

    <EMPNO>7369</EMPNO>

    <ENAME>SMITH</ENAME>

    <JOB>CLERK</JOB>

    <MGR>7902</MGR>

    <HIREDATE>1980-12-17</HIREDATE>

    <SAL>800</SAL>

    <DEPTNO>20</DEPTNO>

  </EMP>

……

</EMPS>

本例运行界面如图所示。

本节旨在说明它的异步方式，至于如何使用，就不必了，毕竟隐藏帧技术现在已经基本不再使用。在这个问题上，估计做 UI 的人体会多些。我在原来公司时，最初的页面用得是 frameset，后来客户要求界面改版，新来的 UI 妹妹改用了 iframe，她说，用脚本控制页面自适应大小时，frameset 可能有问题，没有 iframe 好控制。下面说明隐藏 iframe 技术。

隐藏 iframe 技术

新建 main.htm 页面，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script type="text/javascript">   1:  
   2:         function requestEmpInfo() {
   3:             var obj = document.getElementById("txt_empno");
   4:             if (obj) top.frames["hiddenFrame"].location = "search.aspx?id=" + obj.value;
   5:         };
   6:     
</script>   1:  
   2:  
   3:     <script type="text/javascript">
   4:         function getEmpInfo(info) {
   5:             var obj = document.getElementById("div_empInfo");
   6:             if (obj) obj.innerHTML = info;
   7:         }
   8:     
</script>

</head>

<body>

<p>

        客户ID：

        <input type="text" id="txt_empno" value="7499" /></p>

<p>

        <input type="button" value="检索" onclick="requestEmpInfo()" /></p>

    <div id="div_empInfo">

    </div>

    <iframe src="about:blank" name="hiddenFrame" width="0" height="0" frameborder="0">

    </iframe>

</body>

</html>

新建 search.aspx 页面，代码如下：

代码与例子 2 的 search.aspx 页面相同。

说明：

你当然可以利用 JavaScrip 动态创建 iframe。
本例与例子 2 功能完全相同，只是少了一个页面。但是方便多了。

下载 Demo

相关阅读:
Struts2-result配置结果视图
 Struts2 -action处理业务请求
 struts 2
mvc模式
 vue之webpack安装配置vue
vue之webpack
文件上传
 LinkedList详解
 ArrayList详解
 HashMap详解
原文地址：https://www.cnblogs.com/liuning8023/p/2181964.html