HTTP协议、一个页面从输入url到呈现过程、文件上传、函数防抖与节流、同源和跨域

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
            }
        }

同源和跨域

同源和跨域的概念
同源指的是两个 URL 地址具有相同的协议、主机名、端口号。

同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能。浏览器的同源策略规定：不允许非同源的 URL 之间进行资源的交互。]

跨域指的是两个 URL 地址的协议、主机名、端口号三者中有一个或多个不同。出现跨域的根本原因：浏览器的同源策略不允许非同源的 URL 之间进行资源的交互。

跨域配置解决方案

突破浏览器跨域限制有两种方案：JSONP 和 CORS

CORS（服务端技术，暂时不研究）

CORS 是解决跨域数据请求的终极解决方案，全称是 Cross-origin resource sharing。该技术需要浏览器和服务器同时支持，二者缺一不可：
​ 浏览器要支持 CORS 功能（主流的浏览器全部支持，IE 不能低于 IE10）
​ 服务器要开启 CORS 功能（需要后端开发者为接口开启 CORS 功能）

​ CORS 的两个主要优势：支持 GET、POST、DELETE、PUT、PATCH 等这些常见的 Ajax 请求方式和只需要后端开启 CORS 功能即可，前端的代码无须做任何改动

​ 注意：我们之前做过的案例中，所有调用的接口均已在服务器端开启了 CORS 功能！

​ 例如：聊天机器人案例、新闻列表案例、用户登录案例

JSONP（需要服务端配合）

JSONP 是实现跨域数据请求的一种技术解决方案。它只支持 GET 请求，不支持 POST、DELETE 等其它请求。在实际开发中很少被使用，在面试中可能会问到 JSONP 的原理。

​ JSONP 不是真正的 Ajax 技术，在解决跨域问题时：
​ CORS 方案用到了 XMLHttpRequest 对象，发起的是纯正的 Ajax 请求
​ JSONP 方案没有用到 XMLHttpRequest 对象，因此，JSONP 不是真正的 Ajax 技术

​ 结论：只要用到了 XMLHttpRequest 对象，发起的就是 Ajax 请求！