为了方便理解,首先创建一个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);
最后,为了说的透彻,写了很多重复的字句,啰里啰嗦;错误的示范很多,就不多举例子了。