Ajax前奏之HTTP与缓存

作者: 槿丶 | 来源:发表于2018-12-05 16:28 被阅读3次

Ajax前奏之HTTP与缓存
ajax的总结
jquery使用（一）：ajax
HTTP之缓存
浏览器优化
web性能优化
ajax，本地存储
前端缓存之HTTP缓存
前端页面优化总结
promise封装常用方法

协议

世界上任何一幢建筑必须有一个“地址”才能被找到。互联网上的任何一个资源必须有一个“URL”才能被访问

URL的完整格式

<scheme>://<user>:<pwd>@<host>:<port>/<path>;<params>?<query>#<frag>
- scheme：方案，指定以哪种协议从服务器获取指定资源；
  - 方案名不区分大小写。常见方案：HTTP、HTTPS、FTP、MAILTO、RTSP、FILE、NEWS、等
- host：主机名，资源所在服务器的IP地址或者域名（需要DNS转换为IP地址）
- port：端口号，每项服务在服务器上都对应一个监听端口号
```
http://www.baidu.com:80
```
- path：路径，服务器上资源的本地名称，由一个斜杠（/）将其与前端的URL组件分割开来
- params：参数，某些方案会使用参数来指定输入参数，每个参数都采用“名/值对”形式，一个URL中可以有多个这样的“名/值对”，使用分号（;）分隔
- frag：片段，也称锚点、TAG（书签），指一个资源中某一部分的店名字。应用对象时，不会讲frag字段传给服务器，改字段是在客户端内部使用的，通过#与其他部分分隔
  
  ......

主机/端口号

严格来讲，计算机中对外提供的服务程序可以绑定到任何一空闲端口上，从而实现监听客户端连接请求的任务
常见协议指定了一些默认端口号，应努力避免混用

常见协议	默认端口号	协议基本作用
FTP	21	文件上传、下载
SSH	22	安全的远程登录
TELNET	23	远程登录
SMTP	25	邮件传输
DNS	53	域名解析
HTTP	80	超文本传输
POP3	110	邮件接收
HTTPS	443	加密传输的

HTTP协议

作用：
- 规范了数据是如何打包的，以及数据是如何传递的
Message 消息/报文
- Message值得是HTTP客户端再服务器间传递的数据块
- 分类：
  - Request Message：客户端向服务器发送的请求消息
  - Response Message：服务器端根据客户端的请求消息，返回给客户端的响应消息
请求消息（Request Message）
- 请求起始行
  - 请求方法
    1. GET：
      - 表示客户端向获取服务器上的资源（img/js...）
      - 特点：
        
        无请求主体
        
        依靠地址栏传递数据给服务器
    2. POST
      - 表示客户端想传递数据给服务器
      - 特点：
        
        有请求主体
    3. PUT
      - 表示客户端想把文件放到服务器上(禁用)
      - 特点：
        
        有请求主体
    4. DELETE
      - 表示客户端想要删除服务骑上指定的文件（禁用）
    5. HEAD
      - 表示只想获取指定的响应头
    6. CONNECT
      - 测试连接
    7. TRACE
      - 追踪请示路径
    8. OPIONS
      - 选项，保留以后使用......
  - 请求URL
  - 协议和版本号
- 请求头
  1. Host：localhost
    - 告诉服务器请求哪一个虚拟主机
  2. Connection：keep-alive
    - 告诉服务器做持久连接
  3. User-Agent
    - 服务器，客户端浏览器类型
  4. Cache-Control：max-age=0
    - 告诉服务器缓存的信息，max-age,即不缓存
  5. Accept-Language：zh-CN
    - 告诉服务器自己能接收的自然语言
  6. Accept-Encoding：gzip
    - 告诉服务器自己能接收的压缩类型
  7. Referer：url
    - 告诉服务器请求来自哪个页面
- 请求主体
  - Query String：不算作请求主体的，是属于URL中的一个部分
响应消息（Response Message）
- 响应起始行
  1. 协议版本号
    
    HTTP / 1.1
  2. 响应状态码
    - 1xx：提示信息
    - 2xx：
      - 200：服务器端成功响应所有的信息
    - 3xx：需要客户端进行重定向
      - 301：永久重定向
      - 302：临时重定向
      - 304：Not Modifed
    - 4xx：客户端请求错误
      - 404：Not Found请求资源不存在
      - 403：Forbidden没有访问权限
      - 405：Method Not Allowed请求方法不被允许
    - 5xx：服务器运行错误
      - 500：服务器内部错误
      - 501：没有实现
  3. 原因短句：对状态码的简单解释
    - 200：OK
    - 404：Not Found
      
      ......
- 响应消息头
  1. Content-Type:text/html;charset=utf-8
    - 响应的主体类型，告诉浏览器，响应的数据是什么格式以及什么类型的
    - text/plain：告诉浏览器按纯文本的方式解析
    - text/html：告诉浏览器按html的格式解析内容
    - text/css：告诉浏览器按css的方式解析
    - application/javascript：js代码片段，按JS的方式运行数据
    - application/xml：按xml的方式解析
    - application/json：按json的方式解析
- 响应主体
  - 由服务器端响应回来的数据

缓存

缓存的工作原理
- 客户端可以自动保存自动保存已访问过的文档的副本，这些副本就是所谓的混村
- 当客户端再向同一URL发送请求时，那么就直接从缓存中将文件取出来，而不用再重新发送请求
优点
- 减少了冗余的数据传输，节省流量
- 缓解服务器带宽瓶颈问题，服务器可以节省更多的带宽
- 降低了服务器的资源消耗和运行要求
- 见底了由于远距离而造成的加载延迟
与缓存相关的消息头
1. Cache-Control
  - 作用：从服务器将文档传来之时起，认为新鲜的秒数
  - 取值：秒数 60 / 3600 / ......(如果取值为0或者no-cache，则表示每次都要重新刷新网页)
2. Expires
  - 明确指定缓存的过期时间，取值是格林尼治标准时间（GMT）
  - Expires：0表示不需要缓存
如何在网页设置消息头
1. http-equiv：指定消息头的名称
2. content：指定消息头对应的内容
```
<meta http-equiv="Content-Type" content="text/html"
```

DOM操作（让JS有能力操作页面的元素）

DOM：Document Object Model文档对象模型

使用JS获取页面上的某个元素
- 为元素增加ID（这里不只ID，其他：比如class也能获取到）
- 在JS中，允许通过元素ID获取页面元素
```
<div id=“box”></div>
<script>
   var box = document.getElementById("box")    
</script>
```

修改/获取标记内的内容

属性：innerHTML

赋值：为某元素的innerHTML属性赋值

取值：获取某元素的innerHTML属性

<div id=“box”></div>
<div id=“box2”>哈喽</div>
<script>
   var box = document.getElementById("box");
   var box2 = document.getElementById("box2");
   box.innerHTML="你好";
   console.log(box.innerHTML);//你好
   console.log(box2.innerHTML);//哈喽
</script>