zoukankan      html  css  js  c++  java
  • [举一反三]使用Javascript异步表单提交,图片文件上传,兼容异步模拟ajax技术(兼容IE,FF,Opera,Chrome,Safari)

    前言:

    咋一看标题还挺长的呢,还有这么多功能,其实简化一点就是一个功能,异步表单提交,只是在异步表单提交这个大功能下,可以实现图片上传,模拟ajax技术(其实很早以前就是通过这个方式来实现多浏览器的兼容ajax,这里只是怀怀旧,作为一个技术来玩玩),下面的内容需要有一定的js基础,要不然理解起来会比较困难。

     

    注意事项:

    这是我bBank里面的一个方法,现在我把他提取出来成一个通用方法来讲解。

    bBank 框架介绍:http://www.cnblogs.com/bruceli/archive/2010/04/15/bBank.html

    为什么要提到bBank,因为在下面的方法中,会使用到bBank的数组的判断,字符串html转换标准dom(我上一篇文章就介绍了这个,点击见详情),移除自己方法,css选择器,所以大家看到不要陌生,你可以自己写方法来替换这些方法,也可以直接用bBank的方法,可以下载bBank看源代码。

    b$.type.isArray(args) 判断是否是数组

    b$.parseDom(strs) 字符串直接转换为标准的dom对象

    b$('#bBankAsynFormSubmit_form_1b').removeSelf() 移除自己

    b$() css选择器

     

    原理:

    核心是通过iframe来完成异步。在页面放入一个隐藏的iframe,表单有个属性target,设置target为你要来进行异步提交的iframe,那么当你在提交表单的时候,其实是在使用iframe来作为提交显示载体,页面其它内容是无刷新的。

    其实原理很简单,既然iframe是作为显示载体的,那么我们扩展下,如果提交的页面是有返回值的,那么返回值会成为iframe的body里面的内容,在通过iframe来取得body里面的内容来,是不是和ajax有点像,这就是以前最早用来实现异步的方法了。

    ajax是时间触发制的,既然要模拟ajax,那么我们也要触发事件,其实也很简单,只要使用iframe的onload装载完成事件就可以了。

     

    实现:

      code:

    var asyn = {
                formSubmit: function (args, action, func) {
                    this.clearContext();
                    this.callBack = null;

           this.loadHack = true;
                    var subArr = [];
                    var subArrT = [];
                    if (b$.type.isArray(args)) {
                        subArr = args;
                    } else {
                        var tag = args.tagName.toLowerCase();
                        if (tag == "form") { for (var i = 0, num = args.childNodes.length; i < num; i++) { subArr.push(args.childNodes[i]); } }
                        else { subArr = [args]; }
                    }
                    //create asyn form and ifroma
                    var objForm = document.createElement("form");
                    objForm.action = action;
                    objForm.target = "bBankAsynFormSubmit_iframe_1b";
                    objForm.encoding = "multipart/form-data";
                    objForm.method = "post";
                    objForm.id = "bBankAsynFormSubmit_form_1b";
                    objForm.style.display = "none";
                    var objIframe = b$.parseDom('<iframe id="bBankAsynFormSubmit_iframe_1b" name="bBankAsynFormSubmit_iframe_1b" src="about:blank" style="display:none;" onload="asyn.complete()"></iframe>')[0];
                    //add submit value in form
                    for (var i = 0, num = subArr.length; i < num; i++) {
                        if (!subArr[i].name && subArr[i].nodeType == 1 && subArr[i].tagName.toLowerCase() == "input") subArr[i].name = "bBankAsynFormSubmit_input_1b_" + i;
                        var input = subArr[i].cloneNode(true);
                        subArrT.push(input);
                        subArr[i].parentNode.replaceChild(input, subArr[i]);
                        objForm.appendChild(subArr[i]);
                    }
                    //submit
                    document.body.appendChild(objIframe);
                    document.body.appendChild(objForm);
                    objForm.submit();
                    //dispose
                    for (var i = 0, num = subArrT.length; i < num; i++) { subArrT[i].parentNode.replaceChild(subArr[i], subArrT[i]); }
                    if (func) this.callBack = func;
                },
                complete: function () {

        if (this.loadHack && !b$.browser.isIE()) {
                    this.loadHack = false;

           if (b$.browser.isFF()) setTimeout('asyn.complete()', 100);
                    return;
                }


                    var responseText = "";
                    try {
                        var objIframe = document.getElementById("bBankAsynFormSubmit_iframe_1b");
                        if (objIframe.contentWindow) { responseText = objIframe.contentWindow.document.body.innerHTML; }
                        else { responseText = objIframe.contentDocument.document.body.innerHTML; }
                    } catch (err) { }

                    this.clearContext();
                    if (this.callBack) this.callBack(responseText);
                },
                clearContext: function () {
                    if (b$('#bBankAsynFormSubmit_form_1b')) b$('#bBankAsynFormSubmit_form_1b').removeSelf();
                    if (b$('#bBankAsynFormSubmit_iframe_1b')) b$('#bBankAsynFormSubmit_iframe_1b').removeSelf();
                },
                callBack: null,

        loadHack: true
            };

      简单讲解:

      其实里面比较麻烦的应该是处理iframe的多浏览器兼容问题了,其实我们也不用去钻牛角尖来讨论iframe的这个兼容问题,我们把兼容交给浏览器自己来解析和解决,这里使用了字符串转dom。

      首先我创建了一个form表单和iframe,都是隐藏的,把表单的内容都转到我创建的隐藏表单中,在把创建的隐藏表单提交。全部完成后在移除创建的表单和iframe。

     

      使用:

      asyn.formSubmit(args, action [, func])    arg:可以为一个form表单,一个input表单元素,input表单元素数组。 action:提交的url。 func:回调函数

          例:asyn.formSubmit(inputArr, 'xxx.aspx',  function(d){

          alert(d);

                });

     

    END

    到这里就结束了,在这里向大家推荐一个我自己写的js框架,上面的这个方法集成在框架里面了

    使用:b$.asyn.formSubmit(inputArr, 'xxx.aspx',  function(d){

           alert(d);

             });

    bBank 框架介绍:http://www.cnblogs.com/bruceli/archive/2010/04/15/bBank.html

  • 相关阅读:
    css 画图形大全
    css 动画中 ease,seae-in,ease-in-out,ease-out,效果区别
    css3 常用动画 随笔
    OpenCV局部变形算法探究
    利用moment为基础,基于DOM实现一个多个倒计时同时进行的js库方便使用
    nodejs 中使用 mocha + should + jscoverage 生成 单元测试覆盖率报告
    AutoX安途杯中山大学程序设计校赛 G Stack Sort I
    理解原生JAVA AOP思想
    分享几个MFC下建立隐藏运行的程序的方法(不会出现黑色框)。
    发一个自己封装的PNG透明图片类。
  • 原文地址:https://www.cnblogs.com/bruceli/p/1731707.html
Copyright © 2011-2022 走看看