第 2 章：AJAX 的使用

AJAX 的使用

核心对象：XMLHttpRequest，AJAX 的所有操作都是通过该对象进行的。

1. 使用步骤

  1. 创建 XMLHttpRequest 对象
    var xhr = new XMLHttpRequest();

  2. 设置请求信息

xhr.open(method, url);//可以设置请求头，一般不设置
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

  1. 发送请求
    xhr.send(body) //get 请求不传 body 参数，只有 post 请求使用

  2. 接收响应

//xhr.responseXML 接收 xml 格式的响应数据
//xhr.responseText 接收文本格式的响应数据
xhr.onreadystatechange = function (){if(xhr.readyState == 4 && xhr.status == 200){var text = xhr.responseText;console.log(text);}
}

2. AJAX 请求状态

  • xhr.readyState 可以用来查看请求当前的状态
  • readyState

readystate是xhr对象中的属性，表示状态0, 1, 2, 3, 4：

  • 0: 表示 XMLHttpRequest 实例已经生成，但是 open()方法还没有被调用。
  • 1: 表示 send()方法还没有被调用，仍然可以使用 setRequestHeader()，设定 HTTP请求的头信息。
  • 2: 表示 send()方法已经执行，并且头信息和状态码已经收到。
  • 3: 表示正在接收服务器传来的 body 部分的数据。
  • 4: 表示服务器数据已经完全接收，或者本次接收已经失败了

3. AJAX发送GET请求

需求：点击按钮，向服务端发送请求，把从服务端返回的响应体结果在文本框里面展示出来（在div里面做一个呈现）

3.1 GET.html

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX GET 请求</title><style>#result {width: 200px;height: 100px;border: solid 1px #90b;}</style>
</head>
<body><button id="result1">点击发送请求</button><div id="result"></div><script>// 获取button元素const btn = document.getElementById('result1');const result = document.getElementById('result');// 绑定事件btn.onclick = function () {// 1. 创建 XMLHttpRequest 对象const xhr = new XMLHttpRequest();// 2. 初始化 设置请求方法和 urlxhr.open('GET', 'http://127.0.0.1:8000/server');// 发送请求xhr.send();// 4. 事件绑定 处理服务端返回的结果xhr.onreadystatechange = function () {// 判断（服务端返回了所有的结果）if(xhr.readyState === 4) {// 判断响应状态码 200 404 403 401 500// 2xx 成功if (xhr.status >= 200 && xhr.status < 300) {// // 处理结果 行 头 空行 体// // 1. 响应行// console.log(xhr.status); // 状态码// console.log(xhr.statusText); // 状态字符串// console.log(xhr.getAllResponseHeaders()); // 所有响应头// console.log(xhr.response); // 响应体// 设置 result 的文本result.innerHTML = xhr.response;}}}}</script>
</body>
</html>

3.2 server.js

// 1. 引入express
const express = require('express');// 2. 创建应用对象
const app = express();// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server', (request, response) => {// 设置响应头  设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');// 设置响应体response.send('Hello AJAX');
});// 4. 监听端口启动服务
app.listen(8000, () => {console.log('服务已经启动, 8000 端口监听中....');
});

3.3 AJAX设置GET请求参数

  • 直接在url后面用?分割，然后加参数的名与值
  • 如果有多个参数就用&分开
    在这里插入图片描述

4. AJAX发送POST请求

需求：鼠标光标移进文本框，就会向服务端发送请求，服务端返回结果，然后把结果在该框中做一个呈现

4.1 POST.html

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX POST 请求</title><style>#result {width: 200px;height: 100px;border: solid 1px #903;}</style>
</head>
<body><div id="result"></div><script>// 获取元素对象const result = document.getElementById('result');// 绑定事件result.addEventListener("mouseover", function () {// 1. 创建对象const xhr = new XMLHttpRequest();// 2. 初始化 设置类型 与URLxhr.open('POST', 'http://127.0.0.1:8000/server');// 3. 发送xhr.send(a=100);// 4. 事件绑定xhr.onreadystatechange = function () {// 判断if (xhr.readyState === 4) {// 判断状态码if (xhr.status >= 200 && xhr.status < 300) {// 处理服务端返回的结果result.innerHTML = xhr.response;}}}})</script>
</body>
</html>

4.2 server.js

// 1. 引入express
const express = require('express');// 2. 创建应用对象
const app = express();// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装app.post('/server', (request, response) => {// 设置响应头  设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');// 设置响应体response.send('Hello AJAX POST');
});// 4. 监听端口启动服务
app.listen(8000, () => {console.log('服务已经启动, 8000 端口监听中....');
});

4.3 post设置参数

  • 直接在send里面设置参数
  • 可以自己设置格式，只要服务端能够处理
    在这里插入图片描述
    在这里插入图片描述

5. 设置请求头信息

  • 设置预设头信息
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  • 设置自定义头信息
xhr.setRequestHeader('name', '123');// node.js设置
//请求类型改为all
app.all// 设置可接收自定义请求
response.setHeader('Access-Control-Allow-Headers', '*');

6. 服务端响应JSON数据

需求：按下键盘上的任意按键，就会向服务端发送请求，服务端返回结果，然后把结果在div中做一个呈现

6.1 处理json数据

  1. 因为响应体只能发送字符串，我们可以先在服务端把要响应的数据对其进行字符串转换之后再将其发送

  2. 在客户端处理数据有两种方法，一是手动处理，二是自动处理（用的多）

  3. 手动处理：将接受到的字符串进行json格式的转换let data = JSON.parse(xhr.response);

  4. 自动处理：在前面设置好响应体的数据类型：xhr.responseType = 'json';，后面直接用该数据就行

6.1 JSON.html

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JSON响应</title><style>#result {width: 200px;height: 100px;border: solid 1px #903;}</style></head>
<body><div id="result"></div><script>// 获取元素对象const result = document.getElementById('result');// 绑定键盘按下事件window.onkeydown = function () {// 1. 创建对象const xhr = new XMLHttpRequest();// 设置响应体数据的类型（自动转换）xhr.responseType = 'json';// 2. 初始化 设置类型 与URLxhr.open('GET', 'http://127.0.0.1:8000/json-server');// 3. 发送xhr.send();// 4. 事件绑定xhr.onreadystatechange = function () {// 判断if (xhr.readyState === 4) {// 判断状态码if (xhr.status >= 200 && xhr.status < 300) {// 处理服务端返回的结果// console.log(xhr.response);// result.innerHTML = xhr.response;// 处理数据第一种方法：手动对数据转换// let data = JSON.parse(xhr.response);// result.innerHTML = data.name;// 处理数据第二种方法：自动转换console.log(xhr.response);result.innerHTML = xhr.response.name;}}}}</script>
</body>
</html>

6.2 server.js

// 1. 引入express
const express = require('express');// 2. 创建应用对象
const app = express();// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装app.all('/json-server', (request, response) => {// 设置响应头  设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');// 响应头response.setHeader('Access-Control-Allow-Headers', '*');// 响应一个数据const data = {name:'张三'};// 对对象进行字符串转换let str = JSON.stringify(data);// 设置响应体response.send(str);
});// 4. 监听端口启动服务
app.listen(8000, () => {console.log('服务已经启动, 8000 端口监听中....');
});

7. nodemon自动重启工具安装

  • 每次修改js文件都需要停掉服务重新启动，比较麻烦，这个工具会在检测到js文件修改后自动重启服务

7.1 nodemon的安装

  1. 停掉服务：ctrl + c
  2. 终端输入npm install -g nodemon进行nodemon的安装

7.2 nodemon启动服务

  1. 启动服务：nodemon server.js
  2. 后面只要该文件server.js被修改，服务会自动重新启动

8. 解决 IE 缓存问题

  • IE缓存问题：IE浏览器会对AJAX的一个请求结果做一个缓存，会导致一个问题：下一次发送请求的时候，走得是本地的缓存，而非服务器返回的最新数据，在一些时效性比较强的场景，ajax缓存会影响我们的结果，它不能够正常去显示
  • 问题：在一些浏览器中(IE),由于缓存机制的存在，ajax 只会发送的第一次请求，剩余多次请求不会在发送给浏览器而是直接加载缓存中的数据。
  • 解决方式：浏览器的缓存是根据 url 地址来记录的，所以我们只需要修改 url 地址即可避免缓存问题。我们给url后面加一个“获取当前时间的时间戳”，因为时间不同，所以url不同，浏览器会认为这是两次不同的请求，这个时候客户端会发送一个新的请求而非走本地缓存
    xhr.open("get","/testAJAX?t="+Date.now());

8.1 IE缓存问题.html

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>IE缓存问题</title><style>#result {width: 200px;height: 100px;border: solid 1px #258;}</style>
</head>
<body><button>点击发送请求</button><div id="result"></div><script>const btn = document.getElementsByTagName('button')[0];const result = document.querySelector('#result');btn.addEventListener('click', function(){console.log("test");const xhr = new XMLHttpRequest();xhr.open("GET", 'http://127.0.0.1:8000/ie?t=' + Date.now());xhr.send();xhr.onreadystatechange = function() {if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status < 300) {result.innerHTML = xhr.response;}}}})</script>
</body>
</html>

8.2 server.js

// 1. 引入express
const express = require('express');// 2. 创建应用对象
const app = express();// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装// 针对IE缓存
app.get('/ie', (request, response) => {// 设置响应头  设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');// 设置响应体response.send('Hello IE');
});// 4. 监听端口启动服务
app.listen(8000, () => {console.log('服务已经启动, 8000 端口监听中....');
});

9. 请求超时与网络异常处理

通过ajax给超时做一个设置，来及时给客户做一个提醒，并且在网络异常的时候也给用户来一个友好的提醒

  • 如果2s后还没有返回结果，就来一个提醒，告诉客户网络超时，请稍后重试
  • 如果网络异常，则返回一个提醒

9.1 超时与网络异常.html

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>超时与网络异常</title><style>#result {width: 200px;height: 100px;border: solid 1px #90b;}</style>
</head>
<body><button>点击发送请求</button><div id="result"></div><script>// 获取元素对象const btn = document.getElementsByTagName('button')[0];const result = document.getElementById('result');// 绑定事件btn.addEventListener("click", function () {// 1. 创建对象const xhr = new XMLHttpRequest();// 超时设置 2s 设置xhr.timeout = 2000;// 超时回调xhr.ontimeout = function () {result.innerHTML = "请求超时";}// 网络异常xhr.onerror = function () {alert("网络异常");}// 2. 初始化 设置类型 与URLxhr.open('GET', 'http://127.0.0.1:8000/delay');// 3. 发送xhr.send();// 4. 事件绑定xhr.onreadystatechange = function () {// 判断if (xhr.readyState === 4) {// 判断状态码if (xhr.status >= 200 && xhr.status < 300) {// 处理服务端返回的结果result.innerHTML = xhr.response;}}}})</script>
</body>
</html>

9.2 server.js

// 1. 引入express
const express = require('express');// 2. 创建应用对象
const app = express();// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装// 延时响应
app.get('/delay', (request, response) => {// 设置响应头  设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');// 延时响应setTimeout(() => {response.send('延时响应');}, 3000);
});// 4. 监听端口启动服务
app.listen(8000, () => {console.log('服务已经启动, 8000 端口监听中....');
});

9.3 断网测试

-

10. 取消请求

  • 通过代码手动取消请求
  • status：pending是处于发送过程中
  • status：cancel是取消发送

10.1 取消请求.html

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=q, initial-scale=1.0"><title>取消请求</title>
</head>
<body><button>点击发送</button><button>点击取消</button><script>// 获取元素对象const btns = document.querySelectorAll('button');let x = null;// const controller = new AbortController();btns[0].onclick = function() {const x = new XMLHttpRequest();x.open('GET', 'http://127.0.0.1:8000/cancel');x.send();}// abortbtns[1].onclick = function() {// controller.abort();x.abort();}</script>
</body>
</html>

10.2 server.js

// 1. 引入express
const express = require('express');// 2. 创建应用对象
const app = express();// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装// 取消请求
app.get('/cancel', (request, response) => {// 设置响应头  设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');// 取消请求setTimeout(() => {response.send('取消请求');}, 3000);
});// 4. 监听端口启动服务
app.listen(8000, () => {console.log('服务已经启动, 8000 端口监听中....');
});

11. 请求重复发送问题

  • 解决办法 ：当点击发送第二个相同的请求的时候，把第一个请求取消掉

解决步骤：

  1. 定义一个标识变量isSending为false
  2. 修改isSending为true表示发送请求
  3. 当readyState为4的时候表示请求完成，修改isSending为false
  4. 连续发送请求，但是此时的isSending还是true，所以取消该请求重新发送
  5. 如果连续发送请求，都会取消上一个发送的请求来保证只有一个请求发出，减少服务器压力

11.1 重复请求问题.html

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=q, initial-scale=1.0"><title>取消请求</title>
</head>
<body><button>点击发送</button><script>// 获取元素对象const btns = document.querySelectorAll('button');let x = null;// 标识变量let isSending = false;  // 是否正在发送Ajax请求// const controller = new AbortController();btns[0].onclick = function() {// 判断标识变量if (isSending) x.abort();  // 如果正在发送Ajax请求，则取消请求，创建一个新的请求// 修改 标识变量的值isSending = true;x = new XMLHttpRequest();x.open('GET', 'http://127.0.0.1:8000/cancel');x.send();x.onreadystatechange = function() {if (x.readyState === 4) {// 修改标识变量isSending = false;}}}</script>
</body>
</html>

11.2 server.js

// 1. 引入express
const express = require('express');// 2. 创建应用对象
const app = express();// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装// 重复请求
app.get('/cancel', (request, response) => {// 设置响应头  设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');// 取消请求setTimeout(() => {response.send('重复请求');}, 3000);
});// 4. 监听端口启动服务
app.listen(8000, () => {console.log('服务已经启动, 8000 端口监听中....');
});

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

开放式耳机音质好不好？盘点高音质的开放式耳机排行榜10强

开放式耳机音质好不好？盘点高音质的开放式耳机排行榜10强

开放式耳机音质好不好其实没有准确回答&#xff0c;因为开放式耳机也有其独特的优势特点。 由于开放式耳机的设计原因&#xff0c;所以如果将其与入耳式耳机相比&#xff0c;可能会在音质还原度以及降噪功能方面稍显逊色&#xff0c;当然开放式耳机的音质也并非很差&#xff0…
阅读更多...
CAD二次开发IFoxCAD框架系列（26）- 分段测量多段线长度和计算多边形的面积

CAD二次开发IFoxCAD框架系列（26）- 分段测量多段线长度和计算多边形的面积

#region 分段测量多段线长度private static double textHight 10;[CommandMethod(nameof(PolylineDemo))]public void PolylineDemo(){using var tr new DBTrans();if(!tr.LayerTable.Has("标注")){tr.LayerTable.Add("标注",1);}var pso new PromptSel…
阅读更多...
【Java】ApiPost请求返回 `406` 状态码（jackson）

【Java】ApiPost请求返回 `406` 状态码（jackson）

Java系列文章目录 补充内容 Windows通过SSH连接Linux 第一章 Linux基本命令的学习与Linux历史 文章目录 Java系列文章目录一、前言二、学习内容&#xff1a;三、问题描述3.1 问题截图3.2 错误简介3.2.1 HTTP状态码 406 Not Acceptable3.2.2 序列化和反序列化 3.3 后端问题位置…
阅读更多...
HarmonyOS -服务卡片

HarmonyOS -服务卡片

服务卡片提供了一种界面展示形式&#xff0c;可以将应用的重要信息或操作前置到服务卡片以达到服务直达、减少跳转层级的体验效果。有些类似于创建了一种 “快键方式”&#xff0c;比如下面的卡片流程图&#xff1a; 添加基础卡片 右键入口模块按照图示新增卡片 ArkTS卡片创建…
阅读更多...
4-1.Android Camera 之 CameraInfo 编码模板（前后置摄像头理解、摄像头图像的自然方向理解）

4-1.Android Camera 之 CameraInfo 编码模板（前后置摄像头理解、摄像头图像的自然方向理解）

一、Camera.CameraInfo Camera.CameraInfo 是用于获取设备上摄像头信息的一个类&#xff0c;它提供摄像头的各种详细信息&#xff0c;例如&#xff0c;摄像头的方向、是否支持闪光灯等&#xff0c;以下是它的常用属性 static int CAMERA_FACING_BACK&#xff1a;表示设备的后置…
阅读更多...
【生日视频制作】F900xr宝马摩托车提车交车仪式AE模板修改文字软件生成器教程特效素材【AE模板】

【生日视频制作】F900xr宝马摩托车提车交车仪式AE模板修改文字软件生成器教程特效素材【AE模板】

生日视频制作教程F900xr宝马摩托车提车交车仪式AE模板修改文字特效广告生成神器素材祝福玩法AE模板工程 AE模板套用改图文教程↓↓&#xff1a; 怎么如何做的【生日视频制作】F900xr宝马摩托车提车交车仪式AE模板修改文字软件生成器教程特效素材【AE模板】 生日视频制作步骤&a…
阅读更多...
Unity 资源 之 Super Confetti FX：点亮项目的璀璨粒子之光

Unity 资源 之 Super Confetti FX：点亮项目的璀璨粒子之光

Unity 资源 之 Super Confetti FX&#xff1a;点亮项目的璀璨粒子之光 一&#xff0c;前言二&#xff0c;资源包内容三&#xff0c;免费获取资源包 一&#xff0c;前言 在创意的世界里&#xff0c;每一个细节都能决定一个项目的独特魅力。今天&#xff0c;要向大家介绍一款令人…
阅读更多...
UNITY UI简易反向遮罩

UNITY UI简易反向遮罩

附带示例资源文件&#xff1a;https://download.csdn.net/download/qq_55895529/89726994?spm1001.2014.3001.5503 大致效果&#xff1a; 实现思路:通过ui shader的模板测试功能实现 通过让想要被突出显示的物体优先渲染并写入模板值,而后再让黑色遮罩渲染并判断模板值进行渲…
阅读更多...
龙芯+FreeRTOS+LVGL实战笔记（新）——06添加二级按钮

龙芯+FreeRTOS+LVGL实战笔记（新）——06添加二级按钮

本专栏是笔者另一个专栏《龙芯+RT-Thread+LVGL实战笔记》的姊妹篇，主要的区别在于实时操作系统的不同，章节的安排和任务的推进保持一致，并对源码做了完善与优化，各位可以先到本人主页下去浏览另一专栏的博客列表（目前已撰写36篇，图1所示），再决定是否订阅。此外，也可以…
阅读更多...
揭秘 AMD GPU 上 PyTorch Profiler 的性能洞察

揭秘 AMD GPU 上 PyTorch Profiler 的性能洞察

Unveiling performance insights with PyTorch Profiler on an AMD GPU — ROCm Blogs 2024年5月29日&#xff0c;作者&#xff1a;Phillip Dang。 在机器学习领域&#xff0c;优化性能通常和改进模型架构一样重要。在本文中&#xff0c;我们将深入探讨 PyTorch Profiler&#…
阅读更多...
【人工智能学习笔记】2_数据处理基础

【人工智能学习笔记】2_数据处理基础

数据的概述 数据&#xff08;Data&#xff09;的定义 用于表示客观事物的未经加工的原始素材不仅指狭义上的数字&#xff0c;也只具有一定意义的文字、字母、数字符号的组合客观事物的属性、数量、位置及其相互关系的抽象表示 在计算机科学与技术领域中&#xff0c;数据是指…
阅读更多...
vite+vue3+typescript+elementPlus前端实现电子证书查询系统

vite+vue3+typescript+elementPlus前端实现电子证书查询系统

实现背景&#xff1a;之前电子证书的实现是后端实现的&#xff0c;主要采用GD库技术&#xff0c;在底图上添加文字水印和图片水印实现的。这里采用前端技术实现电子证书的呈现以及点击证书下载&#xff0c;优点是&#xff1a;后端给前端传递的是一组数据&#xff0c;不需要传证…
阅读更多...
从零开始写论文：如何借助ChatGPT生成完美摘要？

从零开始写论文：如何借助ChatGPT生成完美摘要？

AIPaperGPT&#xff0c;论文写作神器~ https://www.aipapergpt.com/ 在写论文的过程中&#xff0c;摘要是一个非常重要的部分&#xff0c;它能够帮助读者快速理解论文的核心内容&#xff0c;决定是否进一步阅读全文。但是许多学生在写摘要的时候常常感到困惑&#xff0c;不知…
阅读更多...
基于Java的宿舍报修管理系统的设计与实现(论文+源码)_kaic

基于Java的宿舍报修管理系统的设计与实现(论文+源码)_kaic

基于Java的宿舍报修管理系统的设计与实现(论文源码)_kaic 摘　　要 随着教育改革‎‏的不断‎‏深入&#xff0c;‎‏学校宿‎‏舍的管‎‏理体系‎‏也在不‎‏断地完‎‏善&#xff0c;校园后勤服务是学校管理的重要工作&#xff0c;学校提供优秀的后勤服务&#xff0c;能提…
阅读更多...
自制游戏手柄--电位器的使用

自制游戏手柄--电位器的使用

在前面的讨论中&#xff0c;我们考虑了使用陀螺仪来获取手柄的运动情况来进行瞄准&#xff0c; 自制实战吃鸡手柄原理-CSDN博客 也可以使用图像识别来实现&#xff0c;这里我们再考虑下使用电位器来获取运动状态&#xff0c;一个电位器可以获取到一个平面上的旋转情况&#x…
阅读更多...
C++——类与对象（二）

C++——类与对象（二）

目录 引言 类的默认成员函数 构造函数 1.构造函数的概念 2.注意事项 初始化列表 1.初始化列表的概念 2.注意事项 析构函数 1.析构函数的概念 2.注意事项 拷贝构造函数 1.拷贝构造函数的概念 2.注意事项 运算符重载 1.运算符重载的概念 2.注意事项 赋值运算符…
阅读更多...
开源网安引领AIGC+开发安全，智能防护铸就软件安全新高度

开源网安引领AIGC+开发安全，智能防护铸就软件安全新高度

近日&#xff0c;国内网络安全领域知名媒体数说安全正式发布了《2024年中国网络安全市场100强》和《2024年中国网络安全十大创新方向》。开源网安凭借在市场表现力、资源支持力以及产品在AI方向的创新力上的优秀表现成功入选百强榜单&#xff0c;并被评为“AIGC开发安全”典型厂…
阅读更多...
Percona 开源监控方案 PMM 详解

Percona 开源监控方案 PMM 详解

文章目录 前言1. 安装部署1.1 Server 安装1.2 Client 安装 2. 监控数据库2.1 MySQL2.2 PostgreSQL 3. Dashboard 介绍总结 前言 Percona Monitoring and Management (PMM) 是 Percona 公司基于业界流行的组件 Prometheus 和 Grafana 设计开发的一体化数据库监控解决方案。本篇…
阅读更多...
【H2O2|全栈】关于HTML（3）HTML基础（二）

【H2O2|全栈】关于HTML（3）HTML基础（二）

HTML相关知识 目录 HTML相关知识 前言 准备工作 标签的具体分类&#xff08;二&#xff09; 本文中的标签在什么位置使用&#xff1f; 本期前置知识点 超文本 超文本引用和源属性 图片标签 锚链接 iframe 锚点 预告和回顾 后话 前言 本系列博客将分享HTML相关…
阅读更多...
【数据结构】你知道什么是二叉树的顺序存储结构吗？

【数据结构】你知道什么是二叉树的顺序存储结构吗？

文章目录 前言1. 顺序结构2. 实现顺序结构二叉树2.1 堆的概念与结构2.2 堆的实现2.2.1 向上调整算法2.2.2 向下调整算法 3. 结语 前言 二叉树一般可以使用两种结构存储&#xff0c;一种顺序结构&#xff0c;一种链式结构。本文将要介绍的是二叉树的顺序存储结构。 1. 顺序结构…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023