IFrame和Ajax比較
说到比較,可能我是须要把这连个东西都给大家介绍一下的,可是介于大家都已经有了非常多的理解。我就简单的说了。
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比較的更多相关文章
- iframe式ajax调用示例
1.新建 a.html <!doctype html> <html> <head> <meta charset='utf-8'> <title&g ...
- iframe仿Ajax上传文件
利用iframe框架完成文件上传 前端页面 <!doctype html> <html lang="en"> <head> <meta c ...
- 黄聪:利用iframe实现ajax 跨域通信的解决方案(转)
原文:http://www.cnblogs.com/xueming/archive/2013/02/01/crossdomainajax.html 在漫长的前端开发旅途上,无可避免的会接触到ajax, ...
- iframe式ajax调用
1.新建 a.html <!doctype html> <html> <head> <meta charset='utf-8'> <title&g ...
- 利用 iframe解决ajax的跨域问题
问题 1. form提交或a标签跳转方式提交不会引发跨域问题. 2. ajax出于安全问题就有了跨域问题,因为一次请求中既访问了外部域最后返回了自己的域. 3. 用iframe其实就是想仿照ajax的 ...
- iframe实现Ajax文件上传效果示例
<!doctype html> <html> <head> <meta charset=utf-8> <head> <title> ...
- iframe和ajax文件上传方法
为什么使用这两种方法文件上传呢,主要是因为局部刷新问题 上传问题,主要是使用form表单,或者用请求一个文件上传 iframe 大多网站都是有一个整体的固定结构,然后进行局部刷新,我们可以使用AJAX ...
- iframe解决ajax主域和子域之间的跨域问题
在某些应用场景下,需要在主域中,调用子域中的某个接口,如果直接在主域中向子域发ajax请求,会报跨域错误,可以用iframe来解决这种跨域问题.假如主域为www.baidu.com,子域为baike. ...
- Django之基于iframe的ajax伪造
IFRAME是HTML标签,作用是文档中的文档,或者浮动的框架(FRAME).iframe元素会创建包含另外一个文档的内联框架 ajax的理念是不进行浏览器页面刷新的信息获取更新,也就是局部刷新. 那 ...
随机推荐
- [scrapy] spider object has no attribute '_rules'
这是因为__init__方法没有继承父类 解决办法: # -*- coding:utf-8 -*- from selenium import webdriver from scrapy.contrib ...
- ipython notebook install
1.python install (ubuntut系统默认2.7.x) Github: https://github.com/ipython/ipython 2.sudo apt-get instal ...
- 【HNOI2008】玩具装箱
P教授要去看奥运,但是他舍不下他的玩具,于是他决定把所有的玩具运到北京.他使用自己的压缩器进行压缩,其可以将任意物品变成一堆,再放到一种特殊的一维容器中.P教授有编号为1...N的N件玩具,第i件玩具 ...
- 洛谷——P1327 数列排序
P1327 数列排序 题目描述 给定一个数列{an},这个数列满足ai≠aj(i≠j),现在要求你把这个数列从小到大排序,每次允许你交换其中任意一对数,请问最少需要几次交换? 输入输出格式 输入格式: ...
- hihocoder1069 最近公共祖先·三(tarjin算法)(并查集)
#1069 : 最近公共祖先·三 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 上上回说到,小Hi和小Ho使用了Tarjan算法来优化了他们的“最近公共祖先”网站,但是 ...
- Jenkins一个任务下载多个git库代码
公司的项目是微服务架构,一个服务对应的一个git仓库,现在的需求时拉取所有仓库代码下来,指定父级的pom.xml,一次性构建打包 jenkins在默认情况下,一个任务只能配置一个git仓库地址 1.安 ...
- [BZOJ 2208] 连通数
Link: BZOJ 2208 连通数 Solution: 传递闭包模板题 传递闭包是集合中最小的二元关系,其实就是对二元关系的不断拓展,一般用$floyd$求解 这里要先跑一遍$tarjan$求出$ ...
- 自定义数据类型写入SequenceFile并读出
开头对这边博客的内容做个概述,首先是定义了一个DoubleArrayWritable的类,用于存放矩阵的列向量,然后将其作为value写入SequenceFile中,key就是对应的矩阵的列号,最后( ...
- iOS使用CoreData实现收藏功能
一般做收藏都是使用数据库或者归档,使用CoreData实现收藏功能就是没事时练一下,实现大概和数据库差不多. 首先创建一个工具类继承NSObject,在里面实现所需要的方法. 工具类的.h文件: ty ...
- JAVA 按时间排序
排序使用的是 Collections.sort(List,Comparator) 自定义类实现Comparator接口 假如A的值大于B,你返回1.这样调用Collections.sort()方法就是 ...