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

前端学习10—Ajax

news 来源：原创 2025/9/15 12:17:10

1 AJAX 简介

AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML

通过 AJAX 可以在浏览器中向服务器发送异步请求，最大优势为：无刷新获取数据

AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式

优点：

可以无需刷新页面而与服务器进行通信
允许根据用户事件（鼠标、键盘、文档等事件）来更新部分页面内容

缺点：

没有浏览历史，不能回退
存在跨域问题（同源）
SEO（搜索引擎优化）不友好

1.1 XML 简介

XML（可扩展标记语言），被设计用来传输和存储数据，XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，全都是自定义标签，用来表示一些数据

比如有个学生数据：name = "孙悟空"; age = 18; gender = "男";
用 XML 表示：<student><name>孙悟空</name><age>18</age><gender>男</gender></student>

但现在已经被 JSON 取代了

用 JSON 表示：{"name": "孙悟空","age": 18,"gender": "男"}

1.2 HTTP 协议请求报文和响应文本结构

HTTP（超文本传输协议），协议详细规定了浏览器与万维网服务器之间相互通信的规则约定

请求报文：

行	    POST  BV1WC4y1b78y?spm_id_from=3  HTTP/1.1
头       Host：atguigu.comCookie：name=guiguContent-type：application/x-www-form-urlencodedUser-Agent：chrome 83
空行
体		username=admin&password=admin（get请求时，请求体为空；post请求时，请求体可以为空）

响应报文：

行	    HTTP/1.1  200  OK
头       Content-type：text/html;charset=utf-8Content-length: 2048Content-encoding: gzip
空行
体		<html><head></head><body><h1>尚硅谷</h1></body></html>

Chrome 网络控制台查看通信报文

在这里插入图片描述

1.3 Node.js 安装

去官网找相应版本下载安装即可

检验是否安装成功：命令行中输入 node -v

出现 node 安装版本即可

1.4 express 框架

安装 express 包

npm init --yes

npm i express
express 的基本使用

// 1. 引入 express
const express = require('express');// 2. 创建应用对象
const app = express();// 3. 创建路由规则
// request：对请求报文的封装
// response：对响应报文的封装
app.get('/', (request, response) => {// 设置响应response.send('Hello Express');
});// 4. 监听端口启动服务
app.listen(8000, () => {console.log('服务器已经启动，8000 端口监听中...');
})

终端输入 node espress基本使用.js 运行

浏览器 http://127.0.0.1:8000/ 看到运行结果：
在这里插入图片描述

1.5 nodemon 自动重启工具安装

终端输入：

npm install -g nodemon

终端运行

npx nodemon server.js

2 案例准备

get.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#responseMsg {width: 200px;height: 200px;border: 2px solid peachpuff;}</style>
</head><body><button>点击发送请求</button><div id="responseMsg"></div>
</body></html>

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 Express');
});// 4. 监听端口启动服务
app.listen(8000, () => {console.log('服务器已经启动，8000 端口监听中...');
})

2.1 请求的基本操作

get.html

<script>// 获取元素const btn = document.querySelectorAll('button')[0];const responseMsg = document.querySelector('#responseMsg');// 绑定事件btn.addEventListener('click', function() {// 1. 创建对象const xhr = new XMLHttpRequest();// 2. 初始化 设置请求方法和 URLxhr.open('GET', 'http://127.0.0.1:8000/server');// 3. 发送xhr.send();// 4. 事件绑定 处理服务端返回来的结果xhr.onreadystatechange = function() {// 判断（服务器返回了所有的结果）if(xhr.readyState === 4) {// 判断响应状态码// 2xx：成功if(xhr.status >= 200 && xhr.status < 300) {console.log(xhr);responseMsg.textContent = xhr.response;}}}})
</script>

onreadystatechange：监听函数，实例的属性发生变化时，就会执行这个函数
readyState：实例对象的当前状态，通信过程中，每当实例对象发生状态变化，他的属性值就会一直改变。只读且只包含以下五种状态
- 0：XMLHttpRequest 实例已经生成，但是实例的方法还没有被调用
- 1：方法已经调用，但是实例的方法还没有调用，仍然可以使用实例的方法，设定 HTTP 请求的头信息
- 2：实例的方法已经调用，并且服务器返回的头信息和状态码已经收到
- 3：正在接收服务器传来的数据体（body 部分）
- 4：服务器返回的数据已经完全接收，或者本次接收已经失败
status：服务器回应的 HTTP 状态码
- 200：ok，访问正常
- 301：永久移动
- 302：暂时移动
- 304：未修改
- 307：暂时重定向
- 401：未授权
- 403：禁止访问
- 404：未发现指定网址
- 500：服务器发生错误
response：服务器返回的数据体（HTTP 回应的 body 部分）

2.2 设置请求参数

// 2. 初始化 设置请求方法和 URL
xhr.open('GET', 'http://127.0.0.1:8000/server?username=andy&password=123');

2.3 发送 Post 请求

html 中发送 POST 请求

// 2. 初始化 设置请求方法和 URL
xhr.open('POST', 'http://127.0.0.1:8000/server?');

server.js 增加 post 请求响应

// 3. 创建路由规则
// request：对请求报文的封装
// response：对响应报文的封装
app.get('/server', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');// 设置响应response.send('Hello Express');
});
app.post('/server', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');// 设置响应体response.send('Hello Ajax Post');
})

server.js 文件发生改变的时候，需要重新开启服务

2.4 Post 设置请求体

// 3. 发送
// xhr.send('username=andy&password=123');
xhr.send('username:andy&password:123');

2.5 设置请求头信息

html 中设置请求头

// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader('name', 'lxlu');

server.js 中设置响应体

// 响应头
response.setHeader('Access-Control-Allow-Headers', '*');

setRequestHeader()：设置浏览器发送的 HTTP 请求的头信息，如果该方法多次调用，设定同一个字段，每次调用的值都会被合并成一个单一的值发送

2.6 服务器响应 JSON 数据

server.js

// 可以接收任意类型的请求
app.all('/json-server', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');// 响应头response.setHeader('Access-Control-Allow-Headers', '*');// 响应一个数据const data = {name: 'andy',age: 18};// 对对象进行字符串转换let str = JSON.stringify(data);// 设置响应体response.send(str);
})

对接收到的 JSON 数据进行手动转换 JSON.parse()

// 发送请求
const xhr = new XMLHttpRequest();
// 初始化
xhr.open('GET', 'http://127.0.0.1:8000/json-server');
// 发送
xhr.send();
// 事件绑定
xhr.onreadystatechange = function() {if(xhr.readyState === 4) {if(xhr.status >= 200 && xhr.status < 300) {console.log(xhr.response);// responseMsg.innerHTML = xhr.response;// 手动对数据转换let data = JSON.parse(xhr.response);responseMsg.innerHTML = data.name;}}
}

可以设置响应体数据类型，从而避免手动转换

在这里插入图片描述

2.7 IE 缓存问题

IE 缓存问题：IE 浏览器会将 ajax 请求的返回结果作为缓存，如果再遇到相同的 ajax 请求，就直接在缓存中取结果，这样就得不到最新的服务器响应结果（chrom 浏览器可以实时更新）

解决方法：只要每次请求的 url 不一样，IE 就会认为不是同一个请求，就可以重新请求服务器（在 url 后面加上一个时间戳参数）

xhr.open('GET', 'http://127.0.0.1:8000/ie?t=' + Date.now());

在这里插入图片描述

2.8 请求超时于网络异常处理

模拟给服务器发送请求超时的情况，3s 后返回响应结果

app.get('/delay', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');// 设置响应setTimeout(() => {response.send('网络请求超时');}, 3000);
});

请求超时与网络异常的处理

// 超时设置 2s
xhr.timeout = 2000;
// 超时回调
xhr.ontimeout = function() {alert('网络异常，请稍后重试');
}
// 网络异常回调
xhr.onerror = function() {alert('你的网络似乎出了点问题')
}

timeout：多少毫秒后，如果请求仍然没有得到结果，就会自动终止
ontimeout：监听函数，如果发生 timeout 事件，就会执行这个监听函数（timeout 的监听函数）
onerror：请求失败的监听函数

2.9 取消请求

取消请求发生在已经发送了请求，但是还没有返回请求结果，这时可以设置取消请求：

<body><button class="send">发送请求</button><button class="cancel">取消请求</button>
</body>
<script>const send = document.querySelector('.send');const cancel = document.querySelector('.cancel');let xhr = null;		// 注意这里是用 let，不是 const（const 的值是不能改的）send.addEventListener('click', function() {xhr = new XMLHttpRequest();xhr.open('GET', 'http://127.0.0.1:8000/delay');xhr.send();})cancel.addEventListener('click', function() {xhr.abort();})
</script>

abort()：终止已经发出的 HTTP 请求，调用这个方法后，readyState 属性变为 4，status 属性变为 0

2.10 重复请求问题

设置一个标识变量 isSending，当点击发送按钮时，判断 isSending 的布尔值，如果为 true，表示正在发送，需要取消请求，创建新的请求

let xhr = null;
// 标识变量
let isSending = false;send.addEventListener('click', function() {if(isSending) {     // 如果正在发送，就取消请求，创建一个新的请求xhr.abort();}xhr = new XMLHttpRequest();isSending = true;   // 修改标识变量的值xhr.open('GET', 'http://127.0.0.1:8000/delay');xhr.send();xhr.onreadystatechange = function() {if(xhr.readyState === 4) {// 修改标识变量isSending = false;}}
})
cancel.addEventListener('click', function() {xhr.abort();
})

3 jQuery 发送 AJAX 请求

引入 jQuery：(BootCDN --> jquery --> 复制 <script> 标签)

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

get / post 请求： $. g e t (u r l, [d a t a], [c a ll ba c k], [t y p e]) 、$ .post(url, [data], [callback], [type])

url：请求的 URL 地址
data：请求携带的参数
callback：载入成功时回调函数
type：设置返回内容格式，xml、html、script、json、text、_default

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script><title>Document</title>
</head>
<body><h2>jQuery发送AJAX请求</h2><button>GET请求</button><button>POST请求</button><button>通用性方法ajax</button>
</body>
<script>// 发送GET请求$('button').eq(0).click(function() {$.get('http://127.0.0.1:8000/jquery-server', {id: 3, name: 'andy'}, function(data) {console.log(data);}, 'json');})// 发送POST请求$('button').eq(1).click(function() {$.post('http://127.0.0.1:8000/jquery-server', {id: 3, name: 'andy'}, function(data) {console.log(data);}, 'json');})// 利用AJAX发送$('button').eq(2).click(function(){$.ajax({// urlurl: 'http://127.0.0.1:8000/jquery-server',// 参数data: {id: 3, name: 'andy'},// 请求类型type: 'GET',// 响应体结果dataType: 'json',// 成功的回调success: function(data) {console.log(data);},// 超时时间timeout: 2000,// 失败的回调error: function(){console.log('出错啦!!')},// 头信息headers: {a: 121}})})
</script>
</html>

server.js

// jQuery 服务
app.all('/jquery-server', (request, response) => {response.setHeader('Access-Control-Allow-Origin', '*');response.setHeader('Access-Control-Allow-Headers', '*');// response.send('Hello jQuery');let data = {id: 3, name: 'andy'};response.send(JSON.stringify(data));
});

4 Axios 发送 AJAX 请求

引入 axios

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

axios.get(url[, config])

axios.post(url[, data[, config]])

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://unpkg.com/axios/dist/axios.min.js"></script><title>Document</title>
</head>
<body><button>GET请求</button><button>POST请求</button><button>AJAX请求</button>
</body>
<script>const btns = document.querySelectorAll('button');// 配置 baseUrlaxios.defaults.baseURL = 'http://127.0.0.1:8000';btns[0].onclick = function() {// GET 请求axios.get('/axios-server', {// url 参数params: {id: 12,nickName: 'candy'},// 请求头信息headers: {name: 'lxlu',age: 18}}).then((value) => {console.log(value);});}btns[1].addEventListener('click', function() {// POST 请求axios.post('/axios-server',{username: 'admin',password: 123}, {params: {id: 121,nickName: 'kun'},headers: {height: 175,weight: 60} })})btns[2].onclick = function() {// axios函数发送AJAX请求axios({method: 'POST',url: '/axios-server',params: {vip: 88,level: 15},headers: {a: 100,b: 200},data: {username: 'admin',password: 'admin'}}).then( response => {// 响应状态码console.log(response.status);// 响应状态字符串console.log(response.statusText);// 响应头信息console.log(response.headers);// 响应体console.log(response.data);})}
</script>
</html>

server.js

// axios 服务
app.all('/axios-server', (request, response) => {response.setHeader('Access-Control-Allow-Origin', '*');response.setHeader('Access-Control-Allow-Headers', '*');// response.send('Hello jQuery');let data = {id: 3, name: 'andy'};response.send(JSON.stringify(data));
});

5 fetch 发送 AJAX 请求

fetch无需安装，是window的内置方法；fetch对象属于全局对象，可以直接调用，它的返回结果是一个 promise 对象，但是请求的数据在第二个 .then 中才能获取，error可以使用catch统一进行处理

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button>AJAX请求</button>
</body>
<script>const btn = document.querySelector('button');btn.onclick = function(){fetch('http://127.0.0.1:8000/fetch-server', {// 请求方法method: 'POST',// 请求头headers: {name: 'lxlu'},// 请求体body: 'username=admin&password=123'}).then(response => {// return response.text();return response.json();}).then(response => {console.log(response);});}
</script>
</html>

server.js

// fetch 服务
app.all('/fetch-server', (request, response) => {response.setHeader('Access-Control-Allow-Origin', '*');response.setHeader('Access-Control-Allow-Headers', '*');let data = {id: 3, name: 'andy'};response.send(JSON.stringify(data));
});

6 同源策略

同源策略是一种约定，它是浏览器最核心也是最基本的安全功能。同源策略会阻止一个域的javascrip脚本和另一个域的内容进行交互，是用于隔离潜在恶意文件的关键安全机制。

同源：协议、域名、端口号必须相同

违背同源策略就是跨域

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>Hello</h1><button>点击获取用户数据</button>
</body>
<script>const btn = document.querySelector('button');btn.onclick = function() {const xhr = new XMLHttpRequest();// 因为满足同源策略,所以 url 可以简写xhr.open('GET', '/data');xhr.send();xhr.onreadystatechange = function() {if(xhr.readyState === 4) {if(xhr.status >= 200 && xhr.status < 300) {console.log(xhr.response);}}}}
</script>
</html>

const express = require('express');const app = express();app.get('/home', (request, response) => {// 响应一个页面response.sendFile(__dirname + '/home.html');
});app.get('/data', (request,response) => {response.send('用户数据');
})app.listen(9000, ()=>{console.log('服务已经启动');
})

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

6.1 jsonp

6.2 CORS

通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行

前端学习10—Ajax

1 AJAX 简介 AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML 通过 AJAX 可以在浏览器中向服务器发送异步请求，最大优势为：无刷新获取数据 AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方…...

编程日记 2025/9/15 12:17:10

python的多线程和多进程程序编程

CPU密集型使用多进程，IO密集型使用多线程查看进程ID和线程ID的命令分别是os.getpid()和threading.current_thread() 多进程使用multiprocessing就可以了，通常使用进程池来完成操作，阻塞主进程使用join方法多线程使用threading模块&#…...

编程日记 2025/9/4 17:16:59

Python代码解释

文章目录代码解析执行过程等价写法其他类似操作这段代码使用了 Python 的 map() 函数和 lambda 表达式来对列表中的每个元素进行平方运算。让我详细解释一下： 代码解析 numbers [1, 2, 3, 4] squared list(map(lambda x: x**2, numbers))numbers [1, 2, 3, …...

编程日记 2025/9/11 1:14:45

DNS正反向解析复习，DNS主从服务，转发服务及DNS和nginx联合案例（不断更新）

正向解析 1、配置主机名 [rootlocalhost ~]# dnf install bash-completion -y #一个按tap键补全的软件 [rootlocalhost ~]# hostnamectl hostname dns #改主机名为dns [rootlocalhost ~]# exit ssh root你的IP地址要重启才会生效2、安装bind [rootdns ~]# dnf install b…...

编程日记 2025/9/9 6:46:59

甜心速达智慧潮流精选超市、即时零售新业态，打造可持续发展商业模式

四川甜心速达科技有限公司、现公司运营高管团队均为美团高级运营师，公司高管团队人均获得“全国工商联人才交流服务中心”创业指导师、市场营销师等、公司致力于优化线上店铺人效比和资源匹配等问题，已经实现了对即时零售行业的资源整合，并融…...

编程日记 2025/9/6 21:08:55

大白话聊MySQL覆盖索引

目录一、什么是覆盖索引？二、使用了覆盖索引 vs 没使用覆盖索引的区别三、例子说明四、总结 🌟我的其他文章也讲解的比较有趣😁，如果喜欢博主的讲解方式，可以多多支持一下，感谢🤗！ …...

编程日记 2025/9/11 4:09:35

C++ inline和define（宏）

文章目录 Inline 函数是什么意思？C中哪些函数不能声明为inline?内联(inline)函数和 #define（宏） Inline 函数是什么意思？ inline是内联的意思，可以定义比较小的函数。因为函数频繁调用会占用很多的栈空间&#xff0c…...

编程日记 2025/9/8 10:18:29

Python中的eval()函数详解

文章目录 Python中的eval()函数详解基本语法基本用法安全性问题安全使用建议实际应用场景与exec()的区别性能考虑总结 Python中的eval()函数详解 eval()是Python的一个内置函数，用于执行字符串形式的Python表达式并返回结果。它是一个强大但需要谨慎使用的函数。 …...

编程日记 2025/9/9 1:31:41

rancher 解决拉取dashboard-shell镜像失败的问题

问题背景在 Kubernetes 集群中部署 Rancher 后，点击右上角的 "Shell" 按钮时，Rancher 会动态创建一个 dashboard-shell-xxxxx Pod，用于提供 Web 终端功能。然而，由于默认镜像 rancher/shell:v0.1.21 托管在 Docker Hu…...

编程日记 2025/9/9 3:01:01

在Ubuntu服务器上安装Docker（支持Ubuntu 20.04/22.04等版本）：

1. 卸载旧版本（如有） 如果系统曾安装过旧版Docker，先清理残留： sudo apt remove docker docker-engine docker.io containerd runc2. 添加Docker官方仓库安装依赖工具 sudo apt update sudo apt install -y ca-certificates …...

编程日记 2025/9/8 1:29:23

【Linux 进程控制】—— 进程亦生生不息：起于鸿蒙，守若空谷，归于太虚

欢迎来到一整颗红豆的博客✨，一个关于探索技术的角落，记录学习的点滴📖，分享实用的技巧🛠️，偶尔还有一些奇思妙想💡 本文由一整颗红豆原创✍️，感谢支持❤️！请尊重原创…...

编程日记 2025/9/11 9:51:00

K8s常用基础管理命令（一）

基础管理命令基础命令kubectl get命令kubectl create命令kubectl apply命令kubectl delete命令kubectl describe命令kubectl explain命令kubectl run命令kubectl cp命令kubectl edit命令kubectl logs命令kubectl exec命令kubectl port-forward命令kubectl patch命令集群管理命…...

编程日记 2025/9/11 1:14:47

WebChat 一款非常好用的浏览器侧边栏 AI 问答插件

文章目录使用方法及效果展示划线引用自定义工具自定义模型设置主要功能1. 划线引用功能2. 自定义划线工具3. 聊天功能4. 历史记录管理5. 界面特性安装方法方法一：直接安装发布版本（推荐）方法二：从源码构建安装（开发…...

编程日记 2025/9/11 21:52:22

kubernetes入门篇之创建一个nginx容器

上几篇讲了部署master和worker node 及网络插件calico， 现在开始实际运行一个容器。 1. 新建nginx.yaml文件方式1：直接创建一个pod 和一个 service，一般不直接这样创建，该方式仅适用于测试或学习 apiVersion: v1 kind: Pod …...

编程日记 2025/9/13 3:34:07

回顾 | 2025香港Web3嘉年华：CertiK以创新技术定义安全未来

4月6日至9日，Web3安全巨头CertiK亮相2025香港Web3嘉年华。活动期间，CertiK不仅设立独立展位与广大Web3生态参与者深入互动，更通过高层次的技术交流与前沿研究成果展示，成为本届盛会备受瞩目的焦点。耶鲁大学计算机科学系教授、C…...

编程日记 2025/9/8 1:29:25

HTML5的笔记

文章目录 1.HTML的概念1.1HTML的基本骨架 2.标签语法2.1标签的关系 3.标签3.1双标签3.1.1标题标签<h1~h6>3.1.2段落标签<p>3.1.3文本格式化标签3.1.4超链接标签<a>3.1.5音频和视频标签audio和<vedio>3.1.6列表标签3.1.7表格标签 3.2单标签3.2.1换行标签…...

编程日记 2025/9/10 12:18:25

LeetCode.2843. 统计对称整数的数目

统计对称整数的数目题目解题思路思路1.v1Code 思路优化1.v2Code 思路优化1.v3Code复杂度分析题目 2843. 统计对称整数的数目给你两个正整数 low 和 high 。对于一个由 2 * n 位数字组成的整数 x ，如果其前 n 位数字之和与后 n 位数字之和相等，则认…...

编程日记 2025/9/8 16:20:10

Java常用工具算法-6--秘钥托管云服务3--微软zure Key Vault

Azure Key Vault是微软Azure提供的一项服务，旨在帮助用户安全地存储和管理敏感信息，如加密密钥、证书和密码等。它提供了一个集中的位置来保护这些重要资产，并且通过细粒度的访问控制和审计日志来确保安全性。 1、主要功能 （1&a…...

编程日记 2025/9/15 10:03:25

表格开启聚光灯，查看数据不错行-Excel易用宝

面对如此庞大的一个表格，每次找数据就像走迷宫一样，有时看到了数据，眼神不好的小丽小手一抖还会选择到其他数据上，我问她个数据，她经常给我报个错的数据，我说怎么数据总是对不上号。对于大表格防看错行这…...

编程日记 2025/9/12 8:06:10

解决java使用easyexcel填充模版后，高度不一致问题

自定义工具，可以通过获取上一行行高设置后面所以行的高度 package org.springblade.modules.api.utils;import com.alibaba.excel.write.handler.RowWriteHandler; import com.alibaba.excel.write.metadata.holder.WriteSheetHolder; import com.alibaba.excel.wr…...

编程日记 2025/9/7 12:45:27

【25软考网工笔记】第二章数据通信基础（1）信道特性奈奎斯特香农定理

一、信道特性 1. 数据通信概念 1）通信系统的基本元素通信目的: 传递信息。信源: 产生和发送信息的一端，即信息发送的源头。信宿: 接收信息的一端，即信息的目的地。信道: 信源和信宿之间的通信线路，用于传输信息。信号变换:…...

编程日记 2025/9/15 3:04:45

2024年React最新高频面试题及核心考点解析，涵盖基础、进阶和新特性，助你高效备战

以下是2024年React最新高频面试题及核心考点解析，涵盖基础、进阶和新特性，助你高效备战： 一、基础篇 React虚拟DOM原理及Diff算法优化策略 • 必考点：虚拟DOM树对比（同级比较、Key的作用、组件类型判断） …...

编程日记 2025/9/10 16:44:57

【Code】《代码整洁之道》笔记-Chapter11-系统

第11章　系统 “复杂要人命。它消磨开发者的生命，让产品难以规划、构建和测试。” 11.1　如何建造一个城市你能自己掌管一切细节吗？大概不行。即便是管理一个既存的城市，也是靠单人能力无法做到的。不过，城市还是在运转&#…...

编程日记 2025/9/4 19:48:45

MySQL数据库编程总结

MySQL数据库编程总结一、数据库概述数据库定义 • 数据库是管理数据的软件系统，用于高效存储、管理和检索数据，减少冗余。 • 核心功能：通过SQL语言定义、操作数据，维护完整性和安全性。常见数据库 • MySQL、Oracle、SQL Ser…...

编程日记 2025/9/9 3:43:11

MySQL学习笔记7【InnoDB】

Innodb 1. 架构 1.1 内存部分 buffer pool 缓冲池是主存中的第一个区域，里面可以缓存磁盘上经常操作的真实数据，在执行增删查改操作时，先操作缓冲池中的数据，然后以一定频率刷新到磁盘，这样操作明显提升了速度。 …...

编程日记 2025/9/8 1:29:26

HTML应用指南：利用GET请求获取全国汉堡王门店位置信息

在当今快节奏的都市生活中，餐饮品牌的门店布局不仅反映了其市场策略，更折射出消费者对便捷、品质和品牌认同的追求。汉堡王（Burger King）作为全球知名的西式快餐品牌之一，在中国市场同样占据重要地位。自进入中国市场以…...

编程日记 2025/9/11 11:46:58

STM32+EC600E 4G模块与华为云平台通信

前言由于在STM32巡回研讨会上淘了一块EC600E4G模块以及刚办完电信卡多了两张副卡，副卡有流量刚好可以用一下，试想着以后画一块ESP32板子搭配这个4G模块做个随身WIFI，目前先用这个模块搭配STM32玩一下云平顺便记录一下。实验目的实现STM…...

编程日记 2025/9/9 4:11:26

【Spring】IoC详解：五大类注解、类Bean的存储（上）

1.IoC本质 IoC（Inversion of Control，控制反转） 是Spring框架的灵魂，它颠覆了传统编程中“谁用谁造”的逻辑。简单来说，IoC就是把对象创建和管理的控制权从程序员手中“反转”给一个外部容器，让代码更灵活…...

编程日记 2025/9/12 3:21:36

图片压缩后失真？3款工具还原高清细节

在当今，图片的使用无处不在。为了便于存储和传输，我们常常会对图片进行压缩。然而，不少人发现，压缩后的图片往往变得模糊，失去了原本的清晰度和细节。那么，当遇到这种情况时，我们该如何将模糊的…...

编程日记 2025/9/12 0:48:32

2025中国移动云智算大会｜彩讯企业级AI应用产品引关注

2025中国移动以“由云向智，共绘算网新生态”为主题，精心打造了一场智能科技展。中国移动携手生态伙伴带来涵盖算力、工具、模型、应用等覆盖多样化场景的AI应用服务，赋能生产方式、生活方式、社会治理方式的数智化解决方案，充分释…...

编程日记 2025/9/11 17:21:26

在新一代人工智能技术引领下的，相互联系、层层递进的明厨亮灶开源了

明厨亮灶视频监控平台是一款功能强大且简单易用的实时算法视频监控系统。它的愿景是最底层打通各大芯片厂商相互间的壁垒，省去繁琐重复的适配流程，实现芯片、算法、应用的全流程组合，从而大大减少企业级应用约95%的开发成本。AI技术可以24小时…...

编程日记 2025/9/9 0:27:17

修图自由！自建IOPaint服务器，手机平板随时随地远程调用在线P图

前言：在这个人人都想当摄影师的时代，一张完美的照片简直比中彩票还难。但别担心，今天我来给大家揭秘一个超级神器——IOPaint！这款免费开源的AI工具不仅能一键移除照片中的杂物和路人，还能智能扩展图片内容&#xff0c…...

编程日记 2025/9/11 3:47:50

PyTorch实现二维卷积与边缘检测：从原理到实战

本文通过PyTorch实现二维互相关运算、自定义卷积层，并演示如何通过卷积核检测图像边缘。同时，我们将训练一个卷积核参数，使其能够从数据中学习边缘特征。 1. 二维互相关运算的实现互相关运算（Cross-Correlation）是卷…...

编程日记 2025/9/14 1:31:10

解决Server doesn‘t support Accept-Ranges问题

Cannot download differentially, fallback to full download: Error: Server doesnt support Accept-Ranges (response code 200) 解决方案修改nginx配置文件支持Accept-Ranges（范围请求） server {...location ^~/ {default_type multipart/byterang…...

编程日记 2025/9/13 4:31:26

处理Excel表不等长时间序列用tsfresh提取时序特征

我原本的时间序列格式是excel表记录的，每一行是一条时间序列，时间序列不等长。要把excel表数据读取出来之后转换成extract_features需要的格式。 1.读取excel表数据 import pandas as pd import numpy as np from tsfresh import extract_features mda…...

编程日记 2025/9/15 6:36:25

Linux __命令和权限

目录一、几个指令 bc uname -r 指令重要的几个热键二、Shell命令以及运行原理为什么有外壳外壳是如何工作的什么是操作系统，为什么要有操作系统三、文件类型 1、Linux的文件类型 2、文件类型四、用户用户问题和切换问题增加普通用户 root -&…...

编程日记 2025/9/15 1:37:08

IO流——字符输入输出流：FileReader FileWriter

一、文件字符输入流：FileReader 作用：以内存为基准，可以把文件中的数据以字符的形式读入到内存中去 public class Test5 {public static void main(String[] args) {try (Reader fr new FileReader("E:\\IDEA\\JavaCodeAll\\file-io-t…...

编程日记 2025/9/3 0:35:26

【大模型理论篇】DeepResearcher论文分析-通过在真实环境中的强化学习实现深度研究

1. 背景与问题大模型（LLMs）配合网络搜索功能已经展现出在深度研究任务中的巨大潜力。然而，目前的方法主要依赖两种途径： 人工设计的提示工程（Prompt Engineering）：这种方法依靠手动设计的工作流…...

编程日记 2025/9/14 11:49:06

大数据（7.5）Kafka Edge在5G边缘计算中的革新实践：解锁毫秒级实时处理的无限可能

目录一、5G时代边缘计算的算力革命1.1 传统架构的延迟困境1.2 5G网络特性与Kafka适配二、Kafka Edge核心架构设计2.1 分层处理架构2.2 关键技术创新点2.2.1 协议优化2.2.2 轻量化存储引擎三、5G场景落地实践3.1 智能工厂预测性维护3.2 全息远程医疗会诊四、性能优化深度实践…...

编程日记 2025/9/15 0:05:36

【基于开源insightface的人脸检测，人脸识别初步测试】

简介 InsightFace是一个基于深度学习的开源人脸识别项目，由蚂蚁金服的深度学习团队开发。该项目提供了人脸检测、人脸特征提取、人脸识别等功能，支持多种操作系统和深度学习框架。本文将详细介绍如何在Ubuntu系统上安装和实战InsightFace项目。目前github有非常多的人脸识…...

编程日记 2025/9/13 11:30:05

kafka怎么保证消息不被重复消费

在 Kafka 中，要保证消息不被重复消费，可从消费者端和生产者端分别采取不同策略，下面为你详细介绍： 消费者端实现幂等消费幂等消费是指对同一条消息，无论消费多少次，产生的业务结果都是一样的。业务层面…...

编程日记 2025/9/12 15:18:39

一个批量文件Dos2Unix程序（Microsoft Store，开源）

这个程序可以把整个目录的文本文件改成UNIX格式，源码是用C#写的。目录一、从Microsoft Store安装二、从github获取源码三、功能介绍 3.1 运行 3.2 浏览 3.3 转换 3.4 转换（无列表） 3.5 取消 3.6 帮助四、源码解读五、讨论和…...

编程日记 2025/9/12 6:19:48

Python及Javascript的map 、 filter 、reduce类似函数的对比汇总

A. 在Python中，map 和 filter 是两个非常有用的内置函数，它们分别用于对可迭代对象中的每个元素执行某种操作，并返回结果。在JavaScript中，虽然没有内置的 map 和 filter 函数，但是可以使用数组的 map() 和 filter() …...

编程日记 2025/9/1 16:20:08

Linux中OS的管理和进程的概念

一、OS的管理 1.1操作系统宏观的理解 OS的本质是一款进行资源管理的软件图示： 1.2OS存在的意义 1.2.1计算机的分层式管理结构最底层的硬件部分遵循“冯诺依曼体系” ，每一种硬件都在驱动层中有着自己对应的“驱动程序” 在OS中，驱动管…...

编程日记 2025/9/15 3:51:27

Spring定时任务修仙指南：从@Scheduled到分布式调度的终极奥义

各位被Thread.sleep()和while(true)折磨的Spring道友们！今天要解锁的是Spring生态自带的定时任务三件套——Scheduled、TaskScheduler、Async定时组合技！无需引入外部依赖，轻松实现从简单定时到分布式调度的全场景覆盖！准备好抛弃…...

编程日记 2025/9/15 0:28:20

Node.js多版本共存管理工具NVM（最新版本）详细使用教程（附安装包教程）

目录前言一、Nvm下载二、Nvm安装三、配置nodeJS 前言 NVM（Node Version Manager）是一个用于管理多个Node.js版本的工具，主要帮助开发者在同一设备上轻松安装、切换和卸载不同版本的Node.js，解决项目间版本冲突问题。一、…...

编程日记 2025/9/13 21:43:46

管道魔法木马利用Windows零日漏洞部署勒索软件

微软披露，一个现已修复的影响Windows通用日志文件系统（CLFS）的安全漏洞曾被作为零日漏洞用于针对少数目标的勒索软件攻击中。 01 攻击目标与漏洞详情这家科技巨头表示："受害者包括美国信息技术（IT&#xff09…...

编程日记 2025/9/2 20:40:55

Devops之Argo：Argo 是什么，和现在常用的Jenkins之间的区别

Argo CD（Argo Continuous Delivery 的缩写）是一款基于 GitOps 的声明式 Kubernetes 持续交付工具。它提供了一种以 Git 为中心的方法来管理和部署应用程序到 Kubernetes 集群。Argo CD 遵循 GitOps 的原则，即将应用程序的预期状态存储在 Git …...

编程日记 2025/9/8 1:29:29

从 60 FPS 掉帧到 7.6 倍提速Rust + WebAssembly 优化《生命游戏》的实战指南

一、构建 FPS 统计器：用 performance.now() 实时观察性能变化要优化，就要先测量。我们在 JavaScript 端添加一个 fps 对象，结合 performance.now() 来监控每一帧的耗时，并统计最近 100 帧的平均 FPS、最小 FPS、最大 FPS&#…...

编程日记 2025/9/11 19:56:52

jmeter 集成ZAP进行接口测试中的安全扫描实现方案

以下是将 JMeter 集成 ZAP（OWASP Zed Attack Proxy）进行接口测试中安全扫描的实现方案： 1. 环境准备 JMeter 安装：从 JMeter 官方网站（https://jmeter.apache.org/download_jmeter.cgi）下载并安装 JMeter，确保其版本稳定。ZAP 安装：从 ZAP 官方网站（https://www.zapr…...

编程日记 2025/9/12 6:03:05

1 AJAX 简介

1.1 XML 简介

1.2 HTTP 协议请求报文和响应文本结构

1.3 Node.js 安装

1.4 express 框架

1.5 nodemon 自动重启工具安装

2 案例准备

2.1 请求的基本操作

2.2 设置请求参数

2.3 发送 Post 请求

2.4 Post 设置请求体

2.5 设置请求头信息

2.6 服务器响应 JSON 数据

2.7 IE 缓存问题

2.8 请求超时于网络异常处理

2.9 取消请求

2.10 重复请求问题

3 jQuery 发送 AJAX 请求

4 Axios 发送 AJAX 请求

5 fetch 发送 AJAX 请求

6 同源策略

6.1 jsonp

6.2 CORS

相关文章：