为了方便理解，首先创建一个xhr对象
let xhr = new XMLHttpRequest();
xhr.open('get', '/requestUrl?username=xxx&pass=xxx');
xhr.send();
xhr在get请求方式下，content-type一般是不用设置的；因为get请求方式，只有一种传参方式：?username=xxx&pass=xxx；后端服务器能明确的知道，接受到的数据是什么格式
然而，xhr在post请求方式下：
let xhr = new XMLHttpRequest();
xhr.open('post', '/requestUrl');
xhr.send(data);
我们知道post请求方式，参数是通过xhr.send(data)方式发送的。并且其中data的数据格式是字符串，但是这字符串是什么格式的，可以有很多种。后端服务器需要浏览器（客户端），明确指出发送的是什么格式的字符串数据，以便服务器解析。因此就需要通过请求头设置content-type，用来告诉服务器，浏览器发送的参数是什么格式的字符串：
// 不需要设置
1、content-type: text/plain; charset=UTF-8（默认格式，没有格式的字符串）
2、content-type: application/x-www-form-urlencoded
let xhr = new XMLHttpRequest();
xhr.open('post', '/requestUrl');
// 必须在xhr.send()前设置
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
// data必须是这种表单数据格式的字符串；否则服务器接受到数据，按照表单数据格式解析，实际发送的不是表单格式的数据，将会解析不出来
let data = 'username=xxx&pass=xxx';
xhr.send(data);
3、content-type: application/json; charset=UTF-8
let xhr = new XMLHttpRequest();
xhr.open('post', '/requestUrl');
// 必须在xhr.send()前设置
xhr.setRequestHeader('content-type', 'application/json; charset=UTF-8');
// data必须是JSON字符串格式的，否则服务器接受到数据，按照JSON字符串格式解析，实际发送的不是JSON字符串，将会解析不出来
let data = JSON.stringify({username: 'xxx', pass: 'xxx'});
xhr.send(data);
为了加深理解，以下是错误示范：
1、text/plain; charset=UTF-8（默认格式，没有格式的字符串）；服务器是无法按照期望解析出{username: 'xxx', pass: 'xxx'}这个对象，因为你告诉它的数据类型，是没有格式的，它将不做解析，得到的就是一个普通的字符串"{"username":"xxx","pass":"xxx"}"；尽管你看起来，它是一个JSON字符串，但是服务器只按照content-type指定的数据格式（text/plain; charset=UTF-8）解析
let xhr = new XMLHttpRequest();
xhr.open('post', '/requestUrl');
let data = JSON.stringify({username: 'xxx', pass: 'xxx'});
xhr.send(data);
2、这样也是错误的，你告诉服务器，我传给的是JSON字符串，最后给的却是表单数据格式的字符串；服务器会按照content-type指定的数据格式（application/json; charset=UTF-8'）解析接受到的字符串，最后没能按照JSON字符串格式解析出这串字符串"username=xxx&pass=xxx"
let xhr = new XMLHttpRequest();
xhr.open('post', '/requestUrl');
xhr.setRequestHeader('content-type', 'application/json; charset=UTF-8');
let data = "username=xxx&pass=xxx"
xhr.send(data);
最后，为了说的透彻，写了很多重复的字句，啰里啰嗦；错误的示范很多，就不多举例子了。
网友评论