有IFrame，我们干吗还要用Ajax？

Ajax现在很火的，它的用途大家都知道，但你知道不？表面看Ajax页面没有刷新，其实它是刷新了整个页面的，只是看不到而已，不信，打开Vs的ＩＤＥ，跟踪一下就知道了。

其实网页局部刷新，完全可以不用Ａｊａｘ那么复杂的东西，利用IFrame 就可以了。下面我给他大家一个测试代码：

网页index.htm，客户端测试网页，

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Ajax模拟文件</title>

</head>

<body>

<br>
有了它，我们干吗还要用Ajax？
<span id="spanTrue">spanTrue</span>

<script language="javascript">
//通用函数，请求服务器文本
function GetServerText(RequestUrl)
{
if(!window.spanIFrame)
{
var spanIFrame=document.createElement("span");
spanIFrame.id="spanIFrame";
spanIFrame.innerText="";
spanIFrame.style.display="none";
document.body.appendChild(spanIFrame);
}

if(!window.IFrameRequest)
{
var IFrameRequest=document.createElement("iframe");
IFrameRequest.id="IFrameRequest";
IFrameRequest.src=RequestUrl;
IFrameRequest.style.display="none";
document.body.appendChild(IFrameRequest);

}
else
{
window.IFrameRequest.location.reload();
}
return window.spanIFrame.innerText;

}

//客户端方法，自己定义刷新那个控件，多少时间。
function ShowServerTime()
{
spanTrue.innerText=GetServerText("remote.asp");
window.setTimeout("ShowServerTime();",1000);
}

ShowServerTime();
</script>

</body>

</html>

网页remote.asp，很简单，就是一个显示服务器时间的程序。

<script language="javascript">
function setParentObjValue(objName,setValue)
{
window.parent.document.getElementById(objName).innerText=setValue;
}
setParentObjValue("spanIFrame","<%=Time%>");
</script>
其中　spanIFrame　就是客户端创建的一个标记而已。这样就把服务器端的内容返回到客户端了。

是不是很简单啊？那我们干嘛还要用Ａｊａｘ呢？如果你的网页无刷新需求很简单，完全没有必要再用Ajax了。

59 个解决方案

#1

不能这么说，首先，如果需求复杂一点，iframe并不见得容易处理
其次，为了无刷新而引入iframe，可能会破坏页面的布局，而且是完全没必要的

#2

回楼上的兄弟:
1,使用通用函数 GetServerText(RequestUrl),只需要指定你要请求的Url即可,那里需要哪里调用,复杂性不是问题;
2,iframe没有指定大小,而且 style.display="none",也只需要一个iframe 而已，所以不会破坏页面的布局。

#3

使用XmlHttp，必须要求是IE，而且安装了MSXML组件，而且，有的浏览器安全性限制可能不允许使用该组件，相对而言，iframe，兼容性就好很多。

#4

大情况下ajax会灵活点，但有些功能是iframe才能实现。

#5

很容易想到的一点就是
iframe在取数据的时候会让浏览器状态栏出现进度条

#6

iframe 用起来很恐怖的，尤其是有大量脚本控制时

#7

mark

#8

告诉你一个iframe做不到的情况:
iframe里有个按钮或图片之类的HTML对象,要把它移到父窗口中来, 要把所有属性都取得, 包括事件等,做到你就牛了

#9

bluedoctor()
使用XmlHttp，必须要求是IE，而且安装了MSXML组件，而且，有的浏览器安全性限制可能不允许使用该组件，相对而言，iframe，兼容性就好很多。

.................
不能为了用jFrame就这么说丫
和楼上说得一样 iframe之间传值比较讨厌

#10

回楼上的几位兄弟:
iframe 虽然主页面不能直接访问，但是可以在iframe页面里通过window.parent方式访问主页面的内容阿，你把iframe 页面的东西传递过去即可。

#11

也许楼主所弄的就是AJAX。

#12

或者说，你的会听到不停的嘀嘀的声音，而AJAX不会。

#13

回楼上：我的测试怎么没有听到“嘀嘀”的声音呢？

#14

呵呵,俺不会用Ajax,只会用IFrame.

#15

看完楼主的代码，faint死……

楼主的代码是用了AJAX，但是仅仅是AJAX中一个最极端的特例，也就是重新请求整个页面的代码。你想想注册表单上验证用户名是否已被使用的例子，那需要请求整个注册表单吗？传到服务器的只是当前用户填写的用户名，而服务器传回来的最简单可以就一个0或1，表示该用户名是否已被使用，这时候传输效率是不是比IFrame高呢？

#16

xmlhttpRequest .....。。。貌似这个很多人都不知道？？

#17

回cat_hsfz:
我把需要在客户端刷新的内容都在服务器段做成一个服务,这些服务可以是好多不同的url,服务程序执行的结果只是生成如 setParentObjValue("spanIFrame","<%=Text%>");即可.其它的内容都没有必要再显示了,甚至<html>这样的标记都不必写，所以多这一点点子节效率也不低的。

#18

另外，如果我的机器不把站点设置成安全/可信任的站点，XmlHttpRequest根本就不允许使用的。而使用IFrame没有这个问题。

#19

IFrame是不错的东西，
AJAX比较复杂，可以实现一些复杂的应用。
如果只是无刷新，AJAX就是大才小用了吧

#20

你一定要这样做我也没办法，但我只能说是“使用了AJAX基础技术却没有领会到AJAX的思想”，也就是为了技术而技术。

AJAX不是为了“无刷新”，单纯追求无刷新是没有意义的，除了“看起来很cool”还有什么好处吗？正如你所说，那还不如IFrame。AJAX是为了提高效率，改善用户体验，而你的AJAX使用方法没有做到这两点，仅仅是做到了“看起来很cool”，那是没意义的。

当然，你会说这个方法通用，嗯……让开发者方便的实现方式，通常都是对最终用户不友善的。

#21

谁说ajax只会做无刷新了，~
自动完成效果iframe怎么做？

#22

回楼上的几位兄弟:
iframe 虽然主页面不能直接访问，但是可以在iframe页面里通过window.parent方式访问主页面的内容阿，你把iframe 页面的东西传递过去即可。
===============================================================

你试下能不能实现我说的功能, 呵呵

#23

应该这样说：有了Ajax我们干吗还要用iframe？

#24

楼上的各位说得都有道理啊,呵呵大家没有注意我在开篇说得我这个说法的前提:
"如果你的网页无刷新需求很简单，完全没有必要再用Ajax了。"

#25

这个....ajax还有一个优势是在和服务器异步通讯方面,这个iframe恐怕不行了吧....

#26

以前还不会(也没听说过)ajax 的时候，就是用iframe 定时刷或者做请求，浏览器会在下面刷一下，我们老板不喜欢。ajax不会，所以觉得是好东西-_-||

#27

to:goodloop
我的测试好像不会吧？兄弟你测试一下看看？
回到完这个问题就结贴。

#28

一句话！这不比ajax更难用！！

#29

汉啊!

#30

另外，如果我的机器不把站点设置成安全/可信任的站点，XmlHttpRequest根本就不允许使用的。而使用IFrame没有这个问题。
=======
你自己机器问题吧。。。或者你是win 2003?

XP下IE默认安全级别是允许使用activex的

#31

是啊,现在很多人都用2003了。

#32

几乎所有的情况下,通过使用一个没有显示的IFrame传送数据,完全能实现ajax的功能,性能上、容错性上要好一些，但是代码有些“丑陋”，在没有ajax之前，我用IFrame,现在差不多5-5分，因为用iframe,直接传送一段Java Script脚本，简单明了...

#33

xmlHttpRequest 是异步的，IFrame是同步的。就算document.createElement('IFrame')也是同步的，因为你不能让两个IFrame同时访问。xmlHttpRequest可以让两个Request并发访问。

#34

〉通过使用一个没有显示的IFrame传送数据,完全能实现ajax的功能

不可能，上面讲的同步是个问题，此外

iframe会执行代码，ajax只是获取文本资源，并不执行里面可能存在的脚本代码，怎么可能会效果一样，而且假如我要访问的东西如果在另一个domain上，我只不过想把它上面的<html>代码里面的部分内容偷过来，用到我的网页上。ajax可以解析responseText，但是iframe由于跨域的原因，我的domain的script不可能访问iframe的document

如果能，请告知

#35

同样ajax也不可能全部替代iframe，否则gmail也不会用iframe上传附件了

#36

各有千秋。

#37

回shine333(enihs) ( )
ajax是Java Script的应用，在IE进程之下，所谓的同步、异步的概念没有什么意义，使用多个Iframe，同时完成多个请求，可以理解为“异步”

iframe 是基于 IE 进程的，其返回的东西直接执行， ajax返回的东西通过设定的函数执行，两个并无区别-----如果ajax只需返回数据，不处理数据，那么iframe也可以那样做

ajax提供了一个事件机制，对于关心事件状态的应用来说，很方便。

#38

跨域的问题:未测试,按照介绍文档,出于安全考虑,ajax 和iframe都是不跨域的?

#39

to ok1234567(ok1234567)

>iframe 是基于 IE 进程的，其返回的东西直接执行， ajax返回的东西通过设定的函数执行
当然有区别，我不是后面举例子了吗，你去偷人家的页面，而人家这个被偷的页面，要执行很多onload代码，ajax悄悄地进村，打枪的不要，直接无视那些script，而你的iframe呢，会出现怎么样的结果？你的script由于跨域，无法操作跨域内容，你倒是用iframe写个下面的内容

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE></TITLE>

<script>
function steal() {
  xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
  xmlHttpRequest.open("POST", "http://www.google.com", true); // Mind the HTTP method here
  xmlHttpRequest.onreadystatechange = function() {
    if (xmlHttpRequest.readyState == 4) {
      txtarea.value = xmlHttpRequest.responseText;
    }
  }
  xmlHttpRequest.send(null);
}
</script>
</HEAD>

<BODY>
<textarea id="txtarea" cols="50" rows="20"></textarea>
<input type="button" value="STEAL" onclick="steal()">
</BODY>
</HTML>

还有，更底层的和脚本无关，却和HTTP协议有关的内容。
<iframe/frame/img/script src=""><a href="">访问的资源都是HTTP GET，而ajax可以指定
open的第一个参数，使用GET/POST/HEAD/OPTION....等各种不同的HTTP method，千万千万千万别告诉我GET和HEAD是一样的

#40

举个head的例子，

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<script>
  function testSize() {
    xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
    xmlHttpRequest.open("HEAD", "http://download.verycd.com/eMule/eMule-0.47c-VeryCD1215-Setup.exe", true); // Mind the HTTP method here
    xmlHttpRequest.onreadystatechange = function() {
    if (xmlHttpRequest.readyState == 4) {
      alert(xmlHttpRequest.getResponseHeader("Content-Length") + "字节");
    }
  }
  xmlHttpRequest.send(null);
  }
</script>
</HEAD>

<BODY>
  <input type="button" value="检测文件大小" onclick="testSize()">
</BODY>
</HTML>

#41

将ajax用于steal之类的应用，我没有研究，无权发表议论
在正常的业务应用中，两者差不多（在我涉及的有限的使用范围）
我总以为，如果要“偷”别人的东西，客户端脚本的能力非常有限

#42

所以，假如你涉及的Web应用的范围还不够广的时候，还是不要随便起这样的标题，妄下定论嘛。你可以仔细想想，FRAME最晚在97年就已经出来了，用0-size的frame来实现“页面不刷新”的方式至迟在00年也出现了，但为什么广大用户还在忍受着访问->等待->填写->提交->再等待->再填写->再等待这样的world wide wait？就是因为通过隐藏(i)frame方式实现很多功能时，还比较麻烦，而且非常费时费力，甚至mission impossible.

当然，ajax也不是万能的，我们要做的就是选用最合适的技术，达到最佳性（运行效率，用户评价）/价（开发成本，时间）比

#43

我的理解， ajax提供一种方便的快餐式的b/s交互手段，在需要使用的时候，合理地使用，可以提供开发效率，增强用户体验。从道理上说，ajax的内涵不会超出JavaScript,也就是说，深入研究JavaScript,可以自己动手做出bjax,cjax:)

以我的眼界：在“普通的”的网站设计开发中，如果可以不使用iframe 和ajax,最好不要使用，那些由服务器程序返回的“简单”的html页面，总是最美的、最经典的，当然开发起来也是最难的

ps:我很崇拜shine333(enihs),对于ajax做了那么深入的研究,有时间,我也要好好学学

#44

在没有 ajax的年代,我们用iframe做数据交互,在有了ajax之后,两者并用,ajax提高了开发效率代码更好看,一定程度上平衡了服务器和浏览器之间的负载...为什么要拒绝它呢?!
当然这些好事情;不是没有代价的:
1\你要学习一种新的应用开发
2\可能遭遇更多的兼容性问题
3\更多的异常...
4\对于习惯的浏览器的操作模式的变迁,比如:后退

#45

悲哀呀！不知道在座的评论Ajax的弟兄们有多少真正用过或者说会用Ajax的？

我的原则是，不了解一个事物的时候，就不要拿别的东西和他比较。因为这样的比较会让别人耻笑。

无论是楼主提到的无刷新还是各位提到的效率，说白了都是为了提高客户体验。但是大家应该明白，客户体验和性能往往是矛盾的关系。很多情况下，客户体验的提高，对于性能上会造成很大的负担。例子就是window live mail 和live messenger，它的界面和功能应该说比其他的同类好很多，但是性能又有哪个使用者敢恭维呢？

当然我这里不是批评这两款产品，相反我认为他们在给客户提高用户体验的同时已经做到了效率的最优化。只不过为了现在的体验而不得已造成了性能的下降。

像楼主提到的页面无刷新提交，提高客户体验的方法方式有很多，但不都是合理的。在达到同样效果的同时，应该兼顾很多方面，比如性能，以及开发成本等等。

你说的iframe相比ajax的这种相对优势，在.net领域恐怕就不太适用。.net的页面，每个页面都有自己的一个类，调用这个页面就会实例化一个类，而如果一个页面有不同的地方需要异步提交，用你的方法恐怕就得在一个页面上嵌入N个iframe，而每个iframe中对应一个页面。那就相当于打开一个页面的时候实例化N个类，这种方式恐怕是.net程序员最怕的方式了。因为每个页面类的实例化都会造成服务器的预编译。会给服务器造成极大的负担。当然有很多方式可以缓解或避开这些负担，但是这些方法都是工作量，而且这些方法都无法避免实例化多个类。

ajax如果你会用的话，就会发现它并不复杂。他把服务器端和客户段的数据联系的非常紧密。几乎可以做到权限允许下的无缝。而且使用ajax技术后，在.net程序开发的时候，可以把多个页面的类合并到一个ajax逻辑类中。即把ajax逻辑作为一个层来调用。这样来看的话，无论从程序构架，和执行效率以及代码的维护上来看。都做到了优化，而且可以达到近乎完美的客户体验。

这样来看，ajax和iframe只是实现一个目的的两个方式而已。可谓殊途同归，究竟哪条路在实际项目应用中更近，就要具体情况具体分析了。

#46

IFRAME加载太慢

#47

楼主可以用iframe 做一个类似gmap或者mapbar之类的地图，等待你的好消息

#48

ajax不只是ie吧……
firefox都支持的，只是加载对象不一样了
xmlreq = new XMLHttpRequest();//firefox

xmlreq = new ActiveXObject("Microsoft.XMLHTTP");//IE

#49

to hanpoyangtitan(韩波洋) ( )

楼主可以用iframe 做一个类似gmap或者mapbar之类的地图，等待你的好消息

-----------------

道理上说，是没有问题的

无论iframe 、ajax 或者是其他的交互技术，
从web server那里看可以说毫无区别：响应请求而已。ajax与某些开发方式进行了接口对接，开发起来更简单，更少关注技术细节
从browser那边看来，都是进程内的请求和处理。ajax提供了许多例行的数据处理方式，而iframe下得自己动手，就算不能丰衣足食，也不至于饿死

web 2.0概念主要为炒作
在没有 ajax的时候，同样功能的实现在互联网上并不少见

一个被吹嘘得太厉害的东西，使部分人产生反感太正常不过了:)

#50

楼主错了，iframe怎么都是基于HTTP GET方式，获取以text/html为主的文本内容，而ajax可以全部处理完全与HTML无关的，纯粹数据的内容。

比如，你做个电子地图，点了某个坐标，要访问服务器，服务器根据坐标，传回一段二进制数据(比如image/jpeg)，你iframe怎么处理？

而且
>从web server那里看可以说毫无区别：响应请求而已。
说明您还没有看懂我举的head的例子的区别，GET方式是最常用、最好用，但也是最愚笨的一种处理方式。上面那个testSize的方式，你iframe即使能做，也要整个把32M文件从服务器上取下来（如果不写专门程序的话），而HEAD方式根本不会传递文件内容，而只是它文件类型、大小、路径之类的几百个字节的信息，怎么会"从web server那里看可以说毫无区别"

#1