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

IFrame和Ajax比较

2024-07-14 21:19:12   222人阅读

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

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


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

以上的说法是完全摘自百度百科的。但是从他们的描述来说他们好像完全是没有可比性的。但是我们完全可以用IFrame来实现类似Ajax的技术的，这非常的简单，而且在XmlHttpRequest 问世之前我们也确实是这样用的。下面我们通过一个简单的例子来模拟一下IFrame的远程脚本调用，这个示例并没有真正调用服务器，只是想让大家对如何使用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请求服务器的数据时，通常浏览器下面的状态栏中的进度条会像打开某个新的网页时在前进。如果设置了刷新报警音，电脑会发出“咔咔”的响声，这对用户来说可能感觉会比较烦，如果请求频繁，会使用户觉得烦躁。
         2）而用Ajax请求服务器的数据时不会出现上述情况。但实质上如果服务器的返回值大小是一样的，他们的速度上的差别是一样的。

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

         2）如果你想用不刷新的技术上传一个数据，那么无疑你一定要选择iframe。这是很多人通常用到的方法，这一点iframe一定是灵活而简单的。        
         用Ajax，通常你要写一堆声明的代码，总之会比较麻烦。但是，如果需要服务器进行复杂运算，而返回值是一个很简单结果，用Ajax一定是个不错的选择。

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

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

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

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


联系
我们