Javascript异步表单提交,图片上传,兼容异步模拟ajax技术


Posted in Javascript onMay 10, 2010

前言:
咋一看标题还挺长的呢,还有这么多功能,其实简化一点就是一个功能,异步表单提交,只是在异步表单提交这个大功能下,可以实现图片上传,模拟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); 
});
Javascript 相关文章推荐
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Feb 04 Javascript
ext 列表页面关于多行查询的办法
Mar 25 Javascript
node.js中的fs.renameSync方法使用说明
Dec 16 Javascript
JS判断是否360安全浏览器极速内核的方法
Jan 29 Javascript
浅谈javascript属性onresize
Apr 20 Javascript
js控制网页前进和后退的方法
Jun 08 Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 Javascript
SpringMVC返回json数据的三种方式
Dec 10 Javascript
javascript中的后退和刷新实现方法
Nov 10 Javascript
vue省市区三联动下拉选择组件的实现
Apr 28 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
使用FormData实现上传多个文件
Dec 04 Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
May 10 #Javascript
JavaScript几种形式的树结构菜单
May 10 #Javascript
js function使用心得
May 10 #Javascript
javascript 模式设计之工厂模式详细说明
May 10 #Javascript
javascript 精粹笔记
May 09 #Javascript
javascript之通用简单的table选项卡实现(二)
May 09 #Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
May 08 #Javascript
You might like
php实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
ThinkPHP之用户注册登录留言完整实例
2014/07/22 PHP
php文件管理基本功能简单操作
2017/01/16 PHP
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
2013/08/13 Javascript
javascript实现禁止复制网页内容
2014/12/16 Javascript
JavaScript中setMonth()方法的使用详解
2015/06/11 Javascript
详解javascript new的运行机制
2016/01/26 Javascript
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
微信小程序--组件(swiper)详细介绍
2017/06/13 Javascript
简单的三步vuex入门
2018/05/20 Javascript
chosen实现省市区三级联动
2018/08/16 Javascript
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
Python下使用Psyco模块优化运行速度
2015/04/05 Python
python如何在终端里面显示一张图片
2016/08/17 Python
centos6.4下python3.6.1安装教程
2017/07/21 Python
Python三级菜单的实例
2017/09/13 Python
Python正则表达式知识汇总
2017/09/22 Python
Python requests库用法实例详解
2018/08/14 Python
Python单元测试unittest的具体使用示例
2018/12/17 Python
python创建学生成绩管理系统
2019/11/22 Python
利用OpenCV中对图像数据进行64F和8U转换的方式
2020/06/03 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
详解CSS 3 中的 calc() 方法
2018/01/12 HTML / CSS
澳大利亚的奢侈品牌:Oroton
2016/08/26 全球购物
JustFab加拿大:女鞋、靴子、手袋和服装在线
2018/05/18 全球购物
教师求职推荐信范文
2013/11/20 职场文书
经典演讲稿范文
2013/12/30 职场文书
群众路线个人对照检查材料
2014/09/23 职场文书
四风问题查摆剖析材料
2014/10/11 职场文书
Python实现Telnet自动连接检测密码的示例
2021/04/16 Python