今日完成

用Ajax方式提交表单，决定编码类型的是请求头中Content-Type，不同的值对应不同的提交和回调处理方式。而且，在项目中我们会用到前端的库或者框架，他们对于不同的Content-Type也有不同的参数写法，本文将以jQuery和AngularJS，加上XMLHttpRequest共三种方式为例，详细介绍不同Content-Type的发送请求的方式。
本文考虑的Content-Type类型，共有如下几种：

• application/x-www-form-urlencoded

• multipart/form-data

• text/plain

• application/json

• text/xml

下面将介绍XMLHttpRequest、jQuery和AngularJS三种异步提交方式，及对应的每一种Conten-Type类型。

XMLHttpRequest 方式

XMLHttpRequest对象用于向后端收发数据请求，现代浏览器都支持（IE要用ActiveXObject实现相同功能，本文就不讨论了）。

后续代码将假设已经获得了XMLHttpRequest对象，其名为req。下面将介绍XMLHttpRequest对象用常见的五种Content-Type发送数据的方式。

application/x-www-form-urlencoded

这种Content-Type要求数据按照key1=value1&key2=value2的格式发送给后端，且其中的特殊字符需要转义成%HH的形式。

首先，需要用encodeURIComponent()函数编码表单数据，代码如下。

/* data参数为表单数据组成的对象，dataToSend为待发送给后端的数据 */var tempArr = [];for (var key in data) {    if (data.hasOwnProperty(key)) {
        tempArr.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
    }
}var dataToSend = tempArr.join('&');    

接着，设置请求头部的Content-Type，发送数据，代码如下。

req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');req.send(dataTosend);

multipart/form-data

这种Content-Type类型多用来提交文件，我们采用HTML5的FormData对象来构建提交的数据。FormData对象的浏览器支持情况见：FormData对象的浏览器支持情况。
基本上现代浏览器都支持，IE11以下不支持，不支持的建议用ajaxForm之类的jquery的文件提交插件吧。

首先，用FormData对象构建欲提交的数据，代码如下。

/* data参数为表单数据组成的对象，dataToSend为待发送给后端的数据 */var dataToSend = new FormData();      // HTML5对象, IE11以下不支持for (var key in data) {    if (data.hasOwnProperty(key)) {
        dataToSend.append(key, data[key]);
    }
}

// dataToSend就是FormData对象，可直接传给后端
dataToSend

接着，直接发送给后端，注意这种类型的发送方式，不能设置请求头部的Content-Type，应交给浏览器来处理（设定Boundary等工作）。

req.send(dataToSend);

text/plain

如果请求头部没有设定Content-Type，且数据既不是FormData也不是XML Document（将在xml小节中介绍），则Content-Type默认为text/plain。

这种方式的代码很简单，直接发送字符串即可，代码如下。

req.send('...(此处是字符串格式的数据)');

application/json

JSON格式的数据，后端和各种移动端都很方便处理，用这种MIME类型时，需要将数据对象转换成JSON串。

首先，转换数据成JSON串；然后，设定请求头部的Content-Type，就可以发数据了。代码如下。

/* data参数为表单数据组成的对象 */req.send( JSON.stringify(data) );

text/xml

目前没有遇到过要用XML的情况，大部分都可用JSON代替，为了完整起见，我也顺便总结一下。

首先，构建XML文档对象，存入表单数据，代码如下。

/* data参数为表单数据组成的对象，dataToSend为待发送给后端的数据 */var dataToSend = document.implementation.createDocument("", "formdata", null);var tempData = dataToSend.documentElement;for (var key in data) {    if (data.hasOwnProperty(key)) {        var keyElement = doc.createElement(key);
        keyElement.appendChild(doc.createTextNode(data[key]));
        tempData.appendChild(keyElement);
    }
}/*
xml文档格式示意：
<formdata>
    <key1> value1 </key1>
    <key2> value2 </key2>
</formdata>
*/

之后，与multipart/form-data一样，直接发送数据，不需设置Content-Type。

req.send(dataToSend);

小结

1. multipart/form-data与text/xml不需要设置请求头的Content-Type；

2. 关于method，以上都是POST方式，若是GET方式是没有请求数据体的，数据直接加在URL后面