Ajax(七)+axios+跨域+JSONP

news2024/9/20 18:43:56

目录

1. XMLHttpRequest Level2的新特性——FormData对象管理表单数据（一）

用法（二）

2. XMLHttpRequest Level2的新特性—— 上传文件

3. XMLHttpRequest Level2的新特性—— 显示文件上传进度

4. jQuery高级用法

4.1 jQuery实现文件上传

4.2 jQuery实现loading效果

5. axios

5.1 什么是axios

5.2 axios发起GET请求 

5.3 axios发起POST请求​编辑

5.4 直接使用axios发起请求

6. 了解同源策略和跨域

6.1 同源策略

6.2 跨域

7. JSONP

7.1 什么是JSONP

7.2 JSONP的实现原理

7.3 自己实现一个简单的JSONP

7.4 JSONP的缺点

7.5 jQuery中的JSONP

7.6 自定义参数及回调函数名称 

7.7 jQuery中JSONP的实现过程

1. XMLHttpRequest Level2的新特性——FormData对象管理表单数据（一）

除了html里面用form标签

  <script>
    // 1. 创建 FormData 实例
    var fd = new FormData()
    // 2. 调用 append 函数，向 fd 中追加数据
    fd.append('uname', 'zs')
    fd.append('upwd', '123456')

    var xhr = new XMLHttpRequest()
    xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
    xhr.send(fd)
    //把提交的数据传过来

    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        //服务器响应回来的文本格式的Json字符串转成js对象打印出来
        console.log(JSON.parse(xhr.responseText))
      }
    }
  </script>

用法（二）

<body>

  <form id="form1">
    <input type="text" name="uname" autocomplete="off" />
    <input type="password" name="upwd" />
    <button type="submit">提交</button>
  </form>

  <script>
    // 1. 通过 DOM 操作，获取到 form 表单元素
    var form = document.querySelector('#form1')
    // 监听表单元素的 submit 事件
    form.addEventListener('submit', function (e) {
      // 阻止表单的默认提交行为
      e.preventDefault()

      // 创建 FormData，快速获取到 form 表单中的数据到fd
      var fd = new FormData(form)
      //发ajax请求
      var xhr = new XMLHttpRequest()
      xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
      xhr.send(fd)
    //拿到服务器响应回来的数据
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(JSON.parse(xhr.responseText))
        }
      }
    })
  </script>

</body>

2. XMLHttpRequest Level2的新特性—— 上传文件

 

 

 以上完整代码：

<body>
  <!-- 1. 文件选择框 -->
  <input type="file" id="file1" />
  <!-- 2. 上传文件的按钮 -->
  <button id="btnUpload">上传文件</button>
  <br />
  <!-- 3. img 标签，来显示上传成功以后的图片 -->
  <img src="" alt="" id="img" width="800" />

  <script>
    // 1. 获取到文件上传按钮
    var btnUpload = document.querySelector('#btnUpload')
    // 2. 为按钮绑定单击事件处理函数
    btnUpload.addEventListener('click', function () {
      // 3. 获取到用户选择的文件列表 files数组里面拿到用户选择的文件
      //document.querySelector('#file1')拿到文件选择框的dom元素.files是一个文件的数组
      var files = document.querySelector('#file1').files
      //files是个数组
      if (files.length <= 0) {
        return alert('请选择要上传的文件！')
      }
      //向FormData中追加文件
      var fd = new FormData()
      // 将用户选择的文件，添加到 FormData 中
      fd.append('avatar', files[0])

      var xhr = new XMLHttpRequest()
      xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
      xhr.send(fd)

      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var data = JSON.parse(xhr.responseText)
          if (data.status === 200) {
            //querySelector选择器
          // 上传成功，将上传成功的图片再显示到网页中（将服务器响应回来的url地址交给img标签进行显示）
          //data.url地址（服务器响应回来的url地址）不完整，需要在前面拼上一个根路径
            document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
          } else {
            // 上传失败，打印一个上传文件失败的消息就行
            console.log('图片上传失败！' + data.message)
          }
        }
      }
    })
  </script>
</body>

 3. XMLHttpRequest Level2的新特性—— 显示文件上传进度

e. lengthComputable为true时，才能计算出上传进度

e.loaded / e.total) * 100 上传进度百分比

Math.ceil上取整

美化文件上传进度：Bootstrap中文网组件里找进度条

 

 完整上传及美化代码：

<!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>
  <link rel="stylesheet" href="./lib/bootstrap.css" />
  <script src="./lib/jquery.js"></script>
</head>

<body>
  <!-- 1. 文件选择框 -->
  <input type="file" id="file1" />
  <!-- 2. 上传文件的按钮 -->
  <button id="btnUpload">上传文件</button>

  <!-- bootstrap 中的进度条（Bootstrap中文网组件里复制过来的） -->
  <!-- style="width: 500px; margin: 15px 10px控制进度条的样式 -->
  <div class="progress" style="width: 500px; margin: 15px 10px;">
    <!-- style="width: 0%"进度条的增长效果从这改 -->
    <div class="progress-bar progress-bar-striped active" style="width: 0%" id="percent">
      0%
      <!-- 0%这块改变的是当前显示的数据 -->
    </div>
  </div>

  <br />
  <!-- 3. img 标签，来显示上传成功以后的图片 -->
  <img src="" alt="" id="img" width="800" />

  <script>
    // 1. 获取到文件上传按钮
    var btnUpload = document.querySelector('#btnUpload')
    // 2. 为按钮绑定单击事件处理函数
    btnUpload.addEventListener('click', function () {
      // 3. 获取到用户选择的文件列表
      var files = document.querySelector('#file1').files
      if (files.length <= 0) {
        return alert('请选择要上传的文件！')
      }
      var fd = new FormData()
      // 将用户选择的文件，添加到 FormData 中
      fd.append('avatar', files[0])

      var xhr = new XMLHttpRequest()
//新加的比12
      // 监听文件上传的进度
      xhr.upload.onprogress = function (e) {
        if (e.lengthComputable) {
          // e.lengthComputable为true，可以计算出上传的进度
          var procentComplete = Math.ceil((e.loaded / e.total) * 100)
          //在Network里选择slow3G网络上传
          console.log(procentsComplete)
          // 动态设置进度条
          //jOuery的dom操作： $('#percent')获取到进度条，.attr函数设置进度条的style属性，动态设置width宽度
          //.html（）函数显示当前的上传进度百分比
          $('#percent').attr('style', 'width: ' + procentComplete + '%;').html(procentComplete + '%')
        }
      }
// 监听上传完成的事件 .removeClass()移除样式 .addClass添加样式绿色
      xhr.upload.onload = function () {
        $('#percent').removeClass().addClass('progress-bar progress-bar-success')
      }

      xhr.open('POST', 'http://www.liulongbin.tSop:3006/api/upload/avatar')
      xhr.send(fd)

      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var data = JSON.parse(xhr.responseText)
          if (data.status === 200) {
            // 上传成功
            document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
          } else {
            // 上传失败
            console.log('图片上传失败！' + data.message)
          }
        }
      }
    })
  </script>
</body>

</html>

4. jQuery高级用法

4.1 jQuery实现文件上传

 

用jQuery发起上传文件的请求：contentType/processData必须: false

        必须调用$.ajax请求 method必须是post

 4.2 jQuery实现loading效果

 jQuery高级用法完整代码：

<!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>
  <script src="./lib/jquery.js"></script>
</head>

<body>

  <input type="file" id="file1" />
  <button id="btnUpload">上传文件</button>

  <br />
  <!--  style="display: none先把图片隐藏起来，设置id：loading -->
  <img src="./images/loading.gif" alt="" style="display: none;" id="loading" />

  <script>
    $(function () {
      // 监听到Ajax请求被发起了
      $(document).ajaxStart(function () {
        $('#loading').show()
      })

      // 监听到 Ajax 完成的事件
      $(document).ajaxStop(function () {
        $('#loading').hide()
      })

      $('#btnUpload').on('click', function () {
        //[0]转成原生的dom对象
        var files = $('#file1')[0].files
        if (files.length <= 0) {
          return alert('请选择文件后再上传！')
        }

        var fd = new FormData()
        fd.append('avatar', files[0])

        // 发起 jQuery 的 Ajax 请求，上传文件
        $.ajax({
          method: 'POST',
          url: 'http://www.liulongbin.top:3006/api/upload/avatar',
          data: fd,
          processData: false,
          contentType: false,
          success: function (res) {
            console.log(res)
          }
        })
      })
    })
  </script>

</body>

</html>

5. axios

5.1 什么是axios

5.2 axios发起GET请求 

.then指定成功以后的回调函数

包装的res对象身上始终都有6个属性，要的是data（服务器响应回来的真实数据）

 

 5.3 axios发起POST请求

 5.4 直接使用axios发起请求

 axios测试完整代码：

<!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>
  <script src="./lib/axios.js"></script>
</head>

<body>
  <button id="btn1">发起GET请求</button>
  <button id="btn2">发起POST请求</button>
  <button id="btn3">直接使用axios发起GET请求</button>
  <button id="btn4">直接使用axios发起POST请求</button>

  <script>
    document.querySelector('#btn1').addEventListener('click', function () {
      var url = 'http://www.liulongbin.top:3006/api/get'
      var paramsObj = { name: 'zs', age: 20 }
      axios.get(url, { params: paramsObj }).then(function (res) {
        //res是axios包装的一个对象，要的是data（服务器响应回来的真实数据）
        console.log(res.data)
      })
    })

    document.querySelector('#btn2').addEventListener('click', function () {
      var url = 'http://www.liulongbin.top:3006/api/post'
      var dataObj = { address: '北京', location: '顺义区' }
      axios.post(url, dataObj).then(function (res) {
        console.log(res.data)
      })
    })

    document.querySelector('#btn3').addEventListener('click', function () {
      var url = 'http://www.liulongbin.top:3006/api/get'
      var paramsData = { name: '钢铁侠', age: 35 }
      axios({
        method: 'GET',
        url: url,
        params: paramsData
      }).then(function (res) {
        console.log(res.data)
      })
    })

    document.querySelector('#btn4').addEventListener('click', function () {
      axios({
        method: 'POST',
        url: 'http://www.liulongbin.top:3006/api/post',
        data: {
          name: '娃哈哈',
          age: 18,
          gender: '女'
        }
      }).then(function (res) {
        console.log(res.data)
      })
    })
  </script>
</body>

</html>

6. 了解同源策略和跨域

6.1 同源策略

 http://www.test.com/后面要是没给数据的话，默认80

同源策略：浏览器提供的，保证安全性（隔离潜在恶意文件）

通俗的理解：浏览器规定，A 网站的 JavaScript，不允许和非同源的网站 C 之间，进行资源的交互

 6.2 跨域

 URL 的协议、域名、端口三个完全一致叫同源；任何一个不一致叫跨域

注意：请求回来的数据会被浏览器的同源策略拦截 

7. JSONP

7.1 什么是JSONP

7.2 JSONP的实现原理

 发起跨域的Ajax请求的报错测试:请求失败，拿不到数据

<!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>
  <script src="./lib/jquery.js"></script>
</head>
<!-- 浏览器拦截，console里面报错，打开的网页是file协议，接口的协议是http 
非同源，存在跨域问题-->
<body>
  <script>
    $.ajax({
      method: 'GET',
      url: 'http://ajax.frontend.itheima.net:3006/api/jsonp',
      data: {
        name: 'zs',
        age: 20
      },
      success: function (res) {
        console.log(res)
      }
    })  
  </script>
</body>

</html>

7.3 自己实现一个简单的JSONP

<!-- 剖析JSONP的实现原理1 -->
<!-- 把函数的定义和调用拆成了两部分 -->
<body>
  <script>
    function success(data) {
      console.log('拿到了Data数据：')
      console.log(data)
    }
  </script>

  <script>
    success({ name: 'zs', age: 20 })
  </script>
</body>
<!-- 剖析JSONP的实现原理2 -->
<body>
  <script>
    function abc(data) {
      console.log('拿到了Data数据：')
      console.log(data)
    }
  </script>
<!-- src请求外部的js文件 -->
  <script src="./js/getdata.js?callback=abc"></script>
</body>
// getdata.js文件
abc({ name: 'ls', age: 30 })
//简单的JSONP请求实现
<!-- JSONP不是Ajax请求，是Get请求 -->
<!-- getdata.js没有在计算机本地上，而是在一台服务器上放着，人家调什么函数我们不知道 -->
<body>
  <script>
    function abc(data) {
      console.log('JSONP响应回来的数据是：')
      console.log(data)
    }
  </script>
<!-- 设置回调函数callback=abc，让服务器知道客户端只有abc这一个函数 -->
  <script src="http://ajax.frontend.itheima.net:3006/api/jsonp?callback=abc&name=ls&age=30"></script>
</body>

7.4 JSONP的缺点

JSONP默认发起js脚本请求，<script>标签默认发起get请求，没有post请求

7.5 jQuery中的JSONP

?name=zs&age=20是我们希望通过JSONP发送给服务器的数据

7.6 自定义参数及回调函数名称 

改参数直接在jsonp：“把callback改成你想要的”

 7.7 jQuery中JSONP的实现过程

<body>
  <button id="btnJSONP">发起JSONP数据请求</button>

  <script>
    // $(function ()jQuery的入口函数
    $(function () {
      $('#btnJSONP').on('click', function () {
        $.ajax({
          url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?address=北京&location=顺义',
          dataType: 'jsonp',
          jsonpCallback: 'abc',
          success: function (res) {
            console.log(res)
          }
        })
      })
    })
  </script>
</body>

在浏览器中检查head标签中动态新增script标签（点击的时候），前提在Network中把网速降到Slow 3G，把url动态显示在head里面（由script包裹）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/99680.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【AIOT】Python语音处理

【AIOT】Python语音处理

语音信号有三个重要的参数&#xff1a;声道数、取样频率和量化位数。 声道数&#xff1a;可以是单声道或者是双声道采样频率&#xff1a;一秒内对声音信号的采集次数&#xff0c;44100Hz采样频率意味着每秒钟信号被分解成44100份。换句话说&#xff0c;每隔144100秒就会存储一次…
阅读更多...
[附源码]计算机毕业设计Python本地助农产品销售系统(程序+源码+LW文档)

[附源码]计算机毕业设计Python本地助农产品销售系统(程序+源码+LW文档)

该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程 项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等…
阅读更多...
class80(CL80)双模蓝牙5.2热插拔PCB

class80(CL80)双模蓝牙5.2热插拔PCB

键盘使用说明索引&#xff08;均为出厂默认值&#xff09;软件支持一些常见问题解答&#xff08;FAQ&#xff09;首次使用测试步骤蓝牙配对规则&#xff08;重要&#xff09;蓝牙和USB切换键盘默认层默认触发层0的FN键配置的功能默认功能层1配置的功能默认的快捷键蓝牙参数蓝牙…
阅读更多...
【lssvm回归预测】基于鸽群算法优化最小二乘支持向量机PIO-lssvm实现数据回归预测附matlab代码

【lssvm回归预测】基于鸽群算法优化最小二乘支持向量机PIO-lssvm实现数据回归预测附matlab代码

​✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;修心和技术同步精进&#xff0c;matlab项目合作可私信。 &#x1f34e;个人主页&#xff1a;Matlab科研工作室 &#x1f34a;个人信条&#xff1a;格物致知。 更多Matlab仿真内容点击&#x1f447; 智能优化算法…
阅读更多...
Python+Qt抽奖点名工具源码窗体程序

Python+Qt抽奖点名工具源码窗体程序

程序示例精选 PythonQt抽奖点名工具源码窗体程序 如需安装运行环境或远程调试&#xff0c;见文章底部微信名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对《PythonQt抽奖点名工具源码窗体程序》编写代码&#xff0c;功能包括了抽奖点名&#xff0c;历史…
阅读更多...
【DBN分类】基于粒子群算法优化深度置信网络PSO-DBN实现数据分类附matlab代码

【DBN分类】基于粒子群算法优化深度置信网络PSO-DBN实现数据分类附matlab代码

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;修心和技术同步精进&#xff0c;matlab项目合作可私信。 &#x1f34e;个人主页&#xff1a;Matlab科研工作室 &#x1f34a;个人信条&#xff1a;格物致知。 更多Matlab仿真内容点击&#x1f447; 智能优化算法 …
阅读更多...
Enhancing Adversarial Training with Second-Order Statistics of Weights

Enhancing Adversarial Training with Second-Order Statistics of Weights

利用二阶权重统计增强对抗训练 对抗训练已被证明是提高深度神经网络鲁棒性的最有效方法之一。它被形式化为对模型权重和对抗性扰动的最小-最大优化&#xff0c;其中权重可以通过梯度下降方法&#xff08;如SGD&#xff09;进行优化。在本文中&#xff0c;我们证明了将模型权重…
阅读更多...
黑*头条_第2章_app端文章查看，静态化freemarker,分布式文件系统minIO（新版）

黑*头条_第2章_app端文章查看，静态化freemarker,分布式文件系统minIO（新版）

黑*头条_第2章_app端文章查看&#xff0c;静态化freemarker,分布式文件系统minIO&#xff08;新版&#xff09; 文章目录黑*头条_第2章_app端文章查看&#xff0c;静态化freemarker,分布式文件系统minIO&#xff08;新版&#xff09;1)文章列表加载1.1)需求分析1.2)表结构分析1…
阅读更多...
2000-2020年全国31省城镇化率

2000-2020年全国31省城镇化率

2000-2020年全国31省城镇化率 1、时间&#xff1a;2000-2020年 2、范围&#xff1a;包括全国31个省 3、指标包括&#xff1a;总人口、城镇人口、农村人口、城镇化率 其中&#xff1a;城镇化率城镇人口/总人口 3、来源&#xff1a;整理自计NJ及各省统计NJ 4、指标解释&…
阅读更多...
葵花宝典之C语言冷知识（一）

葵花宝典之C语言冷知识（一）

实用小课堂开课啦&#xff01;鸟类天堂&#xff1a; &#x1f9a2;一&#xff1a;函数类型的对应 &#x1f99c;代码呈现&#xff1a; &#x1f9a2;二&#xff1a;浮点数运算 &#x1f9a2;三&#xff1a;scanf的使用 &#x1f9a9; NUM 1&#xff1a;遇见空格&#xff0c;回车…
阅读更多...
（附源码）Springboot北京东奥会志愿者报名系统 毕业设计 150947

（附源码）Springboot北京东奥会志愿者报名系统 毕业设计 150947

Springboot北京北京东奥会志愿者报名系统 摘 要 信息化社会内需要与之针对性的信息获取途径&#xff0c;但是途径的扩展基本上为人们所努力的方向&#xff0c;由于站在的角度存在偏差&#xff0c;人们经常能够获得不同类型信息&#xff0c;这也是技术最为难以攻克的课题。针对北…
阅读更多...
数据挖掘Java——KNN算法的实现

数据挖掘Java——KNN算法的实现

一、KNN算法的前置知识 k-近邻&#xff08;kNN, k-NearestNeighbor&#xff09;是在训练集中选取离输入的数据点最近的k个邻居&#xff0c;根据这个k个邻居中出现次数最多的类别&#xff08;最大表决规则&#xff09;&#xff0c;作为该数据点的类别。 分类在数据挖掘中是一项…
阅读更多...
底层网络知识详解：陌生的数据中心-第18讲-DNS协议：网络世界的地址簿

底层网络知识详解：陌生的数据中心-第18讲-DNS协议：网络世界的地址簿

前面我们讲了平时常见的看新闻、支付、直播、下载等场景，现在网站的数目非常多，常用的网站就有二三十个，如果全部用IP地址进行访问，恐怕很难记住。于是，就需要一个地址簿，根据名称，就可以查看具体的地址。 例如，我要去西湖边的“外婆家”，这就是名称，然后通过地址簿…
阅读更多...
Linux运维巡检流程工作总结

Linux运维巡检流程工作总结

文章目录一 执行脚本获取数据二 登陆巡检环境2.1 将数据放在特定目录下2.2 在网页浏览器输入 ip:端口号/linux三 生成报告3.1 点击执行按钮&#xff0c;等待报告3.2 点击生成html文档&#xff0c;等待四 编写巡检文档4.1 提取所有检查的服务器IP、主机名、操作系统4.2 提取某些…
阅读更多...
js实现放大镜效果

js实现放大镜效果

在我们平时见到很多购物网站都会有放大镜效果的出现&#xff0c;当我们将鼠标放在一个商品图片的上面&#xff0c;就会在旁边出现对应的放大效果。 效果图 实现步骤 实现原理是非常简单的&#xff0c;实际上是两张图片&#xff0c;一张原图和一张更大尺寸的图片。一开始通过c…
阅读更多...
如何mount到网络为NAT方式的虚拟机

如何mount到网络为NAT方式的虚拟机

VMware Workstation我们一般两种虚拟机上网方式&#xff0c;一种bridge,一种NAT。bridge可以获得公网地址需要指定静态IP&#xff0c;而NAT是动态分配的内网地址了。设置bridge方式时往往指定的IP为内网IP&#xff0c;则无法正常上网&#xff1b;而设置NAT方式时共享本地网络可…
阅读更多...
计算机毕业设计 HTML+CSS+JavaScript食品餐饮行业网站(10页)

计算机毕业设计 HTML+CSS+JavaScript食品餐饮行业网站(10页)

&#x1f4c2;文章目录一、&#x1f468;‍&#x1f393;网站题目二、✍️网站描述三、&#x1f4da;网站介绍四、&#x1f310;网站效果五、&#x1fa93; 代码实现&#x1f9f1;HTML结构代码&#x1f492;CSS样式代码六、&#x1f947; 如何让学习不再盲目七、&#x1f381;更…
阅读更多...
【人脸识别】PCA人脸二维码识别（带面板）【含GUI Matlab源码 754期】

【人脸识别】PCA人脸二维码识别（带面板）【含GUI Matlab源码 754期】

⛄一、人脸识别技术简介 0 引言 这个高速发展的时代&#xff0c;一切事物都将与“快”相联系。人脸识别技术的发展成熟保证了人们的信息安全&#xff0c;二维码的飞速发展成为了现如今信息传递的新媒介。“慢”就会被淘汰&#xff0c;因此减少现如今人脸识别过程的 时间仍是目…
阅读更多...
数据结构和算法(四)--高级排序

数据结构和算法(四)--高级排序

目录 二、高级排序 2.1、希尔排序 2.2、归并排序 2.2.1、递归 2.2.2、归并排序 数据结构和算法(三)--排序 二、高级排序 冒泡排序&#xff0c;选择排序&#xff0c;插入排序&#xff0c;最坏的时间复杂度都是O(N^2)&#xff0c;而平方阶&#xff0c;随着输入规模的增大&…
阅读更多...
想掌握日志分析系统的看过来

想掌握日志分析系统的看过来

日志分析系统&#xff08;ELK&#xff09; 什么是ELK ELK是三个开源软件的缩写&#xff0c;分别表示&#xff1a;Elasticsearch , Logstash, Kibana , 它们都是开源软件。新增了一个FileBeat&#xff0c;它是一个轻量级的日志收集处理工具(Agent)&#xff0c;Filebeat占用资源…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023