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中 。