http数据协商-白红宇

数据协商的概念

客户端发送请求给服务端，客户端会声明请求希望拿到的数据的格式和限制，服务端会根据请求头信息，来决定返回的数据。

分类

请求 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.jsconst 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 HeadersConnection: keep-aliveContent-Type: text/htmlDate: Fri, 21 Sep 2018 02:29:16 GMTTransfer-Encoding: chunkedRequest HeadersAccept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8Accept-Encoding: gzip, deflate, brAccept-Language: zh-CN,zh;q=0.9Cache-Control: max-age=0Connection: keep-aliveCookie: Host: localhost:8888Upgrade-Insecure-Requests: 1User-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.jsconst 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 HeadersConnection: keep-aliveContent-Encoding: gzip // 返回的压缩算法方式Content-Type: text/htmlDate: Fri, 21 Sep 2018 02:58:54 GMTTransfer-Encoding: chunked复制代码

Content-type

用来协商客户端和服务端的数据格式和声明

发送请求时，会有不同的请求内容，根据内容不同设置不同的 content-type

chorme浏览器设置，勾选 Preserve log，当页面跳转后，也会把之前的请求打印出来

发送表单数据

Request HeadersContent-Type: application/x-www-form-urlencoded // content-type 就是 form表单中设置的Form Dataname=sf&password=sfs复制代码

服务端根据 content-type 是 x-www-form-urlencoded来对body 中的数据进行转化即可。

如果表单数据中有文件

代表请求是有多个部分的，有时通过表单上传文件时，必须要把文件部分单独拆分出来，文件不能作为字符串进行传输的，要作为二进制的数据进行传输；使用 x-www-form-urlencoded 这种拼接字符串的方式是不对的

Request HeadersContent-Type: multipart/form-data; boundary=----WebKitFormBoundary39Ug3FSPIBvDYZd6Request Payload------WebKitFormBoundary39Ug3FSPIBvDYZd6Content-Disposition: form-data; name="name"sdfs------WebKitFormBoundary39Ug3FSPIBvDYZd6Content-Disposition: form-data; name="password"sdfs------WebKitFormBoundary39Ug3FSPIBvDYZd6Content-Disposition: form-data; name="file"; filename="1536973449110.png"Content-Type: image/png------WebKitFormBoundary39Ug3FSPIBvDYZd6--复制代码

boundary=----WebKitFormBoundarybwAbNlPF2bBcTLuA用来分割表单提交数据的各个部分

服务端拿到表单数据后，根据这个分割字符串，进行数据分割。