当前位置： 首页 > news >正文

第 2 章：AJAX 的使用

news 2025/6/19 4:38:14

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 端口监听中....');
});

相关文章：

第 2 章：AJAX 的使用

AJAX 的使用 核心对象&#xff1a;XMLHttpRequest&#xff0c;AJAX 的所有操作都是通过该对象进行的。 1. 使用步骤 创建 XMLHttpRequest 对象 var xhr new XMLHttpRequest(); 设置请求信息 xhr.open(method, url);//可以设置请求头&#xff0c;一般不设置 xhr.setReques…...

编程日记 2024/9/5 20:57:30

ROS——视觉抓取

纲要 视觉抓取中的关键技术 内参标定 物体识别定位 抓取姿态分析 运动规划 外参标定 任意两个位姿之间的关系 眼在外 眼在内 手眼标定流程 robot 部分 标定效果 视觉抓取例程 grasping_demo.cpp 获取两个坐标系之间变换关系:waitForTransform 、 LookupTransform 求相…...

编程日记 2024/9/5 20:55:27

EPLAN2022基础教程

EPLAN2022软件介绍 EPLAN是一款专业的电气设计和绘图软件&#xff0c;它可以帮助我创建和管理电气项目&#xff0c;生成各种报表和文档&#xff0c;与其他软件和系统进行交互&#xff0c;优化工程流程和质量。与传统的CAD绘图对比&#xff0c;EPLAN更适合绘制电气原理图。 下…...

编程日记 2024/9/5 20:54:26

【JavaWeb】Servlet 详解（处理逻辑及常见方法）

文章目录 1. Tomcat1.1 常见的错误1.1.1 出现 4041.1.2 出现 4051.1.3 出现 500 1.2 HttpServlet1.2.1 Tomcat 的处理逻辑1.2.2 相关方法 1.3 HttpServletRequest1.3.1 常见方法1.3.2 jackson 处理逻辑 1.4 HttpServletResponse1.4.1 常见方法 1. Tomcat tomcat 是一个 HTTP 服…...

编程日记 2024/9/5 20:53:25

6 自研rgbd相机基于rk3566之深度计算库程序详解

自研rgbd相机基于rk3566之深度计算库详解 1 tof深度计算库框架读入深度图像参数配置tof模组标定参数读入及解析深度计算函数接口2 tof深度计算库程序详解深度计算程序头文件深度计算程序 源文件1 tof深度计算库框架 读入深度图像参数配置 支持raw8/raw10/raw16 格式 /*******…...

编程日记 2024/9/5 20:52:24

分布式系统框架hadoop3入门

分布式系统框架hadoop3入门 (qq.com) Hadoop3作为分布式系统架构的重要基石&#xff0c;为大规模数据存储与处理提供了强大支持 基本信息 hadoop&#xff1a;一个存储和处理大数据的分布式系统框架 组成&#xff1a; HDFS&#xff08;数据存储&#xff09;、MapReduce&…...

编程日记 2024/9/5 20:51:23

使用 i3.LayoutCell() 方法绘制版图并输出为 GDS 文件

使用 i3.LayoutCell 方法绘制版图并输出为 GDS 文件 引言正文引言 在 IPKISS i3.SRef() 函数 一文中我们介绍了如何使用 i3.SRef() 函数将 instance 对象添加到 i3.LayoutCell() 创建的 Cell 对象上。但是当我们使用 write_gdsii() 输出版图时代码就会报错。这里我们将介绍如何…...

编程日记 2024/9/5 20:50:22

mariadb容器

下载镜像 $ sudo docker pull mariadb启动容器 $ sudo docker run --name my-mariadb -d -e MARIADB_DATABASEtestdb -e MARIADB_ROOT_PASSWORDLetmein -p 3306:3306 mariadb上面命令会启动一个名为my-mariadb的容器&#xff0c;并初始化一个testdb数据库&#xff0c;同时设置…...

编程日记 2024/9/5 20:49:21

应用层协议Http

Http协议 1.1 什么是http协议 在进行网络通信时&#xff0c;应用层协议一般都是程序员自己写的&#xff0c;但是有一些大佬其实已经定义出了一些现成的应用层协议&#xff0c;例如&#xff1a;HTTP&#xff08;超文本传输协议&#xff09;、FTP&#xff08;文件传输协议&#…...

编程日记 2024/9/5 20:45:16

display flex 的div 被子元素撑开不显示滚动条的一个解决demo

display flex 的div 被子元素撑开&#xff0c;不显示y轴滚动条的 一个解决demo。 注&#xff1a; 不一定适用所有人的的相同问题 less # less .contact {display: flex;flex-grow: 1;overflow: hidden auto;flex-direction: column;.contact-items {flex: 1 1 0;display: flex…...

编程日记 2024/9/5 20:44:15

判断键盘输入是数字、大写字母还是小写字母——C#学习笔记

以下代码将判断键盘输入字符是数字 还是字母&#xff1a; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;namespace ConsoleApp4 {using System;using System.Threading;public class BoolKeyTest{sta…...

编程日记 2024/9/5 20:43:14

进程控制块PCB的组织方式有哪些？

进程控制块&#xff08;PCB&#xff0c;Process Control Block&#xff09;是操作系统用来管理和跟踪进程的一个数据结构&#xff0c;它保存了与进程相关的各种信息。PCB 是操作系统调度进程的核心数据结构&#xff0c;通常通过某种组织方式进行管理。常见的 PCB 组织方式主要有…...

编程日记 2024/9/5 20:38:08

getent passwd 获取linux并显示用户账户信息

getent passwd 命令在Unix和类Unix系统&#xff08;如Linux&#xff09;中用于从系统的密码数据库&#xff08;通常是/etc/passwd文件&#xff0c;但在某些配置中可能是通过网络服务如NIS或LDAP&#xff09;中获取并显示用户账户信息。这个命令的输出列出了系统上所有用户的详细…...

编程日记 2024/9/5 20:37:07

达梦数据库+JPA+Springboot 报错 ：无效的列名

文章目录 0、 开发环境1、需求说明2、适配过程3、问题描述和解决3.1报错问题3.2 问题解决 0、 开发环境 开发环境&#xff1a; idea 2022 SpringBoot版本 &#xff1a;2.7.1 JDK 111、需求说明 适配国产化数据库达梦8 2、适配过程 参考 Springboot jpa 达梦 3、问题描述…...

编程日记 2024/9/5 20:36:07

#单片机基础 笔记一

--单片机概述STM32开发环境搭建创建工程 --STM32-GPIO&#xff08;重点&#xff09;编程 --STM32-USART串口应用 --STM32-SPI(液晶屏)中断系统 --STM32-时钟系统&#xff08;重点中的重点&#xff09; --STM32-PWMADC --STM32-DMA DHT11 1. 计算机组成原理 1.1 计算机的组成 1…...

编程日记 2024/9/5 20:35:06

echarts多个环形图

echarts图表集 var dataValue [{name:今日待分配方量,value:49}, {name:今日已分配方量,value:602}, {name:今日完成方量,value:1037}]var piedata1 [{name: 1#拌和机,value: 20},{name: 2#拌和机,value: 22},{name: 3#拌和机 ,value: 17},{name: 4#拌和机,value: 18},{name…...

编程日记 2024/9/5 20:34:05

vue 的面试题

一、Html篇 1、常用的块级元素及行内元素有哪些&#xff1f; 块级元素&#xff1a;div、p、h1~h6、ol、ul、li、table、form 行内标签&#xff1a;a、span、img、input、lable、button 行内块元素&#xff1a;img、input、button 2、行内元素和块级元素的区别&#xff1f; 块级…...

编程日记 2024/9/5 20:33:04

MongoDB-部署PSA(一主一从一仲裁)架构复制集群

目录 环境信息环境准备mongoDB配置&部署复制集群搭建 环境信息 IP端口节点10.0.0.127017主10.0.0.227017从10.0.0.327017仲裁 环境准备 1.关闭THP Transparent Huge Pages 简称 THP。透明大页面&#xff08;THP&#xff09;是一种Linux内存管理系统&#xff0c;通过使用…...

编程日记 2024/9/5 20:32:03

CSS中 特殊类型的选择器 伪元素如何使用

一、什么是伪元素 在 CSS 中&#xff0c;伪元素是一种特殊类型的选择器&#xff0c;它允许你为元素的特定部分添加样式&#xff0c;而这些部分在 HTML 文档中并不实际存在。伪元素通常用于创建装饰性效果&#xff0c;如添加边框、背景、阴影等&#xff0c;而不需要额外的 HTML…...

编程日记 2024/9/5 20:30:01

科技信贷业务怎么寻找客户？

在科技信贷业务领域&#xff0c;寻找客户的痛点主要集中在以下几个方面&#xff1a; 1.风险评估难题&#xff1a;科技型企业尤其是初创企业&#xff0c;往往缺乏足够的历史数据和抵押物&#xff0c;这使得金融机构在评估其信用风险时面临较大挑战。由于科技企业的研发周期长、…...

编程日记 2024/9/5 20:26:58

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2025/6/18 3:19:57

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2025/6/16 19:04:21

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/6/16 20:44:08

《Playwright：微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

编程新知 2025/6/16 20:36:05

FastAPI 教程：从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

编程新知 2025/6/17 7:01:47

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

编程新知 2025/6/18 3:14:20

在Ubuntu中设置开机自动运行（sudo）指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

编程新知 2025/6/18 4:00:59

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

编程新知 2025/6/18 4:42:48

相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）

【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了：有对最普通的场景进行各个日志注释讲解，但相机场景太多，日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志，通过下列分类关键字搜索，即可清晰的分析不同场景的相机运行流程差异…...

编程新知 2025/6/15 13:22:13

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...

编程新知 2025/6/18 8:04:13