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

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="blank.html"></iframe>

<a href="serverl.html" target="beforexhr">call the server</a>

</body>

</html> </span>

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="serverl.html" target="beforexhr">call the server</a>

</body>

</html> </span>

执行这个代码，你会看到弹出的提示框：'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比較的更多相关文章

  1. iframe式ajax调用示例

    1.新建 a.html <!doctype html> <html> <head> <meta charset='utf-8'> <title&g ...

  2. iframe仿Ajax上传文件

    利用iframe框架完成文件上传 前端页面 <!doctype html> <html lang="en"> <head> <meta c ...

  3. 黄聪：利用iframe实现ajax 跨域通信的解决方案（转）

    原文:http://www.cnblogs.com/xueming/archive/2013/02/01/crossdomainajax.html 在漫长的前端开发旅途上,无可避免的会接触到ajax, ...

  4. iframe式ajax调用

    1.新建 a.html <!doctype html> <html> <head> <meta charset='utf-8'> <title&g ...

  5. 利用 iframe解决ajax的跨域问题

    问题 1. form提交或a标签跳转方式提交不会引发跨域问题. 2. ajax出于安全问题就有了跨域问题,因为一次请求中既访问了外部域最后返回了自己的域. 3. 用iframe其实就是想仿照ajax的 ...

  6. iframe实现Ajax文件上传效果示例

    <!doctype html> <html> <head> <meta charset=utf-8> <head> <title> ...

  7. iframe和ajax文件上传方法

    为什么使用这两种方法文件上传呢,主要是因为局部刷新问题 上传问题,主要是使用form表单,或者用请求一个文件上传 iframe 大多网站都是有一个整体的固定结构,然后进行局部刷新,我们可以使用AJAX ...

  8. iframe解决ajax主域和子域之间的跨域问题

    在某些应用场景下,需要在主域中,调用子域中的某个接口,如果直接在主域中向子域发ajax请求,会报跨域错误,可以用iframe来解决这种跨域问题.假如主域为www.baidu.com,子域为baike. ...

  9. Django之基于iframe的ajax伪造

    IFRAME是HTML标签,作用是文档中的文档,或者浮动的框架(FRAME).iframe元素会创建包含另外一个文档的内联框架 ajax的理念是不进行浏览器页面刷新的信息获取更新,也就是局部刷新. 那 ...

随机推荐

  1. （八）for语句

    (1)语法 (2)批量ping主机 这里有个重点就是把每次ping主机的动作放到后台运行 #!/bin/bash >ip.txt for i in {1..254} do ip=192.168. ...

  2. python redis使用方法

    一.mac 下redis安装 1.brew安装redis brew install redis 2.启动redis服务器 brew services start redis 或者 redis-serv ...

  3. 18、Django实战第18天：课程机构收藏功能

    这里点击"收藏"也是ajax异步操作,我在operation.model.py中创建了一个用户收藏表,其中fav_id字段,如果我们收藏的是课程,那就是课程id,如果收藏的是课程机 ...

  4. 树莓派编译nginx，支持rtmp直播

    树莓派3B+ 系统更新至最新 下载依赖 sudo apt-get update sudo apt-get install libxslt1-dev libgd-dev libgeoip-dev lib ...

  5. 【莫队算法】URAL - 2080 - Wallet

    http://www.cnblogs.com/icode-girl/p/5783983.html 要注意卡片没有都被使用的情况. #include<cstdio> #include< ...

  6. 【数论】【欧拉函数】bzoj2190 [SDOI2008]仪仗队

    由图可知,一个人无法被看到时,当且仅当有 人与原点 的斜率与他相同,且在他之前. ∴一个人可以被看到,设其斜率为y/x,当且仅当y/x不可再约分,即gcd(x,y)=1. 考虑将图按对角线划分开,两部 ...

  7. 【暴力】bzoj3713 [PA2014]Iloczyn

    没什么好说的. #include<cstdio> using namespace std; typedef long long ll; ]; int main() { scanf(]=; ...

  8. 【KMP】BZOJ3670-[Noi2014]动物园

    [题目大意][依然借用别人的概括]给定一个长为L的字符串(L<=100W),求一个num数组,num[i]表示长度为i的前缀中字符串S’的数量,其中S‘既是该前缀的前缀也是该前缀的后缀,且|S' ...

  9. Mapper动态代理开发

    在开发的过程中只需要写Dao层的借口,无需写其实现类,实现类有框架自己补充. 框架是根据mapper文件自动补充的,因此需要满足下面四个条件 Mapper接口开发需要遵循以下规范: Mapper.xm ...

  10. MetaWeblog是什么

    MetaWebBlog API(MWA)是一个Blog程序接口标准,允许外部程序来获取或者设置Blog的文字和熟悉.他建立在XMLRPC接口之上,并且已经有了很多的实现. 所以现在很多博客系统都支持这 ...