[JavaScript][AJAX]onreadystatechange事件；AJAX含义及组成部分；AJAX工作原理/HTTP工作原理；一个页面从输入url到呈现网页过程；FormData对象；防抖

目录

onreadystatechange事件

AJAX含义及组成部分

AJAX工作原理/HTTP工作原理

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

TCP三次握手图示

渲染引擎渲染网页流程图 ​编辑

FormData对象

防抖与节流

防抖

节流

防抖和节流的异同点

---

onreadystatechange事件

XMLHttpRequest.onreadystatechange

只要 readyState 属性发生变化，就会调用相应的处理函数 。

这个回调函数会被用户线程所调用。

XMLHttpRequest.onreadystatechange 会在 XMLHttpRequest 的readyState 属性发生改变时触发 readystatechange 事件的时候被调用。

语法:

XMLHttpRequest.onreadystatechange = callback;

• 当 readyState 的值改变的时候，callback 函数会被调用。

    1. onload事件 ：  接收服务器响应的数（一次请求，只会执行一次）

    2. onreadystatechange事件 : 作用与onload事件一致（一次请求，会执行多次）

   

        每当 readyState 改变时，就会触发 onreadystatechange 事件。  

        readyState 属性存有 XMLHttpRequest 的状态信息。

        🏆XMLHttpRequest对象的状态码 （xhr.readyState）

            0: 请求未建立  (创建了xhr对象，但是还没调用open)

            1: 服务器连接已建立

            2. 请求已接收  (send之后,服务器已经接收了请求)

            3. 请求处理中

            4. 请求已完成，且响应已就绪 （ 4状态码等同于onload事件 ）

    //(1).实例化ajax对象
    let xhr = new XMLHttpRequest()

    console.log(xhr.readyState);//0创建了xhr对象,但是请求未初始化
    //(2).设置请求方法和地址
    xhr.open('post', 'http://ajax-base-api-t.itheima.net/api/login')
    console.log(xhr.readyState);//1 服务器连接已建立
    //(3).设置请求头（post请求才需要设置）
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')

    //(4).发送请求 ： 参数格式  'key=value' 
    xhr.send('username=admin&password=123456')
    console.log(xhr.readyState);//1 服务器连接已建立

    //(5).注册回调函数
    xhr.onreadystatechange = function () {
      console.log(xhr.readyState);//2  3   4
      if (xhr.readyState == 4) {
        console.log(xhr.responseText)
      }
    }

 

AJAX含义及组成部分

    AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

    AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

    AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

    AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

    1.A：Asynchronous(异步）

    异步：不会立即执行，而是过一会儿执行

    *回调函数,ajax,注册事件处理函数,定时器,延时器

    2. J : Javascript

    3.  A:and

    4. X:    XMLHttpRequest：负责发送ajax请求

🏆XML:作用与JSON一致，JSON没有出来之前的跨平台数据格式

AJAX工作原理/HTTP工作原理

🏆HTTP原理

- 1.什么HTTP协议 超文本传输协议（Hyper Text Transfer Protocol，HTTP）是一个简单的请求-响应协议

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

 2.HTTP协议组成部分

            2.1 请求报文

            2.2 响应报文

  3. 请求报文三个组成部分

            3.1 请求行 ： 包含请求方法, URL, 协议版本

            3.2 请求头 ： 浏览器告诉服务器，我给的数据是什么格式 （content-type在请求头中）

            3.3 请求体 ： post请求参数在请求体中

 

  4. 响应报文三个组成部分

            4.1 响应行 ： 包含协议版本, 响应状态码(高频面试题), 状态码描述

                2开头 ：

                *200 请求成功

                3开头 ： 重定向  302  

                4开头 ： 前端问题  

               

                *400参数错误  

                *401 :未验证  

                403:未授权  

                *404 :url错误  

                *405:方法写错  

                413:文件超出限制

               

                5开头 ： 后台问题  

                500 服务器bug,可以理解为后台java代码爆红

                 

            4.2 响应头 ： 浏览器告诉服务器，我给你的数据是什么格式 （浏览器会自动识别）

            4.3 响应体 ： 后台响应的数据，一般是json格式

 

  5.ajax原理： 设置http请求报文的过程  本质就是给服务器发送请求报文

    //(1).实例化ajax对象
    let xhr = new XMLHttpRequest()
    //(2).设置请求方法和地址    请求行
    xhr.open("post", "http://www.liulongbin.top:3009/api/login")
    //(3).设置请求头（post请求才需要设置） 请求头
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
    //(4).发送请求 ： 参数格式  'key=value'   请求体
    xhr.send("username=admin&password=123456")
    //(5).注册回调函数
    xhr.onload = function () {   //服务器返回的就是响应报文
      if (xhr.readyState == 4) {  //响应行
        console.log(xhr.responseText)  //响应体
      }
    }

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

    - 💎1.DNS域名解析： 将url中的域名解析成ip地址

   

    - 💎2.TCP三次握手： 建立安全的网络传输协议

   

      - 2.1 什么是TCP : 一种 传输控制协议 传输控制协议（TCP，Transmission Control Protocol）是一种面向连接的、可靠的、基于字节流的传输层通信协议

   

      - 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 呈现页面

TCP三次握手图示

渲染引擎渲染网页流程图 

 

FormData对象

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

 方法

       

FormData.append()

向 FormData 中添加新的属性值，FormData 对应的属性值存在也不会覆盖原值，而是新增一个值，如果属性不存在则新增一项属性值。

FormData.delete()

从 FormData 对象里面删除一个键值对。

FormData.entries()

返回一个包含所有键值对的iterator对象。

FormData.get()

返回在 FormData 对象中与给定键关联的第一个值。

FormData.getAll()

返回一个包含 FormData 对象中与给定键关联的所有值的数组。

FormData.has()

返回一个布尔值表明 FormData 对象是否包含某些键。

FormData.keys()

返回一个包含所有键的iterator对象。

FormData.set()

给 FormData 设置属性值，如果FormData 对应的属性值存在则覆盖原值，否则新增一项属性值。

FormData.values()

返回一个包含所有值的iterator对象

    //1. file表单注册change
    document.querySelector('input[type="file"]').addEventListener('change', function () {
      //2.获取选中文件
      console.log(this.files[0]);
      //3.创建FormData，添加文件
      const fd =new FormData()
      fd.append('avatar', this.files[0])
       })

防抖与节流

防抖

 1.函数防抖：单位时间内频繁触发事件以最后一次为准

(1）防抖经典场景：搜索框输入防抖

（2）防抖实现核心思路：

a.将事件处理函数放入一个定时器中

b.每一次触发事件的时候，先清除上一次事件的定时器

*只要用户不断触发事件，之前的定时器都会被清除。不触发事件，定时器到时间了就会自动执行

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="text" placeholder="请输入文本">

    <script>

        let timeId = null
        document.querySelector('input').addEventListener('input', function () {
            // 每一次触发事件, 先清除上一次定时器。
            clearTimeout(timeId)
            // 开启本次计时器
            timeId = setTimeout(() => { console.log(this.value); }, 300)
        })

    </script>
</body>

</html>

节流

2.函数节流：单位时间内频繁触发事件只会执行一次

（1）节流经典场景：解决滚动条高频事件触发

（2）节流实现核心思路：开关控制节流阀

a.声明一个布尔类型开关

b.触发事件的时候，如果开关为true.就执行事件I+开启节流定时器把开关变成true

c.每一次触发事件,把开关改为false,并且在定时器中修改为true

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    body {
        width: 1000px;
        height: 3000px;
    }
</style>

<body>
    <input type="text" placeholder="请输入文本">

    <script>

        let i = 0
        let flag = true
        window.onscroll = function () {
            // 如果是开启状态
            if (flag) {
                flag = false
                setTimeout(function () {
                    console.log(`触发事件${++i}次`);
                    flag = true
                }, 400)
            }
        }

    </script>
</body>

</html>

防抖和节流的异同点

3.防抖和节流的异同点：

相同点：都是减少事件触发的次数，从而提高页面的性能

不同点：场景不同

防抖：用户主动触发的事件（输入框输入|）

节流：事件本身高频触发（滚动事件）