Ajax原理

威仔敲烂了键盘

已于 2022-08-29 21:56:51 修改

阅读量421

点赞数 1

分类专栏：前端文章标签：前端

于 2022-08-25 23:04:05 首次发布

本文链接：https://blog.csdn.net/Hw111520/article/details/126534032

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

客户端和服务器通信过程

请求:客户端通过网络去找服务器要资源的过程
响应:服务器把资源通过网络发送给客户端的过程

URL地址(统一资源定位符)

用来表示服务器上每一个资源的确切访问路径

一个url地址是由:协议,主机号,端口号,资源的存放路径组成

ajax技术特点:

在网页不刷新的情况下,请求数据

作用:局部刷新

/ ajax技术特点:网页不刷新的情况 请求数据
        // 作用:局部刷新
        // 内置对象 XMLHttpRequest:负责发送ajax请求
        // 1.创建xhr对象
        let xhr = new XMLHttpRequest()
        //  2.设置请求方法method和地址url
        xhr.open('get', 'https://autumnfish.cn/api/joke')
        // 3.发送请求
        xhr.send()
        // 4.注册响应事件
        // 这个事情什么时候执行:服务器响应数据给我们就会执行
        // 时间长短取决于:网速(带宽,服务器,数据大小,天气因素等)
        xhr.onload = function () {
            console.log(xhr.responseText)
        }

ajax工作流程(原理)

创建xhr对象
设置请求方法和地址(如果是post 方法要设置请求头)
发送请求
注册响应事件

// 1.创建xhr对象
        let xhr = new XMLHttpRequest()
        //  2.设置请求方法method和地址url
        xhr.open('get', 'https://autumnfish.cn/api/joke')
        // 3.发送请求
        xhr.send()
        // 4.注册响应事件
        // 这个事情什么时候执行:服务器响应数据给我们就会执行
        // 时间长短取决于:网速(带宽,服务器,数据大小,天气因素等)
        xhr.onload = function () {
            console.log(xhr.responseText)
        }

🔔拦截器:

在请求或响应被then或catch处理前拦截它们

axios拦截器执行流程:

axios发送请求
执行请求拦截器(发送服务器之前执行)
发送给服务器
服务器响应请求
执行响应拦截器(then方法之前执行)
执行axios的then方法

// 添加请求拦截器
    axios.interceptors.request.use(function (config) {
      // 在发送请求之前做些什么
      // 显示拦截器
      document.querySelector('.loading-box').style.display = 'block'
      return config;  //把请求配置(路径,方法,地址)发送给服务器
    }, function (error) {
      // 对请求错误做些什么
      return Promise.reject(error); //如果请求错误,浏览器会爆红
    });

    // 添加响应拦截器
    axios.interceptors.response.use(function (response) {
      // 对响应数据做点什么
      // 隐藏能够拦截器
      document.querySelector('.loading-box').style.display = 'none'
      return response;//把响应数据给then方法的res
    }, function (error) {
      // 对响应错误做点什么
      return Promise.reject(error);//如果响应错误,浏览器会爆红
    });

🔔get和post区别

传参方式不同:get在url里面拼接(请求行),post在请求体中发送
传参速度不同:get传输快,post传输慢
数据大小不同:get有大小限制,一般2~5MB,post没有大小限制(文本上传)
安全性不同:get安全性低,post安全性高(登录,注册必须是post)

  // 1.get请求传参 :直接在url后面拼接参数
        // 格式:url?key=value
        // 2.post请求参数:需要做两件事情
        // (1)设置请求头,固定代码
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencode')
        // (2)参数在send方法里面拼接
        xhr.send('key=value')
        // 3.get与post区别:传参方式不同
        // get(url拼接)"url?key=value"
        // post(请求体):xhr.send(key=value)


        //(1).实例化ajax对象
        let xhr = new XMLHttpRequest()
        //(2).设置请求方法和地址
        xhr.open('post', '')
        //(3).设置请求头（post请求才需要设置）
        xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
        //(4).发送请求 ： 参数格式  'key=value' 
        xhr.send('key=value')
        //(5).注册回调函数
        xhr.onload = function () {
            console.log(xhr.responseText)
        }

🔔 Ajax技术组成部分(异步的JS与XML)

Asgnchronous Javascript And XML

A:Asynchronons(异步) :不会立即执行,而是过一会执行(定时器,Ajax,事件处理函数)
J:Javascript
A:And
X:XMLHttpRequset:负责发送ajax请求. XML作用与JSON一致,JSON没有出来之前的跨平台格式由xml处理

🔔onreadyStatechange事件和xml请求状态码

onreadstatechange事件:ajax状态发生变化的时候执行

onload事件:一次请求,只会执行一次

onreadystatechange事件:一次请求,会执:行多次

xhr对象的状态码readState(ajax的状态码):

0 : 创建xhr对象,请求未初始化
1 : 执行open方法,链接已简历
2 : 请求:请求已发送服务器
3 : 处理: 服务器处理中
4 : 响应 :服务器处理结束,响应数据

🔔AJax原理

ajax原理:本质就是给服务器发送请求报文

请求报文组成三部分:

请求行:请求方法+请求地址
请求头:浏览器告诉服务器数据是什么格式
请求体:请求参数

响应报文组成三部分:

响应行:服务器响应状态码
响应头:服务器告诉浏览器响应的数据格式
响应体:服务器响应数据

服务器常见的几种响应状态码:

2xx:请求成功(200)
3xx:重向(302:服务器重定向,服务器主动修改)
4xx:浏览器问题 (404:url错误 400:参数错误 401:未认证 403:没有权限 405:请求方法错误 413:文件大小超出限制)
5xx:服务器出问题

http协议:

http协议是网络传输协议(协议:规定网络传输格式)

http协议组成:请求报文(浏览器发送请求)+响应报文(服务器响应)

🔔上传文件流程:

给file表单注册change事件
获取用户选择的文件
创建formData对象
发送ajax请求

fd会做两件事件:(1)修改请求头为文件请求头:mulipart/form-data (2把图片转为二进制)

//(1).给file表单注册onchange事件 
    document.querySelector('#iptFile').addEventListener('change', function () {
      // console.log(this.files) (2) 获取用户选择的文件
      // console.log(this.files[0]); 数组 文件1   [文件1,文件2]
      // (3)创建formData对象
      const fd = new FormData()
      fd.append('avatar', this.files[0])
      // 发送ajax请求
      axios({
        url: 'http://www.liulongbin.top:3009/api/upload/avatar',
        method: 'post',
        data: fd
        // fd会做两件事件:(1)修改请求头为文件请求头:multipart/form-data (2)把图片转为二进制
      }).then(res => {
        //成功回调
        console.log(res)
        document.querySelector('img').src = `http://www.liulongbin.top:3009${res.data.url}`
      })
    })

🔔网页从输入到url输入到呈现工程

DNS解析:把域名解析成ip地址
TCP链接三次握手:建立安全可靠的传输协议 2.1 TCP:一种传输控制协议 2.2 TCP作用:保证HTTP网络传输是安全+可靠的(检测客户端与服务器的网卡是不是通的) 2.3 TCP三次握手: 第一次:浏览器 -> 服务器第二次:服务器 -> 浏览器第三次:浏览器 -> 服务器
HTTP请求:网络传输协议 3.1 浏览器发送请求 3.2 服务器处理请求 3.3 服务器响应请求
服务器响应数据之后,渲染引擎开始渲染页面 4.1 解析html生成:dom树 4.2 解析css生成:样式树 4.3 dom树与样式树合并得到渲染树 4.4 呈现页面

🔔函数防抖

函数防抖就是在单位时间内,频繁触发事件,以最后一次为准

(1)使用场景:输入框输入防抖

(2)防抖实现核心思路:

开启定时器
每一次触发事件时,清除上一次的定时器(只要用户不断输入事件,之前的定时器就会被清除,不触发事件,定时器到了就会自动执行)

  //  函数防抖:在单位时间内,频繁触发事件,以最后一次为准
        //   (1)使用场景: 输入框输入防抖
        //   (2)防抖实现核心思路:
        //   1.开启定时器
        //   2.每一次触发事件时,清除上一次的定时器 
        //  *只要用户输入不断触发事件,之前的定时器都会被清除.不触发事件,定时器到了就会自动执行

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

🔔函数节流

函数节流就是单位时间内频繁触发事件只执行一次

(1)节流场景:解决高频事件触发(滚动条,鼠标)

(2)节流实现核心思路:

开关控制节流阀
触发事件的时候,把开关改成true,就执行事件.false不执行
每一次触发事件的时候,把开关改成false,并且在定时器中修改为true

 /*
            函数节流:单位时间:单位时间内 频繁触发事件 只执行一次
            (1)节流场景:解决高频事件触发(滚动条,鼠标)
            (2)节流实现核心思路:  a.开关控制节流阀 
                                 b.触发事件的时候,把开关改成true,就执行事件,false不执行
                                 c.每一次触发事件的时候,把开关改为false,并且在定时器中修改为true 
    */
        let flag = true
        let i = 1
        window.onscroll = function () {
            if (flag) {
                flag = false
                console.log(`触发次数:${i++}`)
                // 开启节流定时器
                setTimeout(function () {
                    flag = true
                }, 200)
            }
        }

🔔函数防抖和节流的异同点:

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

不同点:场景不同

防抖:用户主动触发的事件(输入框输入,鼠标移入)

节流:事件本身高频率触发(滚动事件,鼠标移动)

前端访问方式

地址栏输入网址URL
html的a标签href属性(不需要条件)
Js中location,href=URL(需要条件)
Ajax技术,网页不刷新的跳转,向服务器请求数据

使用Ajax请求数据的方式

get 从服务器获取数据
post 向服务器新增数据
delete 删除服务器上的数据
put 更新服务器上的数据(侧重于完整更新)
patch 更新服务器上的数据(侧重于部分更新)

button class="but1">发送请求</button>
    <button class="but2">发送post请求</button>
    <script src="../axios.js"></script>
    <script>
        /*  
         axios({
            url: '请求路径',
            method: 'get',
            data: { 'post请求参数'},
            params: { 'get请求参数'}
        }).then(res => {
            //成功回调
            console.log(res)
        })


            // axios注意点:res对象并不是服务器响应的原始数据,而是axios自己额外包装了 一些数据
            res.config：请求配置
            res。data：服务器真正响应的数据        
        */
        // get发送请求
        document.querySelector('.but1').addEventListener('click', function () {
            axios({
                url: 'https://autumnfish.cn/api/joke/list',
                method: "get",
                params: { num: 10 }
            }).then(res => {
                console.log(res)
            })
        })

        // post 请求
        document.querySelector('.but2').addEventListener('click', function () {
            axios({
                url: "http://ajax-base-api-t.itheima.net/api/login",
                method: "post",
                data: { username: "admin", password: "123456" }
            }).then(res => {
                console.log(res)
            })
        })