数据协商的概念
客户端发送请求给服务端，客户端会声明请求希望拿到的数据的格式和限制，服务端会根据请求头信息，来决定返回的数据。
分类
请求 Accept
返回 Content
Accept
Accept 声明想要数据的类型
Accept-Encoding 数据以哪种编码方式传输，限制服务端如何进行数据压缩。
Accept-Language 展示语言
User-Agent 浏览器相关信息，移动端、客户端、pc端的浏览器 User-Agent 不同。
Content
服务端返回
Content-Type 对应 Accept，从 Accept 中选择数据类型返回
Content-Encoding 对应 Accept-Encoding，声明服务端数据压缩的方式
Content-Language 对应 Accept-Language，是否根据请求返回语言
浏览器请求 html 时的头信息
启动服务器 node server.js，localhost:8888 端口访问，test.html先设为空。
// server.js
const http = require('http')
const fs = require('fs')
http.createServer(function (request, response) {
console.log('request come', request.url)
const html = fs.readFileSync('test.html')
response.writeHead(200, {
'Content-Type': 'text/html',
// 'X-Content-Options': 'nosniff'
// 'Content-Encoding': 'gzip'
})
// response.end(zlib.gzipSync(html))
response.end(html)
}).listen(8888)
console.log('server listening on 8888')
复制代码查看 network 的 localhost 文件的请求信息，浏览器会自动加上这些头信息。
Response Headers
Connection: keep-alive
Content-Type: text/html
Date: Fri, 21 Sep 2018 02:29:16 GMT
Transfer-Encoding: chunked
Request Headers
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8 Accept-Encoding: gzip, deflate, br Accept-Language: zh-CN,zh;q=0.9 Cache-Control: max-age=0 Connection: keep-alive Cookie: Host: localhost:8888 Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36 复制代码请求头
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
浏览器可以接收这些格式的数据，可以进行设置。
Accept-Encoding: gzip, deflate, br
数据编码方式，gzip 使用最多；br 使用比较少，但压缩比高。
Accept-Language: zh-CN,zh;q=0.9
浏览器会判断本系统的语言，自动加上。q 代表权重，数值越大权重越大，优先级越高。
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36
Mozilla/5.0 浏览器最早是网景公司出的，当时默认头是 Mozilla/5.0，很多老的 http 服务器只支持这个头，所以加上兼容老的 web 服务器。
AppleWebKit/537.36 浏览器内核 ，chrome 和 safari 等现代浏览器大部分使用 webkit 内核，webkit 内核是苹果公司开发的
KHTML 渲染引擎版本，类似于 Gecko，火狐浏览器渲染引擎
Chrome/68.0.3440.106 chrome 版本号
Safari/537.36 因为使用了 webkit 内核，所以会加上
服务端根据数据协商的信息进行判断，返回客户端想要的信息。
在发送 ajax 请求时可以自定义设置 accept 相关信息
content type 相关
Accept-Encoding
数据压缩
请求文件大小 933B，使用 gzip 压缩后是 609B
// server.js
const http = require('http')
const fs = require('fs')
const zlib = require('zlib') // 引入包
http.createServer(function (request, response) {
console.log('request come', request.url)
const html = fs.readFileSync('test.html') // 这里不加 utf8，加了返回的就是字符串格式了
response.writeHead(200, {
'Content-Type': 'text/html',
// 'X-Content-Options': 'nosniff'
'Content-Encoding': 'gzip'
})
response.end(zlib.gzipSync(html)) // 压缩
}).listen(8888)
console.log('server listening on 8888')
复制代码请求文件响应头
Response Headers
Connection: keep-alive
Content-Encoding: gzip // 返回的压缩算法方式
Content-Type: text/html
Date: Fri, 21 Sep 2018 02:58:54 GMT
Transfer-Encoding: chunked
复制代码Content-type
用来协商客户端和服务端的数据格式和声明
发送请求时，会有不同的请求内容，根据内容不同设置不同的 content-type
chorme浏览器设置，勾选 Preserve log，当页面跳转后，也会把之前的请求打印出来
发送表单数据
<body>
<form action="/form" method="POST" id="form" enctype="application/x-www-form-urlencoded">
<input type="text" name="name">
<input type="password" name="password">
<input type="submit">
</form>
</body>
</html>
复制代码Request Headers
Content-Type: application/x-www-form-urlencoded // content-type 就是 form表单中设置的
Form Data
name=sf&password=sfs
复制代码服务端根据 content-type 是 x-www-form-urlencoded来对body 中的数据进行转化即可。
如果表单数据中有文件
<body>
<form action="/form" method="POST" id="form" enctype="multipart/form-data">
<input type="text" name="name">
<input type="password" name="password">
<input type="file" name="file">
<input type="submit">
</form>
<script>
var form = document.getElementById('form')
form.addEventListener('submit', function (e) {
e.preventDefault()
var formData = new FormData(form)
fetch('/form', {
method: 'POST',
body: formData
})
})
</script>
</body>
复制代码代表请求是有多个部分的，有时通过表单上传文件时，必须要把文件部分单独拆分出来，文件不能作为字符串进行传输的，要作为二进制的数据进行传输；使用 x-www-form-urlencoded 这种拼接字符串的方式 是不对的
Request Headers
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary39Ug3FSPIBvDYZd6
Request Payload
------WebKitFormBoundary39Ug3FSPIBvDYZd6
Content-Disposition: form-data; name="name"
sdfs
------WebKitFormBoundary39Ug3FSPIBvDYZd6
Content-Disposition: form-data; name="password"
sdfs
------WebKitFormBoundary39Ug3FSPIBvDYZd6
Content-Disposition: form-data; name="file"; filename="1536973449110.png"
Content-Type: image/png
------WebKitFormBoundary39Ug3FSPIBvDYZd6--
复制代码boundary=----WebKitFormBoundarybwAbNlPF2bBcTLuA用来分割表单提交数据的各个部分
服务端拿到表单数据后，根据这个分割字符串，进行数据分割。
转载于:https://juejin.im/post/5ba5a643f265da0adb30d0a1
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/101404.html原文链接：https://javaforall.net
