38.前端基础

标签：38 HTTP 请求前端基础响应服务器服务端客户端

【一】前端和后端介绍

1）概念

前端：与用户进行交互，让用户输入数据以及展示响应数据的媒介

后端：在整个应用背后，不直接与用户打交道，对用户输入的数据进行校验和加密等逻辑的位置

2）介绍

HTML：网页的骨架，没任何样式

CSS：给骨架添加样式

JavaScript：控制页面的动态效果

3）前端框架

BOOTSTRAP、jQuery、Vue：提前封装好了很多操作，只需要按照固定的语法调用即可

【二】Web服务器的本质

1）从浏览器输入一个地址到看到页面信息过程

浏览器先分析超链接中的URL是否规范
浏览器向DNS请求解析ip地址
DNS将解析出的ip地址返回给浏览器
浏览器与服务器建立TCP连接（80端口，三次握手）
服务器接收到浏览器请求文档（GET、index.html）进行处理
服务器给出响应，将文档index.html发送给浏览器，浏览器进行解封装
浏览器渲染index.html中的内容（渲染页面）
释放TCP连接（四次挥手）

【三】HTTP协议引入

1）起源

不同服务端数据的组织策略千差万别，但是浏览器却需要做到能够统一处理
最佳解决措施就是统一规定一个标砖：HTTP协议

2）概念

规定了服务端与浏览器之间的数据交互格式及其他事项
如果服务端遵循HTTP协议，就可以被浏览器正常访问并展示内容
如果服务端不遵循HTTP协议，浏览器就不会正常访问和展示但是不影响服务端

【四】HTTP协议

1）介绍

HTTP协议（HyperText Transfer Protocol，超文本传输协议）
由蒂姆·伯纳斯-李于1989年为了推广互联网技术而推出的一种无状态网络应用协议
HTTP协议构建于TCP/IP协议之上，属于应用层协议
主要用于传输与超文本相关的资源文件，如HTML网页、CSS、JS、图片、视频、音频等

现在的HTTP协议基于数据是否加密，主要分两种

之间构建与TCP协议之上
- 没有进行加密传输数据的是HTTP协议
- 默认通信端口是80端口
- 用端口有：3000，5000，8000，8080等
构建于TLS或SSL协议之上
- 对数据使用SSL加壳加密传输数据的是HTTPS协议
- 默认通信端口是443端口
- 常用端口8443

2）特点

基于请求、响应
- 服务端永远不会主动给客户端发消息，必须是客户端先请求
基于TCP、IP作用于应用层之上的协议
无状态
- 服务端不保存客户端状态
- 客户端的每一次请求，对于服务端都是一次新的请求
短连接
- 不保持客户端于服务端之间的链接导通
- 服务端响应数据之后立马断开连接
- （长链接主要用于加好友聊天等业务）

3）请求格式和响应格式

1.请求格式

客户端给服务端发送消息
- 1.请求首行(请求方法协议版本)
- 2.请求头(一大堆k:v键值对)
- 3.(换行不能省略)
- 4.请求体(携带敏感数据:密码身份照号...) 不是一直都有

2.响应格式

服务端给客户端发送消息
- 1.响应首行(响应状态码协议版本)
- 2.响应头(一大堆k:v键值对)
- 3.(换行不能省略)
- 4.响应体(给浏览器展示给用户看的页面内容)

4）协议报文详情

1.请求方法

表示客户端希望服务器指定资源进行哪一种类型的操作

请求方法	描述	报文中是否包含请求体
GET	表示客户端希望从服务器中获取或下载资源信息	False
POST	表示客户端希望上传文件或通过请求在服务器创建资源信息。	True
PUT	表示客户端希望修改或更新服务器资源（表示修改全部资源信息，例如数据表的一整个记录）	True
PATCH	表示客户端希望修改或更新服务器资源（表示修改部分资源信息，例如数据表的一个记录里面某个属性值）	True
DELETE	表示客户端希望删除或废弃服务器资源	False
OPTION	表示客户端希望获取服务器所支持的请求方法列表	False
HEAD	表示客户端希望获取服务器支持的跨域地址列表	False

2.请求头

主要对客户端请求进行限制条件与补充说明

选项	描述	值
Host	指定客户端请求的服务器的域名和端口号。	www.baidu.com
Content-Type	告诉服务器，客户端请求携带的请求体数据的媒体类型信息（MIME类型）
User-Agent	告知服务器HTTP 客户端网络代理程序的版本信息，一般就是浏览器的版本信息。
Authorization	告知服务器客户端的Web认证信息。
Content-Length	HTTP报文中请求体的大小，以字节为单位。
Referer	告诉服务器该网页是从哪个页面链接过来。也就是上一页页面的地址。
Accept	指定客户端能够接收并理解的媒体类型类型（MIME类型），用于表达希望服务端的返回资源格式。
Accept-Encoding	指定浏览器可以支持的web服务器返回内容压缩编码类型。	gzip, deflate, br
Pragma	指定服务端控制缓存行为。http/1.0以前的字段。	Pragme: no-cache
Cache-Control	指定服务端控制缓存行为。http/1.1以后的字段。	Cache-Control: no-cache
Upgrade	向服务器请求在当前http协议的基础上升级采用新的某种传输协议以便服务器进行转换	常用于http协议升级到ws协议。
Connection	指定本次http通信结束以后，是否关闭TCP网络连接。如果设置持久连接，则可以在一次会话中，可以使用同一个TCP连接，进行多次的HTTP通信，提高效率。	持久连接，Connection: keep-alive 非持久连接，Connection: close

3.常见的MIME格式

类型	描述	别名
text/html	HTML网页
application/json	json文本	text/json
text/plain	纯文本，普通文本
text/xml	xml文档
application/javascript	js脚本	text/javascript
text/css	css样式
image/png	png格式图片
image/jpeg	jpg格式图片
image/gif	gif格式图片
application/x-gzip	gzip格式压缩包
application/msword	doc文档
application/vnd.openxmlformats-officedocument.wordprocessingml.document	docx文档
application/vnd.ms-excel	xls文档
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet	xlsx文档
application/pdf	pdf文档
audio/mpeg	mp3音频
video/mp4	mp4视频

4.响应状态码

用于表达本次服务端在接收客户端请求之后的操作结果的成功或失败结果，由三位整数组成

状态码类型	描述
1xx	告诉客户端，本次请求，服务端还在持续处理中，并没有结束。
2xx	告诉客户端，本次请求，服务端已经接收并成功受理了。
3xx	告诉客户端，服务端位置发生改变，希望客户端重定向访问跳转新的服务器地址进行请求
4xx	告诉客户端，本次请求有误，服务器无法处理。
5xx	告诉客户端，本次请求服务端在处理过程中服务端出错了。

常见的HTTP状态码

状态码	响应信息	描述
101	Switching Protocols	服务器已经理解了客户端的请求，并将通过Upgrade消息头通知客户端采用升级协议来完成请求。
200	OK	请求已成功，请求所希望的响应头或数据体将随此响应返回。出现此状态码是表示正常状态。常用于GET，PUT或PATCH
201	Created	请求已成功，请求的资源已经创建成功或更新完成，常用于POST，PUT或PATCH
204	No Content	请求已成功，但是没有任何内容返回。常用于DEELTE
301	Moved Permanently	永久重定向，表示当前客户端请求的资源地址已经永久发生改变。
302	Move Temporarily	临时重定向，表示当前客户端请求的资源地址还存在，但是访问客户端达不到访问资源的条件，所以暂时无法访问。
304	Not Modified	表示本次客户端请求的资源，并非来自服务端，而是本地缓存。如果web项目有做了客户端缓存，一般静态文件都会出现304
305	Use Proxy	被请求的资源必须通过指定的代理才能被访问。
307	Temporary Redirect	请求的资源临时从不同的URI 响应请求。
400	Bad Request	本次请求，报文语义有误或请求参数有误，当前请求无法被服务器理解。
401	Unauthorized	本次请求，需要需要用户验证，但用户并没有提供认证。
403	Forbidden	服务器已经理解请求，但是拒绝执行它。一般是因为没有权限导致的。
404	Not Found	请求失败，请求所希望得到的资源未被在服务器上发现，请求路径不存在。
405	Method Not Allowed	请求行中指定的请求方法不能被用于请求相应的资源。使用了错误的请求方法。
500	Internal Server Error	服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。就是服务端的代码报错了。
502	Bad Gateway	网关宕机，作为网关或者代理工作的服务器尝试执行请求时，从上游服务器接收到无效的响应。一般就是大量访问请求导致服务器瘫痪或宕机了。
503	Service Unavailable	网关过载，由于临时的服务器维护或者过载，服务器当前无法处理请求。
504	Gateway Timeout	网关超时，作为网关或者代理工作的服务器尝试执行请求时，未能及时从上游服务器或者辅助服务器（例如DNS）收到响应。
507	Insufficient Storage	服务器无法存储完成请求所必须的内容。

5.响应头

主要是服务器返回的内容进行补充说明，并提供下一次请求的一些辅助信息

Content-Type	告知客户端，响应数据的MIME类型
Content-Length	告知客户端，响应数据的字节大小
Content-Encoding	告知客户端，响应数据采用的压缩格式
Server	告知客户端，响应服务器的名字或类型
Date	告知客户端，响应请求的时间
Location	告知客户端，实际要请求的资源地址（用于301或302进行页面跳转）
Cache-Control	告知客户端，响应数据的缓存机制
Refresh	告知客户端，要定时刷新的时间间隔
Connection	告知客户端，本次HTTP通信完成以后是否要保持TCP连接。
Transfer-Encoding	告知客户端，数据是以分块方式响应回来的。
Content-Disposition	告知客户端，以下载方式打数据的，格式：Content-Disposition: attachment;filename=文件名
Expires	告知客户端，响应数据的过期事件，-1表示马上过期，客户端不要缓存当前响应数据。
Retry-After	告知客户端，应该在多久之后再次发送请求。常见于服务端限流，或503中。
Access-Control-Allow-Origin	指定客户端通过哪些域名下的脚本可以访问服务器资源。
Access-Control-Allow-Methods	指定客户端通过哪些HTTP请求方法访问服务端资源。
Access-Control-Allow-Headers	指定客户端请求服务器的报文中，允许包含哪些请求头。

import socket

server = socket.socket()
ip = '127.0.0.1'
port = 8010
addr = (ip, port)
server.bind(addr)
server.listen(5)
conn, addr = server.accept()
while True:
    from_client_data = conn.recv(1024)
    from_client_data_str = from_client_data.decode()
    print(f'from_client_data_str: {from_client_data_str}')
    # 【1】响应首行 ： 协议版本 响应状态码 换行(\r\n)
    response_line = "HTTP/1.1 200 OK\r\n"
    # 【2】响应头
    response_header = "Server:Python20ws/21.1\r\n"
    # 【3】换行
    response_blank = '\r\n'
    html_head = '<html>'
    # 【4】响应体
    response_content = "HelloWorld!"
    html_foot = '<html/>'
    response_body = html_head + response_content + html_foot
    # 【5】拼接响应数据并转为二进制发送
    to_client_data = response_line + response_header + response_blank + response_body
    to_client_data_bytes = to_client_data.encode()
    conn.send(to_client_data_bytes)

# GET / HTTP/1.1
# Host: 127.0.0.1:8010
# Connection: keep-alive
# sec-ch-ua: "Google Chrome";v="125", "Chromium";v="125", "Not.A/Brand";v="24"
# sec-ch-ua-mobile: ?0
# sec-ch-ua-platform: "Windows"
# Upgrade-Insecure-Requests: 1
# User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36
# Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
# Sec-Fetch-Site: none
# Sec-Fetch-Mode: navigate
# Sec-Fetch-User: ?1
# Sec-Fetch-Dest: document
# Accept-Language: zh-CN,zh;q=0.9
# Accept-Encoding: gzip, deflate

标签：38,HTTP,请求,前端,基础,响应,服务器,服务端,客户端
From： https://www.cnblogs.com/Mist-/p/18244612