初识前端之HTTP协议

初识前端之HTTP协议

一、初识前端

1 .1 什么是前端？

任何与用户打交道的操作界面都可以称之为前端。
比如：电脑界面、手机界面、平板界面

1 .2 什么是后端？

后端类似于幕后的操作者（一堆让人头皮发麻的代码），不与用户打交道，直接进行各种逻辑处理。

1 .3 前端有哪些语言

（1）HTML又称 超文本标记语言 主要进行内容编辑
（2）CSS 又称层叠样式表 主要是对界面进行渲染
（3）JavaScript 简称"JS"，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。主要用来编写网页动态功能。

1 .4 前端有哪些框架

（1）BOOTSTRAP
（2）JQusry
（3）Vue

1.5 软件开发架构

c/s架构：客户端与服务端
b/s架构：浏览器与服务端
注意：浏览器也是cs

1 .6 面试题

问题：
浏览器窗口输入网站回车网站发生了几件事？
（1）浏览器朝服务端发送请求。
（2）服务端接受请求。
（3）服务端处理结果返回结果。
（4）返回给客户端，客户端根据特定的规则渲染页面展示给用户看。

二、HTTP协议

HTTP协议又称超文本传输协议
作用：用来规定服务端和浏览器直接的数据交互。
注意：该协议开发者可以不遵循，但是开发者写的服务端就无法被浏览器正常访问，但可以自己写客户端。用户要想访问服务端，就必须下载专门的app软件。

2 .1 四大特性

（1）基于请求响应
（2）基于TCP/IP作用于应用层之上的协议
（3）无状态
特征：不保存用户信息
补充：
由于HTTP协议是无状态的 所以后续出现了一些专门用来记录用户状态的技术
cookie 、session、token…
（4）无连接、短链接
请求来一次服务端响应一次，之后客户端和服务端两个就没有任何链接关系了。
补充：
**长连接：**双方建立链接之后默认不断开（websocket）
应用场景：即时通信

2 .2 请求数据格式

（1）请求首行 （标识HTTP协议、版本、请求方式）
（2）请求头（一堆的k、v键值对）
（3）\r\n
（4）请求体
注意: get 请求是没有请求体的，只有post请求才有请求体

• 请求方式
  • get请求
    朝服务器要数据
  • post请求
    朝服务端提交数据
    eg:用户登录 输入用户名密码之后提交到服务端做身份验证
    url:统一资源定位符（网址）

2 .3 响应数据格式

（1）响应首行（协议、版本）
（2）响应头（一堆的k、v键值对）
（3）\r\n
（4）响应体（返回给浏览器展示给用户看的数据）

2 .4 响应状态码

响应状态码	说明
1XX	服务器已经成功接收到了你的数据正在处理，你可以继续提交额外的数据
2XX	服务器成功响应了你想要的数据。
3XX	重定向（当你访问一个需要登录之后才能看到的页面，你会发现会自动跳转到登录页面）
4XX	请求错误 404：请求资源不存在 403：当前请求不合法或者不符合访问资源的条件
5XX	服务器内部错误（500）

2 .5 HTTP请求示例

示例

"""
b'GET /favicon.ico HTTP/1.1\r\n  # 请求首行
Host: 127.0.0.1:8081\r\nConnection: keep-alive\r\n # 以下都是请求头
Pragma: no-cache\r\nCache-Control: no-cache\r\n
sec-ch-ua: "Chromium";v="92", " Not A;Brand";v="99", "Google Chrome";v="92"\r\n
sec-ch-ua-mobile: ?0\r\n
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.107 Safari/537.36\r\n
Accept: image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8\r\nSec-Fetch-Site: same-origin\r\n
Sec-Fetch-Mode: no-cors\r\n
Sec-Fetch-Dest: image\r\n
Referer: http://127.0.0.1:8081/\r\n
Accept-Encoding: gzip, deflate, br\r\n
Accept-Language: zh-CN,zh;q=0.9\r\n
\r\n
# 请求体
'
"""