HTTP协议

1.什么HTTP协议

协议指的是规定浏览器跟服务器交互的数据格式

2.浏览器请求必须是：`请求报文`

3.服务器响应必须是：`响应报文`

4.请求报文与响应报文的数据格式如下

a.请求报文
- (1)请求行：包含请求方法, URL, 协议版本
- (2)请求头：包含请求的附加信息, 由关键字/值对组成
  浏览器告诉服务器，我给的数据是什么格式（content-type在请求头中）
- (3)请求体：浏览器发送给服务器的数据(参数) post请求参数在请求体中
b.响应报文
- (1)响应行：包含协议版本, 状态码, 状态码描述
  - 1xx, 指示信息, 表示请求已接收, 继续处理
  - 2xx, 成功, 表示请求已被成功接收和处理. 请求成功 200
  - 3xx, 重定向, 表示要完成请求必须进行更进一步操作 重定向 302
  - 4xx, 客户端错误, 表示有语法错误或请求无法实现
    前端问题 400参数错误 401 没有权限 404 url错误
  - 5xx, 服务器端错误, 表示服务器未能实现合法的请求
    后台问题 500 服务器bug,可以理解为后台java代码爆红
- (2)响应头:content-type 返回的数据格式，jQuery自动转JSON就是根据他来判断的
- (3)响应体：服务器响应给浏览器的数据（xhr.responseText）一般是json格式

请求头：post请求才需要设置

xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
xhr.setRequestHeader("Content-type", "application/json")

5.ajax原理：设置http请求报文的过程

在这里插入图片描述

一个页面从输入url到呈现过程

在这里插入图片描述

1.DNS域名解析：将url中的域名解析成ip地址
2.TCP三次握手：建立安全的网络传输协议
- 2.1 什么是TCP : 一种传输控制协议
- 2.2 TCP作用 : 保证HTTP网络传输是安全 + 可靠的（检测客户端与服务器的网卡是不是通的）
- 2.3 TCP三次握手 :
  
  第一次: 浏览器 -> 服务器 (你能听到我说话吗?,检测浏览器:发送)
  
  第二次: 服务器 -> 浏览器 (我听到了,你能听到我说话吗。检测浏服务器: 接收 + 发送)
  
  第三次: 浏览器 -> 服务器 (嗯,我听到了. 检测浏览器: 接收)
3.HTTP建立连接
- 3.1 客户端发送请求
- 3.2 服务器处理请求
- 3.3 服务器响应请求
4.渲染引擎开始渲染响应返回的HTML文本
- 4.1 解析html生成：dom树
- 4.2 解析css生成：样式树
- 4.3 dom树与样式树合并得到渲染树
- 4.4 呈现页面

文件上传

文件上传必须要FormData对象：因为文件数据和文本数据在传输的时候，数据格式不同。需要formdata对象进行自动处理。

文件上传思路总结 :

  1. 给file表单注册onchange事件 
    * 当用户选择图片之后执行
  2. 获取用户选择的图片 
    * this.files[0]
  3. 创建FormData对象 
    * 只有FormData才可以上传文件
  4. 将图片添加到FormData对象中 
    * fd.append('参数名', this.files[0])
  5. 发送ajax请求
    * 文件上传请求方法一定是post, 且请求参数为 FormData对象

accept 属性表示可选择的文件类型
image/* 表示只允许选择图片类型的文件

<input  type="file"  id="iptFile"  accept="image/*"  style="display: none" />

dom对象.onclick() : 只能触发你自己注册的onclick事件，没注册触发不了
dom对象.click() : 模拟鼠标点击。触发注册的onclick事件 + 默认点击事件

// 非空判断，如果内容为undefined，给出提示
//this : file表单
let file = this.files[0]
if (file == undefined) {
  return alert("请选择上传文件！")
}

创建临时url ： URL.createObjectURL()

let fileIcon = this.files[0]
let url = URL.createObjectURL(fileIcon)

函数防抖

1.函数防抖：单位时间内，频繁触发事件，只会触发最后一次
2.函数防抖实际开发应用场景：实时获取输入框文本
3.函数防抖流程：
3.1 声明全局变量存储定时器ID
3.2 每一次触发事件, 先清除上一次定时器。然后将事件处理代码放入本次定时器中

        let timeID = null
        document.querySelector('input').oninput = function(){
            
            //清除上一次定时器
            clearTimeout(timeID)
            //开启本次定时器. 500ms内用户没有触发，自动执行定时器代码。 
            timeID = setTimeout(()=>{
                console.log(`发送ajax请求，搜索内容为${this.value}`)
            },500)            
        }

函数节流

1.函数防抖 : 单位时间内，频繁触发事件，只会触发一次
2.经典应用场景：滚动条事件
3.函数防抖流程：
3.1 声明全局变量存储上一次触发交互时间
3.2 每一次触发事件, 获取当前时间与上一次时间做比较。判断是否超过节流间隔
3.3 如果超过节流时间，则执行事件处理代码。并且存储本次触发时间。

        let lastTime = null
        window.onscroll = function(){
            //判断时间间隔
            let currentTime = Date.now()
            if( currentTime - lastTime >= 500 ){
                console.log('执行滚动条事件处理代码')
                //存储本次触发时间
                lastTime = currentTime
            }
        }