Ajax进阶 FormData对象
Ajax基础:http://www.cnblogs.com/-beyond/p/7919369.html
xhr 2.0及FormData介绍
FormData对象 其实和 XMLHttpRequest对象 是一样的,和Date,Array这些对象也是一样的,都是window对象的属性。
前面那个链接中内容全是XMLHttpRequest 1.0版本。。但是既然ajax这么好用,自然就要扩展了,做了点升级,于是就有了XMLHttpRequest 2.0,人称XMLHttpRequest 2级。
想想如果使用post方式请求数据的时候,同时又提交了一些数据,于是就要设置一些Content-Type为x-www-form-urlencoded头部信息,否则后端程序收到之后,不能通过$_POST来获取(针对PHP),
而且如果想要使用ajax来发送文件,那么,困难还是有的。
所以呢,XMLHttpRequest 2.0版本中就增加一个狠角色——FormData对象 ,为什么说他狠呢,因为,可以把一个实例化的FormData对象直接作为xhr.send的参数,而不需要设置头部信息。同时支持发送文件,其实都没啥的。对于FormData来说也就是小case。
FormData属性及方法
可以通过console.log(window)来找到FormData对象,看一看他的属性和方法
方法:见名知意
set("key","value")
append("key","value")
delete("key")
get("key")
getAll("key")
使用FormData
下面是FormData的使用示例:
var fd = new FormData(); //set会覆盖,简记为设置单一变量 fd.set("name","test"); fd.set("name","demo"); console.log(fd.get("name")); //demo console.log(fd.getAll("name")); //["demo"] //append会创建一个数组,key就是数组名 fd.append("name","abc"); fd.append("name","xyz"); console.log(fd.get("name")); //abc console.log(fd.getAll("name"));//["abc", "xyz"] //删除key的值 fd.delete("name"); console.log(fd.get("name")); //null
FormData搭配XMLhttpRequest
就如开头所说的,FormData对象直接作为xhr.send的参数,即可发送数据,前提是不是get方法,可以是post方法(通常都是)。
var xhr = new XMLHttpRequest(); var fd = new FormData(); fd.append("name[]","demo"); fd.append("name[]","test"); //注意要传递数组的话,一定要在key后面加一个[],否则服务器只能收到最后一次append的值 xhr.open("post","recieve.php",true); xhr.send(fd); xhr.onreadystatechange = function(){ if(xhr.readyState==4){ if((xhr.status==200 && xhr.status<300) || xhr.status==304){ console.log(xhr.responseText); } else { console.log("请求失败,响应码:" + xhr.status) } } }
相关文章
- ajax跨域解除方案,关于Ajax跨域问题及解决方案详析「建议收藏」
- js ajax 跨域问题 解决方案[通俗易懂]
- ajax请求五个步骤!
- ajax发送异步请求四个步骤,AJAX的异步请求的四个步骤[通俗易懂]
- Ajax教程_ajax是服务器端动态网页技术
- SSH 网站制作之AJAX无刷新动态更新页面详解编程语言
- 使用Ajax轻松访问和操作MySQL数据库(ajax访问mysql)
- 使用Ajax实现MySQL数据库操作(ajax操作mysql)
- 学习Ajax基于MySQL的实例实践(ajax实例 mysql)
- 展现灵活性Ajax与MySQL的交互(ajax与mysql交互)
- MySQL与Ajax 精彩无穷的开发实现(ajax与mysql)
- AJAX技术简化Oracle数据库的访问处理(ajax连接oracle)
- prototype.js的Ajax对象
- 发现个AJAX图片浏览器SIMPLEVIEWER
- AJAX乱码解决新方法
- javascript获取多条数据(模拟ajax获取数据)
- ajax异步获取数据实现代码(js创建ajax对象)
- AJAX在GB2312的中文编码传输AJAX特殊字符编码正确方法
- ajax上传时参数提交不更新等相关问题
- ajax动态传递jsp等页面使用id辨识传递对象
- ajax返回值自动添加pre标签的解决方法