js中FormData+XMLHttpRequest数据传输

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

前言：

首先我们需要了解，前后端进行数据传输依赖于浏览器的XMLHttpRequest对象

一、什么是XMLHttpRequest对象？

XMLHttpRequest 是DOM对象，提供了对于http(s)的完全访问，包括POST和HEAD请求，以及普通的GET请求能力。可以同步或异步的返回web服务器的响应，并且能够以文本或DOM文档的方式返回内容。
尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。

二、浏览器支持

所有浏览器均支持XMLHttpRequest对象
区别在于创建XMLHttpRequest对象时，在 IE 5 和 IE 6 中，必须使用特定于 IE 的 ActiveXObject() 构造函数。

三、XMLHttpRequest 对象属性

1、readyState

HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。
5 个状态中每一个都有一个相关联的非正式的名称，下表列出了状态、名称和含义：

状态 名称 描述

0 Uninitialized 初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。

1 Open open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。

2 Sent Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。

3 Receiving 所有响应头部都已经接收到。响应体开始接收但未完成。

4 Loaded HTTP 响应已经完全接收。

readyState 的值不会递减，除非当一个请求在处理过程中的时候调用了 abort() 或 open() 方法。每次这个属性的值增加的时候，都会触发 onreadystatechange 事件句柄。

2、responseText

目前为止为服务器接收到的响应体（不包括头部），或者如果还没有接收到数据的话，就是空字符串。
如果 readyState 小于 3，这个属性就是一个空字符串。
当 readyState 为 3，这个属性返回目前已经接收的响应部分。
如果 readyState 为 4，这个属性保存了完整的响应体。
如果响应包含了为响应体指定字符编码的头部，就使用该编码。否则，假定使用 Unicode UTF-8。

3、responseXML

对请求的响应，解析为 XML 并作为 Document 对象返回。

4、status

由服务器返回的 HTTP 状态代码，如 200 表示成功，而 404 表示 "Not Found" 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。

5、statusText

这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。也就是说，当状态为 200 的时候它是 "OK"，当状态为 404 的时候它是 "Not Found"。和 status 属性一样，当 readyState 小于 3 的时候读取这一属性会导致一个异常。

更多XMLHttpRequest 知识详见http://www.w3school.com.cn/xmldom/dom_http.asp

三、创建XMLHttpRequest 对象

IE5\IE6使用ActiveX 对象
xmlhttp = new ActiveXObject(" Microsoft.XMLHTTP");
现代浏览器
现代浏览器都有内置XMLHttpRequest对象
xmlhttp=new XMLHttpRequest();

四、使用FormData 模拟表单提交

IE10以下浏览器不支持FormData FormData 最大的优势是可以上传二进制文件

1、提交表单时

把form表单作为参数传给FormData 构造函数，这样就可以直接通过ajax 的 send() 方法将 fd 发送到后台。
var form = document.getElementById("form1");
var fd = new FormData(form);
其中，FormData 对象会把表单中name,value组合成queryString 提交给后台

2、模拟表单提交

使用FormData 方法 append向fd添加键值对，另外还有set ()方法，delete()方法 get()、getAll()、has()、keys()、value（）
var fd = new FormData();
fd.append("key","value")