Ajax（day01大理论）

最新推荐文章于 2022-10-11 19:33:27 发布

September_MOTH

最新推荐文章于 2022-10-11 19:33:27 发布

阅读量71

点赞数

分类专栏： web前端入门

本文链接：https://blog.csdn.net/weixin_51341201/article/details/119530602

版权

web前端入门专栏收录该内容

38 篇文章 2 订阅

订阅专栏

AJAX

一、HTTP协议

URL

http://www.link.com/public/index.html
结构: 协议+主机名称+目录结构+文件名称

URL 完整的结构
< scheme >://< user >:< pwd >@< host >: < port >/< path >;< params >?< query >#< frag >

< scheme >

方案, 协议。以那种方案获取服务器资源
不区分大小写。常见的协议 http、https、ftp、file

< user >:< upwd >

登陆这个服务器的用户名和密码

< host >

主机名称
127.0.0.1 IP地址或者 www.baidu.com
表示你要访问的服务器, 在网络上具体的门牌号

< port >

端口号在主机上, 程序开启服务, 会对应一个唯一的端口号
127.0.0.1:8080
端口理论最大值 2^16-1 0~65535 不要修改 0~1024的端口
0~1024 端口都是系统端口

< path >

路径, 结构目录, 资源在服务器上存放的位置

< params >

参数, 跟踪状态的参数 session/cookie

< query >

get 方法提交请求时, 问号后的查询字符串

< frag >

锚点
HTTP 协议

HtperText Transfer Protocol 超文本传输协议
规范了数据是如何打包传递的（专门为了用于传递 HTML文件）

HTTP 协议的历史
web请求的原理
消息/报文 Message

请求消息 Reuest Message(请求起始行、请求头信息、请求主体)
响应消息 Response Message(响应起始行、响应头信息、响应主体)
请求消息 Request Message

请求消息, 客户端发送给服务器的数据块
由三部分组成: 请求起始行、请求头信息、请求主体
- 请求起始行 (面试常考内容)
  (HTTP协议规定的请求的方法和 Restful 规则的方法对比)
  1、 HTTP协议规定的请求的方法
  - get 明文传参, 上限 2kb, 向服务器要数据时使用, 无请求主体
  - post 隐式传参, 无大小限制, 给服务器数据时使用, 有请求主体
  - put 放置到服务器, 一般会被禁用
  - delete 把服务器上的某个文件删除, 一般被禁用
  2、 Restful API
  Restful API 是一种规则, 利用 HTTP 已有的 4 个方法定义了 4 个行为, 使用这 4 个行为发送请求
  - get 查数据时使用, 无请求主体, 后台 req.query
  - post 创建（增）, 有请求主体, 后台 req.body
  - put 修改（改）, 有请求主体, 后台 req.body
  - delete 删除（删）, 无请求主体, 后台 req.query
  2、协议版本号
  3、请求的 URL
- 请求头信息
  
  1、Host: www.tmooc.cn
  客户端告诉服务器。我要访问 www.tmooc.cn 这个主机
  
  2、Connection: keep-alive
  客户端告诉服务器, 请开启持久连接
  
  3、User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)…
  告诉浏览器, 我这个浏览器的类型和版本号
  
  4、Accept-Encoding: gzip
  告诉服务器, 浏览器可以接收的压缩格式
  
  5、Accept-Language: zh-CN,zh;q=0.9
  告诉服务器, 我这个浏览器可以接收的自然语言的类型
  
  6、Referer: https://www.tmooc.cn/search/index.shtml
  告诉服务器, 当前的请求是来源于那个页面
- 请求主体
  
  form-data
  get/delete 没有请求主体
  post/put 有请求主体
响应消息 Response Message

响应消息, 服务端响应给客户端的数据块
由三部分组成: 响应起始行、响应头信息、响应主体
- 响应起始行
  HTTP/1.1 200 OK
  
  1、协议版本号
  2、响应状态码
  
  服务器告诉客户端, 服务器的 响应状态码
  1XX: 正在请求, 提示信息
  
  2XX: 响应成功
  3XX: 重定向
  - 301 永久重定向
  - 302 临时重定向
  - 304 请求未改变, 命中缓存
  4XX 请求资源
  - 404 not found 请求资源不存在
  - 403 权限不够
  - 405 请求方法不允许
  5XX 500服务器代码出错
  3、原因短句, 对响应状态码的解释
- 响应头信息
  
  1、Date: Sun, 08 Aug 2021 11:32:35 GMT （格林威治时间）
  告诉浏览器服务器响应的时间点
  
  2、Connection: keep-alive
  服务器告诉浏览器, 我已经打开了持久连接
  
  3、Content-Type: text/html
  告诉浏览器, 响应主体的类型是什么
  
  text/html 响应回来的数据是 HTML 文本
  text/css 响应回来的是 css 文本
  application/javascript js 文本
  application/xml xml 文本
  application/json json 文本
  image/jpg
  image/png
  image/gif
  image/jpeg
- 响应主体
  
  服务器传递给浏览器的数据
总结图
缓存

客户端将服务器响应回来的数据, 进行自动保存
当再次访问时直接使用保存的数据

缓存的优点
1、减少了冗（rong）余的数据传输, 节省了用户流量
2、节省了服务器的带宽
3、降低了对服务器资源的消耗和运行的要求
4、降低了由于远距离传输而造成的加载延迟

缓存原理（新鲜度和过期时间）

1、请求—>无缓存—>连接服务器—>存缓存—>客户端渲染

2、请求—>有缓存—>新鲜度没过—>使用缓存—>客户端渲染

3、请求—>有缓存—>不新鲜—>服务器确认是否过期—>没过期—>更新新鲜度—>客户端渲染

4、请求—>有缓存—>不新鲜—>服务器确认是否过期—>过期了—>连接服务器—>存缓存—>客户端渲染

操作缓存（需要前端和后端都写代码）

缓存相关的消息头（请求头Rquest Headers）
Cache-Control: max-age=0 单位是 s (0为不缓存)
从服务器将文档传递到客户端之时
此文档处于新鲜的秒数, 是一个对应时间

修改请求消息头

< meta http-equiv=“Cahe-Control” content=“max-age=3600” >
语法:
< meta http-equiv=“消息头” content=“值” >
HTTP 性能优化

HTTP 的连接过程
发送请求 —> 建立连接 —> 服务器处理请求 —> 访问资源 —> 构建响应 —> 发送响应 —> 记录日志

http 连接的性能优化

1、减少连接创建的次数（开启持久连接）
2、减少请求的次数（代码设计更合理）
3、提高服务端运行的速度
4、尽可能的减少响应数据的长度
安全的 HTTP 协议, HTTPS

HTTPS, 是安全版本的 http协议
S:SSL 为数据通信提供安全支持

1、客户端发送请求—> SSL层加密—> 服务器接收到加密文件—>SSL层解密, 得到请求明文, 对请求做处理

2、服务器发送响应 —> SSL层加密 —> 客户端得到加密文件 —> SSL层解密, 得到响应明文, 解析执行内容

September_MOTH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax（day01大理论）

AJAX一、HTTP协议URLhttp://www.link.com/public/index.html结构: 协议+主机名称+目录结构+文件名称URL 完整的结构< scheme >://< user >:< pwd >@< host >: < port >/< path >;< params >?< query >#< frag >< scheme >方案
复制链接

扫一扫