javascript 使用iframe模拟ajax的具体原理

2019独角兽企业重金招聘Python工程师标准>>>

今天看了ajaxUpload.js源码之后恍然大悟，其实在某些时候，对网络请求不太严格的条件下，比如不用设置http请求头，请求参数，完全可以使用 javascript+iframe来代替ajax请求，不同之处是ajax功能比较强大，可以设置同步，异步，状态解析，并且ajax本身是直接网络请求，javascript+iframe是间接的同步的，无法知道响应状态的web请求。

对于文件上传，如今在Html5+ajax level2+FileReader Api+formData可以实现，但兼容早期浏览器 javascript+iframe再适合不过了。

javascript+iframe模拟Ajax原理其实很简单，分为以下步骤，在这里就不贴源码了。

①.在当前web页面页面填写form表达，并定义回调方法;

②.监听 onSubmit事件，但不允许她的行为发生（即，阻止默认事件，不允许在当前web页面提交）

③.实现onSubmit的监听函数，动态创建一个iframe，并为iframe添加常用的 标签html,head,body,meta元素

<!--此处省略很多代码-->
<script type='text/javascript'>
    function doAjaxForm(form)
    {
          //<!--创建iframe，省略-->
        
         //<!--将iframe添加至body，省略-->
    }
</script>
<!--此处省略很多代码-->
<form action='javascript:void(0)' method='post' enctype='mutipart/form-data' onSubmit="doAjaxForm(this);return false;">
    <input name='username' type='text'>
    <input name='file' type='file' accept='image/*' multiple>
</form>

④.在复制（注意：必须克隆clone(),不能直接赋值）当前页面的表单，并添加到iframe的body元素中，然后将iframe设置为style="display:none"，并添加iframe到当前页面的body中

<script type='text/javascript'>
    function doAjaxForm(form)
    {
          //<!--创建iframe[，并指定id=iframeId]，省略-->
            var iframeDoc = newIframe.contentWindow.document || newIframe.contentDocument;
            iframeDoc.body.appendChild(form.clone());
         //<!--将iframe添加至body，省略-->
    }
</script>

⑤.然后获取iframe里的form表单，然后使iframe的form执行submit()方法。

<script type='text/javascript'>
    function doAjaxForm(form)
    {
          //<!--创建iframe[，并指定id=iframeId]，省略-->
            var iframeDoc = newIframe.contentWindow.document || newIframe.contentDocument;
            iframeDoc.body.appendChild(form.clone());
         //<!--将iframe添加至body，省略-->
         newIframeDoc.form[0].submit();
    }
</script>

⑥.执行完成后，最好在php代码中输出可操作当前页面的代码的js语句作为php->iframe->当前web页面的回调。 

<script type="text/javascript">
var  data ="<?php echo json_encode(array('code'=>1000,'msg'=>'okay'))?>"    
window.parent.respone(data); //这个方法将在iframe中执行
</script>

就这么简单，此文仅供参考

相关文章：http://www.jb51.net/article/47034.htm

try doing it!

转载于:https://my.oschina.net/ososchina/blog/348261