Javascript异步表单提交，图片上传，兼容异步模拟ajax技术
更新时间：2010年05月10日 18:29:18 作者：
使用Javascript异步表单提交，图片上传，兼容异步模拟ajax技术,需要的朋友可以参考下。
前言：
咋一看标题还挺长的呢，还有这么多功能，其实简化一点就是一个功能，异步表单提交，只是在异步表单提交这个大功能下，可以实现图片上传，模拟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;
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="javascript:setTimeout(\'asyn.complete()\',100)"></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 () {
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
};
简单讲解：
其实里面比较麻烦的应该是处理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);
});
咋一看标题还挺长的呢，还有这么多功能，其实简化一点就是一个功能，异步表单提交，只是在异步表单提交这个大功能下，可以实现图片上传，模拟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;
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="javascript:setTimeout(\'asyn.complete()\',100)"></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 () {
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
};
简单讲解：
其实里面比较麻烦的应该是处理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);
});
相关文章
都知道在js中如果定义两个相同名称的方法，前一个方法就会被后一个方法覆盖掉，使用此特点就可以实现模板方法，感兴趣的朋友可以了解下本文哈2013-07-07
这篇文章主要为大家详细介绍了微信小程序获取用户信息及手机号，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
在原型链中，Object是顶级公民，function是一级公民，其他的是二级公民，先记住这句话，下面我们来讲解一下为什么这么说。2021-06-06
Select联动带跳转的效果想必大家并不陌生吧，下面有个不错的示例，感兴趣的朋友可以参考下2013-10-10
这篇文章主要介绍了JS模拟简易滚动条效果代码,可模拟出滚动条拖动显示的效果,涉及JavaScript鼠标事件的响应及页面元素运算的相关技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2016-04-04
JavaScript测试工具之Karma-Jasmine的安装和使用详解
Jasmine是一个Javascript的测试工具，在Karma上运行Jasmine可完成Javascript的自动化测试、生成覆盖率报告等。本文不包含Jasmine的使用细节，这几天我会写一篇Jasmine的入门文章，有兴趣的朋友到时候可以看一下2015-12-12
在进行自己的后台改版时，大体布局都使用了bootstrap，剩下的表单部分没理由不去使用它，对于表单的美化和布局，bootstrap做的也是很不错的。下文给大家介绍Bootstrap表单Form全面解析，感兴趣的朋友一起看下吧2016-06-06
DOM（Document Object Model）即文档对象模型，针对 HTML 和 XML 文档的 API（应用程序接口）。本篇文章给大家介绍javascript操作dom常用的api小结，对javascript dom api相关知识感兴趣的朋友一起学习吧2015-12-12
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
这篇文章主要介绍了bootstrap-table.js扩展分页工具栏，增加跳转到xx页功能，由于小编的水平停留在dom级，此次扩展只支持页面上的表格，如果大家有好的建议欢迎提出2017-12-12
javascript removeChild 导致的内存泄漏
最近看到司徒正美的一篇文章《移除DOM节点》，文中说到在IE中移除容器类节点，会引起内存泄露。2010-08-08
最新评论