关于前端:请求响应原理及HTTP协议学习记录二

3. HTTP 协定

3.1 HTTP 协定的概念

超文本传输协定（英文：HyperText Transfer Protocol，缩写：HTTP）规定了如何从网站服务器传输超文本到本地浏览器，它基于客户端服务器架构工作，是客户端（用户）和服务器端（网站）申请和应答的规范。

3.2 报文

在 HTTP 申请和响应的过程中传递的数据块就叫报文，包含要传送的数据和一些附加信息，并且要恪守规定好的格局。

3.3 申请报文

1. 申请形式（Request Method）

• GET 申请数据
• POST 发送数据

2. 申请地址（Request URL）

 app.on('request', (req, res) => {
     req.headers  // 获取申请报文
     req.url      // 获取申请地址
     req.method   // 获取申请办法
 });

3.4 响应报文

1. HTTP 状态码

• 200 申请胜利
• 404 申请的资源没有被找到
• 500 服务器端谬误
• 400 客户端申请有语法错误

2. 内容类型

• text/html
• text/css
• application/javascript
• image/jpeg
• application/json

 app.on('request', (req, res) => {
     // 设置响应报文
     res.writeHead(200, {'Content-Type': 'text/html;charset=utf8'});
 });

4. HTTP 申请与响应解决

4.1 申请参数

客户端向服务器端发送申请时，有时须要携带一些客户信息，客户信息须要通过申请参数的模式传递到服务器端，比方登录操作。

4.2 GET 申请参数

• 参数被搁置在浏览器地址栏中，例如：http://localhost:3000/?name=z…
• 参数获取须要借助零碎模块 url，url 模块用来解决 url 地址

 const http = require('http');
 // 导入 url 零碎模块 用于解决 url 地址
 const url = require('url');
 const app = http.createServer();
 app.on('request', (req, res) => {
     // 将 url 门路的各个局部解析进去并返回对象
         // true 代表将参数解析为对象格局
     let {query} = url.parse(req.url, true);
     console.log(query);
 });
 app.listen(3000);

4.3 POST 申请参数

• 参数被搁置在申请体中进行传输
• 获取 POST 参数须要应用 data 事件和 end 事件
• 应用 querystring 零碎模块将参数转换为对象格局

 // 导入零碎模块 querystring 用于将 HTTP 参数转换为对象格局
 const querystring = require('querystring');
 app.on('request', (req, res) => {
     let postData = '';
     // 监听参数传输事件
     req.on('data', (chunk) => postData += chunk;);
     // 监听参数传输结束事件
     req.on('end', () => {console.log(querystring.parse(postData)); 
     }); 
 });

4.4 路由

http://localhost:3000/index
http://localhost:3000/login
路由是指客户端申请地址与服务器端程序代码的对应关系。简略的说，就是申请什么响应什么。

 // 当客户端发来申请的时候
 app.on('request', (req, res) => {
     // 获取客户端的申请门路
     let {pathname} = url.parse(req.url);
     if (pathname == '/' || pathname == '/index') {res.end('欢送来到首页');
     } else if (pathname == '/list') {res.end('欢送来到列表页页');
     } else {res.end('道歉, 您拜访的页面出游了');
     }
 });

4.5 动态资源

服务器端不须要解决，能够间接响应给客户端的资源就是动态资源，例如 CSS、JavaScript、image 文件。

4.6 动静资源

雷同的申请地址不同的响应资源，这种资源就是动静资源。

http://www.baidu.com/article?…
http://www.baidu.com/article?…

4.7 客户端申请路径

1. GET 形式

• 浏览器地址栏
• link 标签的 href 属性
• script 标签的 src 属性
• img 标签的 src 属性
• Form 表单提交

2. POST 形式

• Form 表单提交