本次我们着重介绍 Content-type头部设置和
DOMString、Document、FormData、Blob、File、ArrayBuffer类型数据。
这部分其实还是http报文部分知识
Content-type(常见)
Content-type 指定http请求的实体类型(body内容的类型),所以http虽然可以传输任意的数据类型,但是仍然需要配置Content-type进行标记。
引用:Content-type,在Request Headers里面,告诉服务器,我们发送的请求信息格式。( 常见的三种Content-Type )
application/x-www-form-urlencoded
常见的post请求的标准数据标识。是http请求的默认格式,Content-type默认参数。
浏原生
form标签发送post请求时不配置enctype属性,默认会使用该数据标识进行http请求发送。form标签的enctpye属性和http报文头部中的Content-type属性一样,可以指定数据类型。
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("name=juejinjin&sex=man");
如果使用form表单提交,提交的数据按照 key1=val1&key2=val2 的方式进行编码,所以我们直接send时写成key1=val1&key2=val2格式。
multipart/form-data
其实通过前后两个单词我们可以得到:“多重”和“表单数据”两个信息。实际上也确实是为了form标签能够实现直接上传文件数据,通过给form标签中enctype属性赋值multipart/form-data从而form可以上传文件(input:file),并且可以同时发送text等信息。
<form action="/" method="post" enctype="multipart/form-data">
<input type="text" name="description">
<input type="file" name="myFile">
<ipnut type="submit" value="Submit">
</form>
application/json
用于传输“序列化”后的 JSON 字符串,http协议传输的是数据本身,作为对象的json数据直接使用就是引用值,所以我们应该使用JSON.stringify等方法转换成json字符串形式。随着json格式在前后端交互中使用得越来越频繁,application/json也越来越多被使用作为请求实体格式。
xhr.setRequestHeader("Content-type", "application/json");
xhr.send(JSON.stringify({'title':'test', 'sub' : [1,2,3]}));//应该传输字符串。
json格式作为结构化数据类型,处理深层次和数据量大的信息时具有明显优势。同时我们也可以将application/x-www-form-urlencoded和json字符串相嵌套结合进行http报文传输。
注意:
content单词容易写错成context以及其他错误写法,通常会是post等请求发送服务器接收不到body数据的原因。
实体的类型
虽然有content-type字段用于告诉服务器我们发送的数据的格式,但是具体放在请求实体里一起发送的信息还是由我们自己手动选择。
DOMString和Document、FormData、Blob、File、ArrayBuffer都是http报文实体的数据格式,一系列的官方确定的类型规范。一旦使用和content-type指定的类型不匹配的数据格式就会导致服务器无法正确解析请求实体,这样任何数据格式甚至有无遵守数据格式都是一样的,都是不会正确解析对服务器无意义的信息。xhr 1.0是只支持DOMString和Document格式,从xhr 2.0开始就支持剩下的所以格式(content-type具有对应的参数能告诉服务器进行解析)。
1.DOMString
其实DOMString的概念是对http协议而言的,对于服务器和客户端而言其实就是String字符串。通常☞的普通字符串,只是一种规则约束,即使是json字符串你也可以当作DOMString处理,因为字符串不去按照特定方式解析就只是字符串。如果你要传输json字符串同时让服务器能够识别,那么这个实体类型就应该是json字符串而不是DOMString所指普通字符串。
2.Document
暂时没有较好的解释,引用他人解析:
实际上就是XMLHttpRequest中数据返回属性之responseXML,也就是可以解析为XML的数据。因此,这里的Document数据类似你就可以近似看成XML数据类型。
理解DOMString、Document、FormData、Blob、File、ArrayBuffer数据类型