ajaxsubmit方法的一种实现

近些天留意了一下网站的源码,发现很神奇的只有前台的表单提交,那他的回调函数是怎么执行的那! 研究了一下才豁然开朗!

这个方法最优的点是 它屏蔽了以往的web安全方面做出的跨域访问,也就是这样封装的方法可以做到完全的跨域ajax提交表单 如同jasonp协议

function AjaxSubmit(action, formID, data, callback) {

    var frm = document.getElementById(formID);   获取当前from对象

    frm.method = "post";                       post提交

    frm.encoding = "multipart/form-data";         编码为传输文件

    frm.action = action;                        提交时候的地址

    var iframeID = formID + "_AjaxIFrame";      拼接潜入from内的IframeID

    frm.target = iframeID;

    var childnode = document.getElementById(iframeID);

    var ifrm;

    if (ifrm != undefined && ifrm != null) {

        frm.removeChild(childnode);           确保文档流中Iframe的唯一性

    }

    //-----------------------

    var isIE = navigator.appName.indexOf("Mic") != -1;       判断是不是IE

    ifrm = document.createElement("iframe");   创建潜入的Iframe

    ifrm.id = iframeID;            初始化当前的Iframe

    ifrm.name = iframeID;

    ifrm.style.display = "none";

    ifrm.target = "_parent";          指定嵌套的

    frm.appendChild(ifrm);          添加

    if (isIE) {

        if (document.frames) {

            window.frames[iframeID.toString()].name = iframeID;

        }

    }

    var call = document.getElementById("callback");

    if (!call) {

        call = document.createElement("input");  创建存储返回函数的标签

    }

    call.name = "callback";

    call.id = "callback";

    call.value = callback;

    call.type = "hidden";

    frm.appendChild(call);          添加该标签到当前表单中

    //---------------------------------

    for (var name in data) {    判断当前参数在页面中是否有相应的input标签

        var input = document.getElementById(name);

        if (!input) {

            input = document.createElement("input");

        }

        input.name = name;

        input.id = name;

        input.value = data[name];

        input.type = "hidden";

        frm.appendChild(input);

    }

   

        frm.submit();           提交当前表单到指定的后台

  

}

 

 

调用:

页面中有一个from1

Functions Sub(){

AjaxSubmit("Ajax/Test.aspx", "form1", {}, function (data) {

                parent._call(data);

            });

};

  function _call(a) {

   alter(a);

}

AjaxAddAddress.aspx 文件中处理:

 

private void WriteForm(string str, HttpContext context)

              {

                     string method = context.Request["callback"];

                     string isJson = context.Request["isJson"];

                     string hs = "<script> void " + method + " ('" + str + "');</script>";返回该回调函数到页面并且执行该方法

                     context.Response.Write(hs);

                     context.Response.Flush();

                     context.Response.End();  结束当前请求

              }

原来是后台直接返回了前台回调的函数,并且是以执行匿名函数的方法,返回到了动态创建的Iframe中 。

 

posted @ 2013-04-11 18:13  plugin-loader  阅读(387)  评论(0编辑  收藏  举报