美文网首页
xhr中的content-type

xhr中的content-type

作者: 三省吾身_9862 | 来源:发表于2018-12-19 16:56 被阅读61次

    为了方便理解,首先创建一个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);
    

    最后,为了说的透彻,写了很多重复的字句,啰里啰嗦;错误的示范很多,就不多举例子了。

    相关文章

      网友评论

          本文标题:xhr中的content-type

          本文链接:https://www.haomeiwen.com/subject/wxbjkqtx.html