HTTP 协议

一、概念

HTTP（hypertext transport protocol）协议；中文叫超文本传输协议

是一种基于TCP/IP的应用层通信协议

这个协议详细规定了浏览器和万维网服务器之间互相通信的规则。

协议中主要规定了两个方面的内容：

客户端：用来向服务器发送数据，可以被称之为请求报文

服务端：向客户端返回数据，可以被称之为响应报文

报文：可以简单理解为就是一堆字符串

二、请求报文的组成

请求行

请求头

空行

请求体

示例图：

三、HTTP 的请求行

请求方法（get、post、put、delete等）

请求 URL（统一资源定位器）http://www.baidu.com:80/index.htmla=100\&b=200#logo

http：协议（https、ftp、ssh等）

www.baidu.com 域名

80 端口号

/index.html 路径

a=100&b=200 查询字符串

#logo 哈希（锚点链接）

HTTP协议版本号

四、HTTP 请求头

格式：『头名：头值』

常见的请求头有：

五、HTTP 的请求体

请求体内容的格式是非常灵活的，

（可以是空）==> GET请求，

（也可以是字符串，还可以是JSON）===> POST请求

例如：

字符串：keywords=手机&price=2000
JSON：{"keywords":"手机","price":2000}

六、响应报文的组成

响应行

HTTP/1.1 200 OK

HTTP/1.1：HTTP协议版本号

200：响应状态码 404 Not Found 500 Internal Server Error

还有一些状态码，参考：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status

OK：响应状态描述

响应状态码和响应字符串关系是一一对应的。

响应头

Cache-Control:缓存控制 private 私有的，只允许客户端缓存数据

Connection 链接设置

Content-Type:text/html;charset=utf-8 设置响应体的数据类型以及字符集,响应体为html，字符集 utf-8

Content-Length:响应体的长度，单位为字节

空行
响应体

响应体内容的类型是非常灵活的，常见的类型有 HTML、CSS、JS、图片、JSON

七、获取HTTP请求报文

想要获取请求的数据，需要通过 request 对象

注意事项：

request.url 只能获取路径以及查询字符串，无法获取 URL 中的域名以及协议的内容

request.headers 将请求信息转化成一个对象，并将属性名都转化成了『小写』

路径：如果访问网站的时候，只填写了 IP 地址或者是域名信息，此时请求的路径为『 / 』

关于 favicon.ico：这个请求是属于浏览器自动发送的请求

八、设置HTTP响应报文

javascript 复制代码

write 和 end 的两种使用情况：
//1. write 和 end 的结合使用 响应体相对分散
response.write('xx');
response.write('xx');
response.write('xx');
response.end(); //每一个请求，在处理的时候必须要执行 end 方法的
//2. 单独使用 end 方法 响应体相对集中
response.end('xxx');

九、静态资源服务

静态资源是指内容长时间不发生改变的资源，例如图片，视频，CSS 文件，JS文件，HTML文件，字体文件等

动态资源是指内容经常更新的资源，例如百度首页，网易首页，京东搜索列表页面等

HTTP 服务在哪个文件夹中寻找静态资源，那个文件夹就是静态资源目录，也称之为网站根目录

9.2 网页中的 URL

网页中的 URL 主要分为两大类：相对路径与绝对路径

9.2.1 绝对路径

绝对路径可靠性强，而且相对容易理解，在项目中运用较多

9.2.2 相对路径

9.2.3 网页中使用 URL 的场景小结

包括但不限于如下场景：

a 标签 href

link 标签 href

script 标签 src

img 标签 src

video audio 标签 src

form 中的 action

AJAX 请求中的 URL

9.3 设置资源类型（mime类型）

媒体类型（通常称为 Multipurpose Internet Mail Extensions 或 MIME 类型）是一种标准，用来表示文档、文件或字节流的性质和格式。

mime 类型结构： [type]/[subType] 例如： text/html text/css image/jpeg image/png application/json

HTTP 服务可以设置响应头 Content-Type 来表明响应体的 MIME 类型，浏览器会根据该类型决定如何处理资源

下面是常见文件对应的 mime 类型：

javascript 复制代码

html: 'text/html',
css: 'text/css',
js: 'text/javascript',
png: 'image/png',
jpg: 'image/jpeg',
gif: 'image/gif',
mp4: 'video/mp4',
mp3: 'audio/mpeg',
json: 'application/json'

对于未知的资源类型，可以选择 application/octet-stream 类型，浏览器在遇到该类型的响应时，会对响应体内容进行独立存储，也就是我们常见的下载效果

javascript 复制代码

require('http').createServer((request,response)=>{
    //获取请求的方法已经路径
    let {url,method} = request;
    //文件夹路径
    let rootDir = __dirname + '/public';
    //拼接文件路径
    let filePath = rootDir + url;
    //读取文件内容
    fs.readFile(filePath,(err,data)=>{
        //判断
        if(err){
            //如果出现错误，响应404状态码
            response.statusCode = 404;
            response.end('<h1>404 Not Found</h1>');
        }else{
            //响应文件内容
            response.end(data);
        }
    })
}).listen(80,()=>{
    console.log('80端口正在启动中....');
})

9.4 GET 和 POST 请求场景小结

GET 请求的情况：

在地址栏直接输入 url 访问

点击 a 链接

link 标签引入 css

script 标签引入 js

img 标签引入图片

form 标签中的 method 为 get （不区分大小写）

ajax 中的 get 请求

POST 请求的情况：

form 标签中的 method 为 post（不区分大小写）

AJAX 的 post 请求

GET和POST请求的区别：

GET 和 POST 是 HTTP 协议请求的两种方式。

GET 主要用来获取数据，POST 主要用来提交数据

GET 带参数请求是将参数缀到 URL 之后，在地址栏中输入 url 访问网站就是 GET 请求， POST 带参数请求是将参数放到请求体中

POST 请求相对 GET 安全一些，因为在浏览器中参数会暴露在地址栏

GET 请求大小有限制，一般为 2K，而 POST 请求则没有大小限制

一、概念

二、请求报文的组成

三、HTTP 的请求行

四、HTTP 请求头

五、HTTP 的请求体

六、响应报文的组成

七、获取HTTP请求报文

八、设置HTTP响应报文

九、静态资源服务

9.1 网站根目录或静态资源目录

9.2 网页中的 URL

9.2.1 绝对路径

9.2.2 相对路径

9.2.3 网页中使用 URL 的场景小结

9.3 设置资源类型（mime类型）

9.4 GET 和 POST 请求场景小结