前后端数据交互与http

该文一部分内容来源于维基百科 chatgpt mdn 掘金等大网站之杂糅

学习前端开发中关于 HTTP 的内容，你需要掌握以下几个方面：

1. HTTP协议的基本概念和工作原理：包括HTTP请求和响应的格式、状态码、头部信息等。

2. HTTP请求方法和常用响应状态码：包括GET、POST、PUT、DELETE、200、404、500等。

3. HTTP Cookie和Session的应用：理解Cookie和Session的基本概念、原理和使用方法。

4. HTTP缓存机制：掌握浏览器缓存、服务器缓存的工作原理和使用方法。

5. HTTPS协议的安全机制：了解HTTPS协议的工作原理、SSL/TLS协议的加密过程和证书验证等。

6. AJAX技术的应用：掌握AJAX技术的基本原理和使用方法，以及如何使用AJAX实现异步加载数据。

7. Web性能优化：了解HTTP请求的性能优化技巧，如减少HTTP请求、使用CDN、压缩资源等。

http协议的基本概念以及工作原理：

HTTP是基于 TCP/IP 的，HTTP是一个客户端（用户）和服务端（网站）之间请求和应答的标准，通常使用TCP协议。一个应用层的协议，所有的www网站都要遵循的协议

1，前端（客户端）向服务器 发送请求 

请求类型1:没有数据交互的请求 只是读取显示页面内容

请求类型2:带有数据交互的请求 向服务器发送请求 同时携带参数

2，服务器接受前端（客户端）请求

验证请求的合法性 如果是 非法请求 就会被服务器拦截

如果是合法请求 如果没有数据交互 服务器读取对应的文件内容 相应给 前端（客户端）

如果有 数据交互 服务器 将请求 和 参数 发送给 服务器的后端程序 （java php py nodejs）

3，后端程序 操作数据库

根据前端 （客户端）的请求和携带参数 操作 数据库数据 操作结果 数据库返回给后端程序 后端程序返回给服务器 服务器返回给前端（客户端）

http协议

概念  所谓的协议 就是 双方遵守的条约/规范

http协议 有线网络传输时 客户端和服务器 遵守的规范 

也就是客户端和服务器通过有线网络 发送请求 接受相应 时遵守的协议规范 

https协议 加密的http

客户端 先给服务器发送请求 请求创建链接 服务器给客户端发送一个密钥

客户端 按照秘钥对 发送请求内容 进行加密 将加密内容 发送给服务器

客户端和服务器的密钥 是一一对应的

http协议内容 

 三次握手 四次挥手 请求报文 响应报文

三次握手：
通过TCP/IP协议实现的 是在客户端 和服务器 正式创建链接之前执行的程序

目的是为了确认 客户端和服务器 都正常工作

判断内容

客户端和服务端都要 确定客户端 正常接受 正常发送请求

，确定服务端 正常接受 正常发送请求。

第一次握手 

客户端---服务器 发送请求。客户端：客户端可以正常发送请求  服务器：客户端可以正常发送请求， 服务器可以正常接受请求

第二次握手

服务器 ---客户端 发送请求 

客户端： 客户端可以正常 接收请求， 服务器可以正常 发送请求， 服务器可以正常 接收请求

服务器：服务器可以正常发送请求

第三次握手 

客户端---服务器 发送请求

服务器 ：客户端可以正常接受请求

四次挥手：

通过TCP/IP协议实现的

在客户端和服务器正式断开链接之前执行的程序

确保 客户端和服务器 是正常 断开链接的

第一次挥手

  客户端---服务器 发送请求

   客户端 告诉 服务器 客户端要关闭了 要断开链接了

第二次挥手 

 服务器---客户端 发送请求

 服务器 告诉 客户端 服务器知道客户端要关闭了 

服务器也要准备关闭了

客户端 还有没有其他操作了

如果客户端 相应 服务器的请求 证明 客户端还有要继续执行的操作 服务器就会

终止 断开 链接操作

如果客户端没有响应古物器的请求 证明客户端没有要继续执行 的操作

服务器就会继续执行 断开链接操作

第三次挥手

服务器---客户端发送请求

服务器 告诉 客户端 服务器已经关闭了

服务器关闭之后

服务器不再发送请求

服务器可以接受请求

第四次挥手 

客户端---服务器 发送请求

客户端 告诉 服务器 客户端 已经关闭了

客户端关闭后

客户端不再接受请求

但是可以发送请求（王师北定中原日 家祭无忘告乃翁

请求报文 

是 客户端 向服务端 发送请求时执行的 http协议程序 （不好查看 请求报文的源码程序 在浏览器控制台中 可以显示 请求报文的相关数据信息

请求报文 组成部分 

请求行

post 请求方式

/demo.html请求地址

http/1.1 请求协议和版本

请求头

accept 前端期望接收后端响应内容的格式

host： 服务器域名/ip地址+端口号

origin：完整的请求地址 请求协议 + 服务器域名 +端口号

referer：完整请求地址 和文件路径

user-agent： 浏览器 版本信息

请求头 关键信息内容

post请求方式 必须设定的请求头格式  Content-Type ：application/x-www-form-urlencoded

get方式没有 现在是 form标签自动配置 之后ajax需要手动配置

请求空行

浏览器没有显示

请求体

get方式 理论上 没有请求体 get方式是通过浏览器地址栏携带参数

post 方式才会有请求体内容

但是浏览器为了显示 请求参数方便 get方式也会显示请求体

响应报文

响应行响应头

响应行 

协议/版本 http协议状态码

http 协议状态描述

响应头

 server 服务器程序和版本

date 服务器时间 是 世界标准时间

content-type 响应内容格式

x-power-by 后端程序/版本

响应体

后端程序 输出的内容结果

08http状态码

使用数值表示http请求 执行状态

数值范围为 100-599

100-199 表示链接成功 服务器等待客户端进一步操作

200-299  表示 请求执行结束 并且请求执行成功

300-399 表示当前请求是重定向请求

400-499  表示 请求执行结束 并且请求执行错误 原因是客户端程序 错误 引起

500-599  表示 请求执行结束 并且请求执行错误 原因是服务器程序 错误 引起

ajax请求

异步的JavaScript 使用http协议 完成的局部数据交互

最初只能通过 JavaScript 和 XML 进行数据交互

现在 可以和 html所有程序 进行数据交互