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

ajax基础

news 来源：原创 2025/5/18 11:31:45

一：express框架

在终端输入node+js文件名

// 引入express
const express = require('express');
//创建应用对象
const app = express();
//创建路由规则
app.get('/',(request,response) => {//设置响应response.send('Hello Express');
});    // 监听3000端口
app.listen(8000,()=>{console.log("服务器已经启动");  // 启动成功后，在命令行中看到此消息
});

Ctrl+c结束服务器

二：ajax入门：

// 引入express
const express = require('express');
//创建应用对象
const app = express();
//创建路由规则
app.get('/server',(request,response) => {//设置响应头,设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');//设置响应response.send('Hello ajax');
});    app.POST('/server',(request,response) => {//设置响应头,设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');//设置响应response.send('Hello ajax post');
});  // 监听8000端口
app.listen(8000,()=>{console.log("服务器已经启动");  // 启动成功后，在命令行中看到此消息
});

get请求

<!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>#result{width: 200px;height: 100px;border: 1px solid black;}</style>
</head>
<body><button>点击发送请求</button><div id="result"></div><script>//获取按钮元素const btn =document.getElementsByTagName('button')[0];const result = document.getElementById('result');//添加点击事件btn.onclick = function(){//1.创建对象const xhr = new XMLHttpRequest();//2.初始化xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200');//3. 发送请求xhr.send();//4.时间绑定//on when 当...时候//readystate 是xhr的一个属性，值有0-4，//分别代表请求未发送，请求发送中，请求发送完成，响应头部接收完成，响应数据接收完成//改变状态函数xhr.onreadystatechange = function(){//判断（服务端返回了所有的结果）if(xhr.readyState===4){//判断（状态码是否为200，即服务器返回了正确的数据）//响应状态码分别有200 404 500等if(xhr.status>=200&&xhr.status<300){//处理结果//获取状态码console.log(xhr.status);//状态状态字符串console.log(xhr.statusText);//返回所有响应头console.log(xhr.getAllResponseHeaders);//响应体console.log(xhr.response);}else{console.log('请求出错');}result.innerHTML=xhr.response;}}}</script>
</body>
</html>

post请求

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>POST请求</title><style>#result{width: 200px;height: 100px;border: 1px solid black;}</style>
</head>
<body><div id="result"></div><script>const result = document.getElementById("result");result.addEventListener("mouseover",function(){// console.log("mouseover");const xhr = new XMLHttpRequest();xhr.open("POST","http://127.0.0.1:8000/server");xhr.send();xhr.onreadystatechange=function(){if(xhr.readyState===4 && xhr.status===200){if(xhr.status>=200&&xhr.status<300){result.innerHTML=xhr.response;}}}})</script>
</body>
</html>

设置请求头信息：

服务器需要设置响应头，all可以接受任何的请求

response.setHeader('Access-Control-Allow-Headers','*');

设置允许跨域（自己命名的请求头信息）

app.all('/server',(request,response) => {//设置响应头,设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');//设置响应头, 设置允许跨域的头部response.setHeader('Access-Control-Allow-Headers','*');//设置响应response.send('Hello ajax post');
});

服务器端响应json数据

<!DOCTYPE html>
<html lang="en">
<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: 1px solid black;}</style>
</head>
<body><div id="result"></div><script>const result=document.getElementById('result');//绑定键盘按下事件window.onkeydown = function(){// console.log('test');//发送请求const xhr = new XMLHttpRequest();//设置响应体数据类型xhr.responseType='json';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);// result.innerHTML=xhr.response;//手动对数据转化// let data = JSON.parse(xhr.response);// console.log(data);// result.innerHTML=data.name;//自动转化console.log(xhr.response);result.innerHTML=xhr.response.name;}}}</script>
</body>
</html>

nodemon自动重启工具

在终端中输入 npm install -g nodemon指令

安装完成之后只需要打node+tab就可以

ajaxIE的缓存问题

只需要加一个时间戳就可以

延迟请求

超过两秒请求取消

让网络离线，报异常

ajax手动取消

注意这里使用的是let xhr =null

重复请求问题

ajax基础

一：express框架在终端输入nodejs文件名 // 引入express const express require(express); //创建应用对象 const app express(); //创建路由规则 app.get(/,(request,response) > {//设置响应response.send(Hello Express); }); // 监听3000端口 app.lis…...

编程日记 2025/5/18 11:31:45

Python轴承故障诊断 (21)基于VMD-CNN-BiTCN的创新诊断模型

往期精彩内容： Python-凯斯西储大学（CWRU）轴承数据解读与分类处理 Pytorch-LSTM轴承故障一维信号分类(一)-CSDN博客 Pytorch-CNN轴承故障一维信号分类(二)-CSDN博客 Pytorch-Transformer轴承故障一维信号分类(三)-CSDN博客三十多个开源…...

编程日记 2025/5/17 22:57:10

强化学习导论 -章9 基于函数逼近的同轨策略预测

基于函数逼近的同轨策略预测我们前面已经完成了基于表格的学习任务，基于表格的就是每个s是独立学习的，基本上不考虑泛化的能力，但是也对于每个任务状态学习的非常好。考虑到状态空间越来越大，我们必须考虑到函数逼近的情况。 1…...

编程日记 2025/5/18 10:21:40

Ubuntu环境中RocketMQ安装教程

参考教程 https://blog.csdn.net/weixin_56219549/article/details/126143231 1、安装JDK，并配置环境变量（略） 2、下载RocketMQ安装包 RocketMQ下载地址，选择二进制包下载 unzip rocketmq-all-5.0.0-ALPHA-bin-release.zip 使…...

编程日记 2025/5/18 9:56:57

Linux操作系统2-进程控制3(进程替换，exec相关函数和系统调用)

上篇文章：Linux操作系统2-进程控制2(进程等待，waitpid系统调用，阻塞与非阻塞等待)-CSDN博客本篇代码Gitee仓库：Linux操作系统-进程的程序替换学习 d0f7bb4 橘子真甜/linux学习 - Gitee.com 本篇重点：进程替换目录 …...

编程日记 2025/5/10 2:03:13

ThinkPHP Nginx 重写配置

目录 NGINX 重写 Admin项目隐藏入口文件，且禁用Admin模块&Admin.php 1️⃣配置仅用模块 2️⃣新增admin_xyz.php文件（自定义入口文件名），并绑定admin模块 3️⃣配置nginx 重写规则 NGINX 重写在Nginx低版本中&#xff0…...

编程日记 2025/5/13 4:51:58

SpringBoot小知识(2)：日志

日志是开发项目中非常重要的一个环节，它是程序员在检查程序运行的手段之一。 1.日志的基础操作 1.1 日志的作用编程期调试代码运营期记录信息： * 记录日常运营重要信息(峰值流量、平均响应时长……) * 记录应用报错信息(错误堆栈) * 记录运维过程数据(…...

编程日记 2025/5/18 10:39:10

深度学习：利用GPU进行训练

深度学习：利用GPU进行训练在现代深度学习框架中，如PyTorch，利用GPU加速模型训练是一种常见的做法。GPU（图形处理单元）由于其并行处理能力，特别适合执行大量的矩阵运算，这在训练神经网络时尤为…...

编程日记 2025/5/12 13:06:00

PHP 生成分享海报

因为用户端有多个平台，如果做分享海报生成，需要三端都来做，工作量比较大。所以这个艰巨的任务就光荣的交给后端了。经过一定时间的研究和调试，最终圆满完成了任务，生成分享海报图片实现笔记如下。目录准备字体文件…...

编程日记 2025/5/18 2:47:09

A050-基于spring boot物流管理系统设计与实现

🙊作者简介：在校研究生，拥有计算机专业的研究生开发团队，分享技术代码帮助学生学习，独立完成自己的网站项目。代码可以查看文章末尾⬇️联系方式获取，记得注明来意哦~🌹 赠送计算机毕业设计600…...

编程日记 2025/5/17 21:18:41

【docker】8. 镜像仓库实战

综合实战一：搭建一个 nginx 服务 Web 服务器 Web 服务器，一般是指“网站服务器”，是指驻留于互联网上某种类型计算机的程序。Web 服务器可以向 Web 浏览器等客户端提供文档，也可以放置网站文件，让全世界浏览&#xf…...

编程日记 2025/5/18 10:24:24

基于Springboot在线招投标系统【附源码】

基于Springboot在线招投标系统效果如下： 系统主页面系统登陆页面招标人信息管理页面招标信息管理页面招标信息页面评标信息页面中标信息页面研究背景随着互联网技术的不断发展，传统的招投标方式已经无法满足现代企业的需求。传统的招投标流程…...

编程日记 2025/5/18 10:13:07

elasticsearch集群部署及加密通讯

原文地址：elasticsearch集群部署及加密通讯 – 无敌牛欢迎参观我的个人博客：无敌牛 – 技术/著作/典籍/分享等第零步，准备给各台设备配置虚拟主机名，这样集群不依赖IP，即使IP变动，改动也更方便。参考…...

编程日记 2025/5/18 10:18:54

yolov5的pt模型转化为rk3588的rknn，并在rk3588上调用api进行前向推理

当使用yolov5进行目标检测且进行边缘计算的场景时，要考虑性价比或者国产化的话，rk3588板子是个不错的选择。本篇介绍yolov5的pytorch模型转化为rknn的流程，并展示在rk板子上如何调用相关api来使用转好的rknn模型进行前向推理。 pt转rknn流程…...

编程日记 2025/5/18 10:42:09

【机器学习】—PCA（主成分分析）

主成分分析（PCA）详解引言主成分分析（PCA）是一种统计方法，它可以通过正交变换将一组可能相关的变量转换为一组线性不相关的变量，这些变量称为主成分。PCA经常用于降维，数据压缩，以…...

编程日记 2025/5/18 10:10:19

【Linux】vim

🌻个人主页：路飞雪吖~ 🌠专栏：Linux 目录一、Linux开发工具 🌟vim的基本概念二、Linux编译器-gcc/g使用 🌟gcc如何完成（ESc - iso） 1、预处理（进行宏替换&#xff…...

编程日记 2025/5/18 6:55:03

virtualbox给Ubuntu22创建共享文件夹

1.在windows上的操作，创建共享文件夹Share 2.Ubuntu22上的操作，创建共享文件夹LinuxShare 3.在virtualbox虚拟机设置里，设置共享文件夹共享文件夹路径：选择Windows系统中你需要共享的文件夹共享文件夹名称：挂载至wi…...

编程日记 2025/5/18 10:22:40

SQLModel与FastAPI结合：构建用户增删改查接口

SQLModel简介 SQLModel是一个现代化的Python库，旨在简化与数据库的交互。它结合了Pydantic和SQLAlchemy的优势，使得定义数据模型、进行数据验证和与数据库交互变得更加直观和高效。SQLModel由FastAPI的创始人Sebastin Ramrez开发，专为与FastA…...

编程日记 2025/5/18 7:44:41

数据库日志

MySQL中有哪些日志 1，redo log重做日志 redo log是物理机日志，因为它记录的是对数据页的物理修改，而不是SQL语句。作用是确保事务的持久性，redo log日志记录事务执行后的状态，用来恢复未写入 data file的已提交事务…...

编程日记 2025/5/17 13:29:51

力扣第 71 题简化路径

一、题目描述给定一个字符串 path，表示一个由目录名和斜杠 "/" 组成的绝对路径，请简化该路径，使其变为规范路径。在 Unix 风格的文件系统中： 一个点 "." 表示当前目录本身；两个点 "..&q…...

编程日记 2025/5/18 10:25:45

Android 性能优化：内存优化（理论篇）

内存作为App程序运行最重要的资源之一，需要运行过程中做到合理的资源分配与回收，不合理的内存占用轻则使得用户应用程序运行卡顿、ANR、黑屏，重则导致用户应用程序发生 OOM（out of memory）崩溃。喜马直播随着近些年的业…...

编程日记 2025/5/11 18:18:12

Flink四大基石之窗口（Window）使用详解

目录一、引言二、为什么需要 Window 三、Window 的控制属性窗口的长度（大小） 窗口的间隔四、Flink 窗口应用代码结构是否分组 Keyed Window --键控窗 Non-Keyed Window 核心操作流程五、Window 的生命周期分配阶段触发计算六、Wi…...

编程日记 2025/5/18 1:44:39

Easy Excel 通过【自定义批注拦截器】实现导出的【批注】功能

目录 Easy Excel 通过【自定义批注拦截器】实现导出的【批注】功能需求原型：相关数据：要导出的对象字段postman 格式导出对象VO 自定义批注拦截器业务代码： 拦截器代码解释：详细解释：格式优化： Easy Excel…...

编程日记 2025/5/14 10:28:10

PHP 去掉特殊不可见字符 “\u200e“

描述最近在排查网站业务时，发现有数据匹配失败的情况肉眼上完全看不出问题所在当把字符串【M24308/23-14F‎】复制出来发现末尾有个不可见的字符使用删除键或左右移动时才会发现最后测试通过 var_dump 打印发现这个"空字符"占了三个长度 &#xf…...

编程日记 2025/5/14 11:18:06

Flume和kafka的整合：使用Flume将日志数据抽取到Kafka中

文章目录 1、Kafka作为Source【数据进入到kafka中，抽取出来】2、kafka作为Sink 【数据从别的地方抽取到kafka里面】 1、Kafka作为Source【数据进入到kafka中，抽取出来】 kafka源 --> memory --> 控制台： a1.sources r1 a1.sinks k1…...

编程日记 2025/5/15 17:31:05

Flutter：启动屏逻辑处理02：启动页

启动屏启动之后，制作一个启动页面新建splash：view 视图中只有一张图片sliding.png就是我们的启动图 import package:flutter/material.dart; import package:get/get.dart; import index.dart; class SplashPage extends GetView<SplashController…...

编程日记 2025/5/18 10:37:28

【MySQL】自动刷新flush privileges命令

在 MySQL 中，执行 FLUSH PRIVILEGES 命令的主要作用是使权限表中的更改立即生效。下面是关于这个命令的一些关键点： 1. 什么是 FLUSH PRIVILEGES 当你使用 SET PASSWORD 或其他 SQL 语句直接修改了用户的密码或权限（例如，使用 U…...

编程日记 2025/5/18 10:54:03

2024免费天气接口（无废话版）

免费接口1：http://t.weather.sojson.com/api/weather/city/101030100 免费接口2：http://t.weather.itboy.net/api/weather/city/101030100 至于后面那个城市编码请自行查询：如图注意！！！ 点击下载时可能…...

编程日记 2025/5/9 13:25:35

fpga 时序分析基础

目录触发器的动态参数同步时序电路分析 1. 时钟脉冲的特性 2. 同步时序电路分析 Timing Analyzer的应用异步时序与亚稳态问题时序分析就是对时序电路进行时序检查，通过分析电路中所有寄存器之间的路径延迟以检查电路的传输延迟是否会导致触发器的建立时间…...

编程日记 2025/5/14 21:12:26

Laravel8.5+微信小程序实现京东商城秒杀方案

一、商品秒杀涉及的知识点鉴权策略封装掊口访问频次限制小程序设计页面防抖接口调用订单创建事务使用超卖防御二、订单库存系统方案（3种） 下单减库存优点是库存和订单的强一致性，商品不会卖超，但是可能导致恶意下单&#xff…...

编程日记 2025/5/14 22:09:43

Git——本地仓库链接并推送到多个远程仓库

步骤 1. 新建仓库init 或删除已有仓库远程链接 // 1.新建init git init// 2.已有仓库，查看链接的远程仓库 git remote -v// 3.已有远程连接仓库，需要删除连接 git remote rm origin(或对应远程仓库名) 2.新建远程仓库在gitee、github等托管平台创建…...

编程日记 2025/5/6 17:47:42

llama-factory 系列教程 (七)，Qwen2.5-7B-Instruct 模型微调与vllm部署详细流程实战

文章目录介绍llama-factory 安装装包下载模型微调模型数据集训练模型微调后的模型推理介绍时隔已久的 llama-factory 系列教程更新了。本篇文章是第七篇，之前的六篇，大家酌情选看即可。因为llama-factory进行了更新，我前面几篇文章的实…...

编程日记 2025/5/15 1:31:14

Spring Boot的理解

一、什么是Spring Boot? Spring Boot是一个用于构建基于Spring框架的应用程序的开源框架。它简化了Spring应用程序的开发过程，使开发者能够更容易地创建独立运行的、生产级别的Spring应用程序。Spring Boot提供了许多功能和约定，可以帮助开发者快速搭建…...

编程日记 2025/5/14 21:44:09

QT QFormLayout控件全面详解

本系列文章全面的介绍了QT中的57种控件的使用方法以及示例，包括 Button(PushButton、toolButton、radioButton、checkBox、commandLinkButton、buttonBox)、Layouts(verticalLayout、horizontalLayout、gridLayout、formLayout)、Spacers(verticalSpacer、horizontalSpacer)、…...

编程日记 2025/5/15 13:23:38

系统性能定时监控PythonLinux

系统性能定时监控 1.系统监控概述⽤Python来编写脚本简化⽇常的运维⼯作是Python的⼀个重要⽤途。在Linux下，有许多系统命令可以让我们时刻监控系统运⾏的状态，如 ps ， top ， free 等等。要获取这些系统信息，Python…...

编程日记 2025/5/17 4:17:39

python学习——列表的相关操作

在 Python 中，列表（list）是一种非常灵活的数据结构，可以用来存储一系列的元素。以下是列表的一些常见操作： 文章目录创建列表访问元素修改元素列表切片添加元素删除元素列表推导式其他操作pop基本用法指定索引使用场…...

编程日记 2025/5/18 10:35:21

HTML CSS 魔法秀：打造翻转卡片登录注册页面

这段 HTML 和 CSS 代码创建了一个具有翻转卡片效果的登录和注册页面。下面是对重点标签和 CSS 样式的解释和总结： 一键复制 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"…...

编程日记 2025/5/17 1:13:53

Web day04 SpringBoot

目录 1.Spring概念： 2. spring程序快速入门： 3.HTTP协议： 特点： 基于TCP 协议： 基于请求响应模型： HTTP协议是无状态协议： 请求协议：为浏览器向服务器发出的消息获取请求数据…...

编程日记 2025/5/15 4:55:53

selinux和防火墙实验

1 、 selinux 的说明 SELinux 是 Security-Enhanced Linux 的缩写，意思是安全强化的 linux 。 SELinux 主要由美国国家安全局（ NSA ）开发，当初开发的目的是为了避免资源的误用。系统资源都是通过程序进行访问的，如…...

编程日记 2025/5/17 0:25:59

ClamAV 在 CentOS 的开发版本 `clamav-devel`

是的，ClamAV 在 CentOS 上有开发版本（通常称为 clamav-devel），它包含了开发 ClamAV 应用程序所需的头文件和库文件。以下是如何在 CentOS 上安装 ClamAV 及其开发版本的步骤。 ### 1. **安装 EPEL 仓库** ClamAV 通常在 EPEL&am…...

编程日记 2025/5/17 2:45:20

C++《二叉搜索树》

在初阶数据结构中我学习了树基础的概念以及了解了顺序结构的二叉树——堆和链式结构二叉树该如何实现，那么接下来我们将进一步的学习二叉树，在此会先后学习到二叉搜索树、AVL树、红黑树；通过这些的学习将让我们更易于理解后面set、map、哈希等…...

编程日记 2025/5/12 23:59:38

⭐️ GitHub Star 数量前十的工作流项目

文章开始前，我们先做个小调查：在日常工作中，你会使用自动化工作流工具吗？🙋 事实上，工作流工具已经变成了提升效率的关键。其实在此之前我们已经写过一篇博客，跟大家分享五个好用的工作流工具。…...

编程日记 2025/5/14 21:15:13

uni-app中的样式尺寸单位，px，rpx，vh，vw

uni-app 支持less、sass、scss、stylus等预处理器。尺寸单位 uni-app 支持的通用 css 单位包括 px、rpx px 即屏幕像素rpx 即响应式 px，一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准，**750rpx 恰好为屏幕宽度。**屏幕变宽，r…...

编程日记 2025/5/14 4:18:22

跳表（Skip List）

跳表（Skip List） 跳表是一种用于快速查找、插入和删除的概率型数据结构，通常用于替代平衡二叉搜索树（如 AVL 树或红黑树）。跳表通过在有序链表的基础上增加多层索引，使得查找操作的平均时间复杂度降低&…...

编程日记 2025/5/16 21:23:01

103.【C语言】数据结构之建堆的时间复杂度分析

1.向下调整的时间复杂度推导设树高为h 发现如下规律按最坏的情况考虑(即调整次数最多) 第1层,有个节点,最多向上调整h-1次第2层,有个节点,最多向上调整h-2次第3层,有个节点,最多向上调整h-3次第4层,有个节点,最多向上调整h-4次 ... 第h-1层,有个节点,最多向上调整1次第…...

编程日记 2025/5/16 22:04:39

数字信号处理实验报告四：IIR数字滤波器设计及软件实现

1．实验目的（1）熟悉用双线性变换法设计IIR数字滤波器的原理与方法；（2）学会调用MATLAB信号处理工具箱中滤波器设计函数（或滤波器设计分析工具fdatool）设计各种IIR数字滤波器，学会根据滤波需求确定滤波器指标参数。（3）掌握IIR数字滤波器的MATLAB实现方法。（3）…...

编程日记 2025/5/18 7:37:13

Flutter：encrypt插件 AES加密处理

1、pubspec.yaml导入插件 cupertino_icons: ^1.0.8 # 密码加密 encrypt: 5.0.3encrypt封装 import package:encrypt/encrypt.dart; /// 加密类 class EncryptUtil {static final EncryptUtil _instance EncryptUtil._internal();factory EncryptUtil() > _instance;Encrypt…...

编程日记 2025/5/15 3:37:29