首页 > 代码库 > IFrame和Ajax比較

IFrame和Ajax比較

2024-07-25 11:44:24   224人阅读

         说到比較，可能我是须要把这连个东西都给大家介绍一下的，可是介于大家都已经有了非常多的理解。我就简单的说了。

Ajax：
            是指一种创建交互式网页应用的网页开发技术。主要是利用XmlHttpRequest对象。该对象在 Internet Explorer 5 中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest 使您能够使用 JavaScript 向server提出请求并处理响应，而不堵塞用户。


IFrame：
            HTML标签，作用是文档中的文档，或者浮动的框架(FRAME)。

以上的说法是全然摘自百度百科的。可是从他们的描写叙述来说他们好像全然是没有可比性的。可是我们全然能够用IFrame来实现类似Ajax的技术的，这很的简单，并且在XmlHttpRequest 问世之前我们也确实是这样用的。以下我们通过一个简单的样例来模拟一下IFrame的远程脚本调用，这个演示样例并没有真正调用server，仅仅是想让大家对怎样使用IFrame实现远程脚本调用有所认识。


IFrame.html文件：

<span style="font-size:18px;"><html> 
<head> 
	<title>Example of remote scripting in an IFRAME</title> 
</head> 
<script type="text/javascript"> 
	function handleResponse() { 
		alert('this function is called from server.html'); 
	} 
</script> 
<body> 
<h1>Remote Scripting with an IFRAME</h1> 
	<iframe id="beforexhr" 
	name="beforexhr" 
	style="width:0px; height:0px; border: 0px" 
	src=http://www.mamicode.com/"blank.html"></iframe> >
server.html文件
<span style="font-size:18px;"><html> 
<head> 
<title>the server</title> 
</head> 
<script type="text/javascript"> 
	window.parent.handleResponse(); 
</script> 
	
<body> 
	<a href=http://www.mamicode.com/"serverl.html" target="beforexhr">call the server >
        执行这个代码，你会看到弹出的提示框：‘this function is called from server.html‘

        这个样例中我们全然实现了远程的脚本调用，这似乎和ajax在做相同的事情，但两者有什么差别呢。

        1.首先我们想说的也是大家都普遍知道的一点就是ajax最大的特点——异步通信。


         1）用iframe请求server的数据时，通常浏览器以下的状态栏中的进度条会像打开某个新的网页时在前进。假设设置了刷新报警音，电脑会发出“咔咔”的响声，这对用户来说可能感觉会比較烦，假设请求频繁，会使用户认为烦躁。
         2）而用Ajax请求server的数据时不会出现上述情况。但实质上假设server的返回值大小是一样的，他们的速度上的区别是一样的。

         2.从功能上来说:
         
         1）iframe包括了一个整个网页，通常，在布局网页的时候，我们常常要用到它。这样会使网页的制作显得非常自然并且方便管理。
        Ajax一般是在网页中某个小部分须要改变的时候用到的，它在改变网页内容的时候高速而静止。在须要改变网页上几个字的时候，我们一般不用iframe。 

         2）假设你想用不刷新的技术上传一个数据，那么无疑你一定要选择iframe。这是非常多人通经常使用到的方法，这一点iframe一定是灵活而简单的。        
         用Ajax，通常你要写一堆声明的代码，总之会比較麻烦。可是，假设须要server进行复杂运算，而返回值是一个非常easy结果，用Ajax一定是个不错的选择。

          3.两者各自存在的问题：
          到如今ajax碰到的两个比較大的问题是
         1）中文乱码，这个貌似是编码的问题，基本上可以解决，可是在某些比較低版本号的浏览器中还是会出现一些问题

         2）跨域post提交数据，这个貌似没有办法直接实现，仅仅能通过代理或其它方式来实现

           而这两个问题iframe基本都不会碰到，可是iframe的问题在于
           1）你想同一时候进行多少个请求，就必须建立多少个iframe～否则无法同一时候进行。

           2）iframe的方式处理的是iframe页面的内容，交互成功的触发方式主要靠。
            a)页面定时读取页面载入状态：这样的方式方式必定导致对client资源的较多占用。              
            b)iframe触发父页面的事件：这样的方式导致返回数据的添加，并且必须保证父页和框架页的变量和方法的统一。（我们上面的样例就是使用的这样的方式）而这点上面，ajax交互过程中只返回所须要的数据(xml或者text)，这个是ajax相比iframe的最大优势之中的一个。
        以上是我粗略的比較了一下两者的不同，更深入的理解还须要大家在以后的项目中多多的实践。




IFrame和Ajax比較


联系
我们