Ajax Content-Type详解

一、Content-Type概述

Content-Type，即内容类型，是HTTP协议中用来标识请求或响应中实体的媒体类型的标识。它是由type和subtype两个部分组成，中间用/分隔。比如，text/html就是HTML格式的文本。

在Ajax中，Content-Type主要用于标识客户端发送的请求或服务器返回的响应的数据类型。不同的数据类型在传输、解析和展示时，都有不同的格式和处理方式。

二、Ajax中常见的Content-Type类型

text/plain

text/plain即为纯文本类型，适用于非结构化的文本数据的传输。该类型数据无需进行序列化，不需要指定字符集，以字符串的形式直接发送即可。例如：

$.ajax({
    type: "POST",
    url: "/api/example",
    data: "username=xxx&password=xxx",
    contentType: "text/plain"
});

请求头中会携带Content-Type: text/plain。

application/x-www-form-urlencoded

application/x-www-form-urlencoded是浏览器原生表单的默认提交类型。适用于结构化的键值对数据的传输。该类型数据需要进行序列化，将各字段用&连接成字符串，再进行传输，服务器收到后需解析，才能获取到各字段的值。例如：

$.ajax({
    type: "POST",
    url: "/api/example",
    data: {username: "xxx", password: "xxx"},
    contentType: "application/x-www-form-urlencoded"
});

请求头中会携带Content-Type: application/x-www-form-urlencoded。

application/json

application/json是一种轻量级的数据交换格式。适用于结构化的对象或数组数据的传输。该类型数据需要将数据序列化成JSON字符串，再进行传输，服务器收到后需进行反序列化，才能获取到数据。例如：

$.ajax({
    type: "POST",
    url: "/api/example",
    data: JSON.stringify({username: "xxx", password: "xxx"}),
    contentType: "application/json"
});

请求头中会携带Content-Type: application/json。

multipart/form-data

multipart/form-data适用于上传文件或二进制数据。该类型数据一般由二进制数据和文本数据组成。在数据传输时，需要将文本和二进制数据分开传输，再在服务端合并成完整的文件。例如：

$.ajax({
    type: "POST",
    url: "/api/example",
    data: new FormData($('form')[0]),
    contentType: false,
    processData: false,
    cache: false
});

请求头中会携带Content-Type: multipart/form-data。

三、Content-Type的注意事项

1、指定Content-Type

在Ajax中，需要明确指定Content-Type。如果不指定的话，浏览器会默认使用application/x-www-form-urlencoded类型，可能导致数据传输异常。

2、序列化

在使用text/plain、application/x-www-form-urlencoded和multipart/form-data这三种Content-Type时，需要对数据进行序列化，以便于数据传输和服务端解析。注意序列化方式的不同。

3、跨域请求

在跨域请求时，浏览器会先发送一个OPTIONS请求，该请求的Content-Type为text/plain。如果服务端都支持跨域访问，则返回允许跨域访问的信息，允许后，再发送真正的请求。

4、缓存

在使用GET请求时，浏览器会默认启用缓存。如果要禁用缓存，则需要在请求头中添加Cache-Control: no-cache和Pragma: no-cache。而其他请求方式则可以直接设置cache: false。

四、代码示例

1、text/plain

$.ajax({
    type: "POST",
    url: "/api/example",
    data: "username=xxx&password=xxx",
    contentType: "text/plain"
});

2、application/x-www-form-urlencoded

$.ajax({
    type: "POST",
    url: "/api/example",
    data: {username: "xxx", password: "xxx"},
    contentType: "application/x-www-form-urlencoded"
});

3、application/json

$.ajax({
    type: "POST",
    url: "/api/example",
    data: JSON.stringify({username: "xxx", password: "xxx"}),
    contentType: "application/json"
});

4、multipart/form-data

$.ajax({
    type: "POST",
    url: "/api/example",
    data: new FormData($('form')[0]),
    contentType: false,
    processData: false,
    cache: false
});