谈谈使用iFrame模拟Ajax的问题

几年之前，那个时候Ajax还没有出现（或者说还没有像现在这么火），为了实现向服务器端提交数据而不刷新页面的效果，大多数采用的就是这种隐藏iFrame的方法。下面就简要介绍一下这个方法：

 

1、处理思路：

假设FormA是我们要提交数据的Form，正常来说，向服务端提交数据后，返回的response会刷新当前的Form，也就是页面会刷新一下，但是如果我们将form的target设置到另外一个iframe中，那么刷新的就是target的那个iframe。这种方法其实在一些菜单树的设计上也使用过。同时为了让用户觉察不到iframe的刷新，就需要将这个作为target的iframe隐藏起来。

 

2、代码实现：

写个代码说明一下：

< form id ="wfAuditForm" method ="post" enctype ="multipart/form-data"  target="hiddenIframe">
< input type ="file" name ="posterUrlUploadPath" id ="posterUrlUploadPath" class ="fileUpload" title ="上传图片" />

<iframe style="position: absolute, top: -1000px, left: -1000px'" id="hiddenIframe"/>

有的时候，我们需要根据返回的数据来更新某些页面元素的值（类似于ajax的success方法），这个时候该怎么办呢？也好办。既然返回的数据都流向了hiddenIframe，那么我们在hiddenIframe中使用一个textarea将这个数据接收下来，在这个iframe中的onload事件中对这些数据进行处理，然后调用父窗口(parent)相应的处理方法来处理。

 

3、弊端说明：

这种方法的第一个弊端是显而易见的，就是麻烦，所以很多人投向了Ajax的怀抱，另外还有一个弊端是如果返回的数据时Json格式的话，需要将content-type设置为“text/html”而不能设置为json。

 

4、补充一下：

其实现在这种方法还是在使用中，常见于使用ajax来上传文件，包括ajax的倡导者google，其mail系统还是用这种方法来上传附件，这是因为js的基于安全性的考虑禁止操作文件，导致了不能使用ajax来上传文件。实际上jquery的插件jquery.form.js也是使用的这种方法来实现的文件上传。

 

互联网码农一枚，欢迎微博互粉：http://weibo.com/icemanhit