您的位置：首页 > 其它

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

2011-09-20 00:10 232 查看

本文内容

虽然现在的 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 本例演示隐藏帧技术实现的最简单的异步刷新。

[code][code]<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>

[/code]
[/code]

说明：

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

假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。

为不支持框架的浏览器添加 <noframes> 标签。

不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。

例子2

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

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

[code]
[code]<!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>

[/code]
[/code]

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

[code]
[code]<!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"> 
function requestEmpInfo() {
var obj = document.getElementById("txt_empno");
if (obj) top.frames["hiddenFrame"].location = "search.aspx?id=" + obj.value;
};
</script>
 
 
<script type="text/javascript">
    function getEmpInfo(info) {
   var obj = document.getElementById("div_empInfo");
   if (obj) obj.innerHTML = info;
}
</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>

[/code]
[/code]

说明：

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

getEmpInfo() 函数是用来显示从隐藏帧获得检索到的员工信息。

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

[code]
[code]<%@ 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"> 
    window.onload = function() {
   var obj = document.getElementById("div_empHiddenInfo");
   if (obj) top.frames["displayFrame"].getEmpInfo(obj.innerHTML);
};
</script>
 
 
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
{
   if (!IsPostBack)
   {
  string id = Request.QueryString["id"].ToString();
  DataTable dt = HiddenFrame.DS.CreateEMPDataSource();
  DataRow[] dr = dt.Select("empno=" + id);
 
  if (dr.Length > 0)
  {
 this.div_empHiddenInfo.InnerHtml = "员工ID：" + dr[0]["EMPNO"].ToString() + "<br />" +
   "员工姓名：" + dr[0]["ENAME"].ToString() + "<br />" +
   "职位：" + dr[0]["JOB"].ToString() + "<br />" +
   "生日：" + dr[0]["HIREDATE"].ToString() + "<br />" +
   "薪水：" + dr[0]["SAL"].ToString() + "<br />" +
   "部门：" + dr[0]["DEPTNO"].ToString() + "<br />";
  }
  else
  {
 this.div_empHiddenInfo.InnerHtml = "没有检索到员工编号为 <'" + id + "'> 的员工。";
  }
   }
}
</script>

 


</head>


<body>


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


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


</div>


</form>


</body>


</html>

[/code]
[/code]

自定义 DS 类如下：

[code]
[code]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];


   }


}


}

[/code]
[/code]

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

[code]<?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>

[/code]

本例运行界面如图所示。





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

 

隐藏 iframe 技术
新建 main.htm 页面，代码如下：

[code]<!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"> 
function requestEmpInfo() {
var obj = document.getElementById("txt_empno");
if (obj) top.frames["hiddenFrame"].location = "search.aspx?id=" + obj.value;
};
</script>
 
 
<script type="text/javascript">
    function getEmpInfo(info) {
   var obj = document.getElementById("div_empInfo");
   if (obj) obj.innerHTML = info;
}
</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>

[/code]

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

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

说明：

你当然可以利用 JavaScrip 动态创建 iframe。

本例与例子 2 功能完全相同，只是少了一个页面。但是方便多了。

 

下载 Demo
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航