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的最大优势之中的一个。

以上是我粗略的比較了一下两者的不同,更深入的理解还须要大家在以后的项目中多多的实践。

时间: 2024-10-14 09:46:54

IFrame和Ajax比較的相关文章

浅谈iframe与ajax

在我们浏览的网页中,网页头部和网页脚部是不会根据页面主体内容的刷新而刷新的.为了达到只刷新页面主体内容部分,头尾不刷新的目的,我了解到的有两种方法,分别是iframe和ajax. 把你不需要刷新的页面部分用iframe标签包住就可以实现页面局部刷新,但是iframe也有浏览器兼容的问题,所以这个方法要慎用. 比如: <iframe width=  height= src=></iframe> 除了iframe这个方法外,还可以用ajax,这个是我个人极力推荐的一种. $().rea

iframe式ajax调用示例

1.新建 a.html <!doctype html> <html> <head> <meta charset='utf-8'> <title>iframe式ajax调用</title> </head> <body> <form action='b.php' method='post' name='' id='' target='formTarget'> <input type='text'

IFrame和Ajax比较

说到比较,可能我是需要把这连个东西都给大家介绍一下的,但是介于大家都已经有了很多的理解.我就简单的说了. Ajax: 是指一种创建交互式网页应用的网页开发技术.主要是利用XmlHttpRequest对象.该对象在 Internet Explorer 5 中首次引入,它是一种支持异步请求的技术.简而言之,XmlHttpRequest 使您可以使用 JavaScript 向服务器提出请求并处理响应,而不阻塞用户. IFrame: HTML标签,作用是文档中的文档,或者浮动的框架(FRAME). 以上

PHP服务器文件管理器开发小结(十):使用jQuery和iframe实现AJAX文件上传

上一节讨论了文件下载,这一节继续讨论文件上传. 众所周知,前端上传文件比较简单的办法就是使用文件控件<input type="file"/>.然而,如果我们需要上传过程是AJAX的,亦即上传过程不刷新页面,仅反馈需要的信息,那就需要更加精巧的设计了. 首先是上传文件图片链接: <li><a href="#" title="upload" onClick="onUploadFile()">&l

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

<!doctype html> <html> <head> <meta charset=utf-8> <head> <title>ajax 文件上传~~</title> </head> <script> window.onload=function(){ var form=document.getElementsByTagName('form')[0]; form.onsubmit=function

用iFrame模拟Ajax上传文件

前段时间在解决ajax上传文件时折腾了好一阵.直接用$.post上传文本信息肯定是没有问题的.但是$.post直接上传图片是不可行的. 后来看到网上的一些解决方案,有现成的ajax上传文件的封装的方法也有利用flash的.flash确实是个好方法 但是不是每个人都会flash的而且下载下来现成的方法要做修改也不是件易事,且文件相对较大.最后只好模拟iframe来实现.发现相当的简单.泌阳县马奇建材 html: <iframe name="ajaxUpload" style=&qu

利用 iframe解决ajax的跨域问题

问题 1. form提交或a标签跳转方式提交不会引发跨域问题. 2. ajax出于安全问题就有了跨域问题,因为一次请求中既访问了外部域最后返回了自己的域. 3. 用iframe其实就是想仿照ajax的效果,把form请求提交到iframe里就不会将当前页面跳转,到后台处理业务访问其他域的资源,然后往页面回写JavaScript脚本的方式返回信息. 前台 触发链接 <a class="weui_btn weui_btn_primary" id="toLoan"&

iframe中有ajax,设置iframe自适应高度

------------------------------------------------------------------- http://www.jb51.net/article/15780.htm http://www.jb51.net/article/48936.htm http://bestchenwu.iteye.com/blog/1231956 在iframe外添加此js,以下两个都可以 ------------1---------------------------- f

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

在某些应用场景下,需要在主域中,调用子域中的某个接口,如果直接在主域中向子域发ajax请求,会报跨域错误,可以用iframe来解决这种跨域问题.假如主域为www.baidu.com,子域为baike.baidu.com.主域中的A页面需要通过ajax请求调用子域中的某项服务.首先需要在子域中准备一个B页面,B页面就是一个简单的空页面,最好把jquery引到B页面中,这样可以直接用jquery发ajax请求:在主域的A页面中要用iframe把B页面url地址引过来. B页面格式 1 //B.htm