ajax系列之一,深入理解ajax系列第四篇——FormData

说明：本篇文章参考深入理解ajax系列第四篇——FormData这片博客，关于FormData的说明基本上都来自这篇博客

一、写本篇博客的原因

看了作者的文章，但是觉得作者文章中FormData之外关于“表单编码”、“表单序列化”的讲解过于曲高和寡，所以自己总结记录一下，以便以后翻阅。

二、表单编码和表单序列化

首先，表单序列化(序列化定义：将对象的状态信息转换为可以存储或传输的形式的过程。)是很有必要的，因为不论使用何种请求方式，我们都需要组装数据，这就是序列化。需要讨论的是如何序列化和将表单数据序列化为何种格式的数据，就第一个问题表单元素很少时自己序列化可以接受，但是如果表单元素很多时就不可取，此时需要采用封装好的序列化函数，比如jQuery的serializeArray()、serializeobject()、serialize()等方法。下面讨论第二个问题。

在没有ajax之前，表单自己提交数据，表单将其每个表单元素的名字和值编码到一个字符串中并随请求发送；默认情况下，HTML表单通过POST方法发送给服务器，而编码后的表单数据则用做请求主体。

ajax产生之后表单数据一般都通过ajax提交，而且由于前后端现在普遍使用json交互，所以更多的我们采用jQuery的serializeobject()方法将表单序列化为json数据。

三、FormData

当HTML表单同时包含文件上传元素和其他元素时，浏览器不能使用普通的表单编码而必须使用称为“multipart/form-data”的特殊Content-Type来用POST方法提交表单。这种编码包括使用长“边界”字符串把请求主体分离成多个部分。对于文本数据，手动创建“multipart/form-data”请求主体是可能的，但很复杂

XMLHttpRequest 2级为此定义了FormData类型。FormData为序列化表单以及创建与表单格式相同的数据(用于通过XHR传输)提供了便利

【构造函数】

newFormData (form? : HTMLFormElement)

可选参数form表示一个HTML表单元素，可以包含任何形式的表单控件，包括文件输入框

【append()】

append()方法用于给当前FormData对象添加一个键/值对

void append(DOMString name, Blob value, optional DOMString filename);

voidappend(DOMString name, DOMString value);

参数值name表示字段名称；参数值value表示字段值；参数值filename(可选)用于指定文件的文件名，当value参数被指定为一个Blob对象或者一个File对象时，该文件名会被发送到服务器上，对于Blob对象来说，这个值默认为"blob"

【其他不常用方法】

get()：通过get(key)/getAll(key)来获取对应的value

set()：通过set(key,value)修改数据，如果指定的key不存在则新增一条，如果存在，则修改对应的value值

has()：通过has(key)来判断是否对应的key值

delete()：通过delete(key)来删除数据

[注意]以上4个不常用方法，IE浏览器都不支持

一般地，我们使用FormData()构造函数创建FormData对象，然后按需多次调用这个对象的append()方法把个体“部分”(可以是字符串、File或Blob对象)添加到请求中。最后，把FormData对象传递给send()方法，通过XHR对象将其发送到服务器

[注意]multipart/form-data只能用于post方式

var oForm = document.forms.form1;

oForm.onchange =function(){

//创建xhr对象var xhr;

if(window.XMLHttpRequest){

xhr =new XMLHttpRequest();

}else{

xhr =new ActiveXObject('Microsoft.XMLHTTP');

}

//异步接受响应    xhr.onreadystatechange =function(){

if(xhr.readyState ==4){

if(xhr.status ==200){

//实际操作                result.innerHTML = xhr.responseText;

}

}

}

//发送请求    xhr.open('post','t1.php' ,true);

xhr.send(new FormData(form1));

}