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

【ajax基础】

news 来源：原创 2025/7/27 21:28:36

提示：文章为学习过程中的记录实践笔记。有问题欢迎指正。

文章目录

前言
一、实现步骤
二、完整示例
三、封装
总结

前言

AJAX 不是编程语言，是一种从网页访问web服务器的技术。

可以实现不刷新页面更新网页
在页面加载后从服务器请求/获取数据
在后台向服务器发送数据

AJAX 等价于 Asynchronous JavaScript And XML.

一、实现步骤

创建 XMR XMLHttpRequest()

 const xhr = new XMLHttpRequest();

配置请求 open(method,url,async,user,psw)

参数说明: 请求方式，请求地址，是否异步，可选的用户名，可选的密码

请求方式 method	是否异步
GET,POST,PUT,DELETE 等	true(异步) false(同步)

xhr.open('GET', 'http://localhost:5500/javascript/ajax/data.json')

发送请求 send()

xhr.send();

接收请求 - 定义接收到（加载）请求时调用的函数

onload 当请求完成时会被调用

xhr.onload = function(){
//处理返回值
}

onreadystatechange 当readyState属性发生变化时调用

二、完整示例

使用 onload 接收数据

在这里插入图片描述
使用 onreadystatechange

readyState 不同状态
0：请求未初始化
1：服务器连接已建立
2：请求已收到
3：正在处理请求
4：请求已完成且响应已就绪

xhr.onreadystatechange = function () {// console.log(xhr.readyState, xhr.status)// 接收状态码 4:解析完成  http状态码 200~299 都是正确的  常见 200if (xhr.readyState === 4 && xhr.status === 200) {console.log('数据解析完成', xhr.responseText)} else if (xhr.readyState === 4 && xhr.status === 404) {console.log('请求地址不存在')}
}

三、封装

//ajax.jsfunction ajax(option) {const options = {method: 'GET',url: '',data: '',success: function () { },//成功回调函数error: function () { },...option,}const xhr = new XMLHttpRequest();const method = options.method.toUpperCase();const url = options.url;let data = null;if (option.data) {data = Object.keys(options.data).map(key => key = options.data[key]).join('&');}if (method === 'GET' && data) {url += '?' + data;}xhr.open(method, url);if (method === 'POST') {xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');}xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status < 300) {const response = xhr.getResponseHeader('Content-Type').includes('json') ? JSON.parse(xhr.responseText) : xhr.responseText;options.success && options.success(response);} else {options.error && options.error(xhr.status);}}};xhr.send(method === 'POST' ? data : null);
}
export default ajax;

调用封装

在这里插入图片描述

总结

通俗的说，就像是拨打电话，

首先要拿起电话new XMLHttpRequest()
打开通讯录拨号/查看通讯录 open(method,url)\
点击拨打 send()
等待接通 onreadystatechange || 接通后 onload

【ajax基础】

提示：文章为学习过程中的记录实践笔记。有问题欢迎指正。文章目录前言一、实现步骤二、完整示例三、封装总结前言 AJAX 不是编程语言，是一种从网页访问web服务器的技术。可以实现不刷新页面更新网页在页面加载后从服务器请求/获取数据在后台向服…...

编程日记 2025/7/27 21:28:36

Nodejs核心机制

文章目录前言前言结合 Node.js 的核心机制进行说明： 解释事件循环的各个阶段。答案 Node.js 事件循环分为 6 个阶段，按顺序执行： Timers：执行 setTimeout 和 setInterval 的回调。 Pending I/O Callbacks：处理系…...

编程日记 2025/7/25 1:28:10

Kubernetes 集群部署应用

部署 Nginx 应用命令行的方式 1. 创建 deployment 控制器的 pod # --imagenginx：这个会从 docker.io 中拉取，这个网站拉不下来 # kubectl create deployment mynginx --imagenginx# 使用国内镜像源拉取 kubectl create deployment mynginx --imaged…...

编程日记 2025/7/24 10:42:50

【Linux篇】高并发编程终极指南：线程池优化、单例模式陷阱与死锁避坑实战

深入理解线程池设计与应用：高效并发编程的秘密一. 线程池1.1 什么是线程池1.2 线程池的优点1.3 线程池的应用场景二. 线程池设计三. 单例模式3.1 什么是单例模式3.2 单例模式特点3.3 实现单例模式方法3.3.1 饿汉实现⽅式3.3.2 懒汉实现⽅式四. 线程安全和重入问题…...

编程日记 2025/7/23 1:24:00

学习和测试WebApi项目限制客户端ip访问接口（基于中间件）

WebApi项目需要限制仅允许有限的客户端访问接口，百度相关内容，网上很多介绍WebApi接口IP限流的文章，稍微调整就能用于限制IP访问，微软官网中也有文章介绍客户端 IP 安全列表（参考文献1），可以通过…...

编程日记 2025/7/24 14:26:57

闲鱼智能客服机器人-实现闲鱼平台7×24小时自动化值守

专为闲鱼平台打造的AI值守解决方案，实现闲鱼平台724小时自动化值守，支持多专家协同决策、智能议价和上下文感知对话。 🌟 核心特性智能对话引擎功能模块技术实现关键特性上下文感知会话历史存储轻量级对话记忆管理，完整对话历…...

编程日记 2025/7/25 14:38:31

安装包下载： https://ranger.apache.org/download.html 编译环境： Linux centos7jdk 1.8maven 3.9.6gitpython 3 git 安装 yum -y install gitpython3安装 yum install epel-release -y yum install python3 python3-devel -y批量安装开发工具套件 …...

编程日记 2025/7/23 4:49:06

实战演练：用 AWS Lambda 和 API Gateway 构建你的第一个 Serverless API

实战演练：用 AWS Lambda 和 API Gateway 构建你的第一个 Serverless API 理论千遍，不如动手一遍！在前面几篇文章中，我们了解了 Serverless 的概念、FaaS 的核心原理以及 BaaS 的重要作用。现在，是时候把这些知识运用起来，亲手构建一个简单但完整的 Serverless 应用了。 …...

编程日记 2025/7/24 9:33:44

鱼眼相机生成-BEV鸟瞰图-入门教程

目录原理介绍 1. ‌IPM与BEV转换的核心原理‌ 2. ‌尺度信息的来源‌ 3. ‌尺度信息的准确性限制‌ 4. ‌实际应用中的处理方法‌ 代码实现： 360 BEV环视拼接算法一、核心算法流程‌ 三、实际应用挑战与优化‌ 四、开源实现参考原理介绍 1. ‌IPM与BEV转换的核心…...

编程日记 2025/7/27 1:22:44

设计模式简述（十八）享元模式

享元模式描述基本组件使用描述当内存中存在大量类似的对象时，可以考虑使用享元模式减少整体内存占用。可以将相同的部分和不同的部分进行拆分，以达到多个对象共享相同部分内存的目的。基本组件通常享元对象通过共享的属性映射一个享元对象。公…...

编程日记 2025/7/25 21:40:58

Google语法整理

以下是从整理出的 Google 语法： site：指定域名，如 “apache site:bbs.xuegod.cn”，可查询网站的收录情况。 inurl：限定在 url 中搜索，如 “inurl:qq.txt”，可搜索 url 中包含特定内容的页面&a…...

编程日记 2025/7/27 17:54:41

【每日一题 | 2025年5.5 ~ 5.11】搜索相关题

个人主页：Guiat 归属专栏：每日一题文章目录 1. 【5.5】P3717 [AHOI2017初中组] cover2. 【5.6】P1897 电梯里的尴尬3. 【5.7】P2689 东南西北4. 【5.8】P1145 约瑟夫5. 【5.9】P1088 [NOIP 2004 普及组] 火星人6. 【5.10】P1164 小A点菜7. 【5.11】P101…...

编程日记 2025/7/24 13:40:41

【MySQL】页结构详解：页的大小、分类、头尾信息、数据行、查询、记录及数据页的完整结构

📢博客主页：https://blog.csdn.net/2301_779549673 📢博客仓库：https://gitee.com/JohnKingW/linux_test/tree/master/lesson 📢欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正！ &…...

编程日记 2025/7/25 4:24:27

C++ stl中的priority_queue的相关函数用法

文章目录 priority_queuepriority_queue定义方式priority_queue相关函数 priority_queue priority_queue 称为优先级队列，默认使用vector作为底层存储数据的容器，因此priority_queue就是堆，所有需要用到堆的位置，都可以考虑使用…...

编程日记 2025/7/26 8:55:39

软件架构师知识点总结

一、综合知识软件架构师综合知识总结-CSDN博客二、案例软件架构师案例知识点总结-CSDN博客三、论文 1、题目类型：八大架构；系统开发（开发方法/模型、需求分析、测试等）；系统可靠性、安全性、容错技术等&#…...

编程日记 2025/7/23 21:23:05

MySQL数据库常见面试题之三大范式

写在前面此文章大部分不会引用最原始的概念，采用说人话的方式。面试题：三大范式是什么？目的是什么？必须遵循吗？ 假设有一张表（学号，姓名，课程，老师） 是…...

编程日记 2025/7/24 19:14:37

Scrapy 核心组件解析：Request Response 的深度应用与实战

Scrapy 是 Python 生态中最强大的爬虫框架之一，其核心组件 Request 和 Response 承担着数据抓取与处理的关键任务。本文深入解析 Scrapy 2.13.0 中 Request 和 Response 的高级用法，涵盖参数配置、回调函数、错误处理、子类扩展等，并结合综合…...

编程日记 2025/7/25 11:38:39

mybatis执行sql过程

一、配置加载阶段 1. 读取全局配置（mybatis-config.xml） 入口类：SqlSessionFactoryBuilder.build()关键组件： XMLConfigBuilder：解析全局配置文件。Configuration：存储所有配…...

编程日记 2025/7/24 16:43:05

OceanBase 4.3版本向量数据库部署

OceanBase 4.3版本向量数据库部署安装包准备最低资源配置重要的准备事项服务器配置操作系统内核参数BIOS设置磁盘挂载网卡设置部署OAT工具初始化OBServer服务器使用oatcli部署OB集群安装OceanBase软件初始化OceanBase集群启用向量检索功能 OceanBase最新的V4.3版本开始支持向…...

编程日记 2025/7/26 1:38:33

LeetCode 941. 有效的山脉数组 java题解

https://leetcode.cn/problems/valid-mountain-array/description/ 双指针 class Solution {public boolean validMountainArray(int[] arr) {int lenarr.length;if(len<3) return false;int left0,rightlen-1;while(left1<len&&arr[left]<arr[left1]){left…...

编程日记 2025/7/25 6:53:47

基于Java和高德开放平台的WebAPI集成实践-以搜索POI2.0为例

目录前言一、高德搜索API简介 1、高德开放平台 2、搜索功能介绍 3、部分API介绍二、Uniapi集成高德API 1、API集成流程 2、访问接口的定义 3、业务调用集成三、常见问题与优化四、总结前言在当今数字化时代，地理信息系统（GIS&#xff…...

编程日记 2025/7/24 23:52:33

Docker拉取ubuntu22.04镜像使用ROS2 humble及仿真工具可视化进行导航

创建Ubuntu22.04 容器 docker pull ubuntu:22.04 #下载22.04镜像 docker images #查看已下载镜像 #根据镜像创建容器 sudo docker run -it -v /home/lab118/BD_ICL/tools_BD/cailib_data:/calib_data -v /tmp/.X11-unix:/tmp/.X11-unix -e DISPLAY:0 --nethost -e GDK_SCAL…...

编程日记 2025/7/24 16:41:52

PXE安装Ubuntu系统

文章目录 1. 服务器挂载Ubuntu镜像2. 修改dhcp配置文件3. 修改tftp配置文件4.复制网络驱动文件和其他配置文件5. http目录下配置文件6. 踩坑记录6.1 Failed to load ldlinux.c326.2 no space left on device6.3 为啥用pxe安装系统时，客户端需要较大的内存&#xff1…...

编程日记 2025/7/25 15:36:51

外网访问内网海康威视监控视频的方案：WebRTC + Coturn 搭建

外网访问内网海康威视监控视频的方案：WebRTC Coturn 需求背景在仓库中有海康威视的监控摄像头，内网中是可以直接访问到监控摄像的画面，由于项目的需求，需要在外网中也能看到监控画面。实现这个功能的意义在于远程操控设备的…...

编程日记 2025/7/27 8:56:31

缓存局部性保留

在操作系统中，线程切换相比进程切换更轻量级的关键原因之一是缓存（Cache）的有效性，尤其是对 CPU 缓存（如 L1/L2/L3）和 TLB（Translation Lookaside Buffer）的影响。以下从缓存角度详…...

编程日记 2025/7/23 11:00:46

MyBatis源码解读5（3.1、缓存简介）

3.1、简介我们需要记住一句话，程序与数据库之间的交互是性能瓶颈的关键，所以我们在做优化的时候，数据库的优化要做，但是优先级是最低的，比它优先级高的是方面是程序与数据库之间的交互，先从宏观上解决…...

编程日记 2025/7/20 23:32:02

【MySQL】行结构详解：InnoDb支持格式、如何存储、头信息区域、Null列表、变长字段以及与其他格式的对比

编程日记 2025/7/24 1:19:35

Docker 部署Nexus仓库搭建Maven私服仓库公司内部仓库

介绍 Nexus 是广泛使用的仓库管理工具，常用于管理 Java 构件（如 JAR、WAR、EAR 文件）。它可以作为一个本地的 Maven 仓库，用来存储和管理项目的依赖包和构建产物。支持多种仓库类型，能够帮助开发团队更高效地管理构件…...

编程日记 2025/7/26 23:43:11

PostgreSQL 的 pg_column_size 函数

PostgreSQL 的 pg_column_size 函数 pg_column_size 是 PostgreSQL 提供的一个系统函数，用于返回特定列或值在数据库内部存储时所占用的字节数。这个函数对于数据库优化、存储空间分析和性能调优非常有用。函数语法 pg_column_size(anyelement)参数说明 anyele…...

编程日记 2025/7/24 1:09:16

【前端】【HTML】【总复习】一万六千字详解HTML 知识体系

🌐 HTML 知识体系一、HTML 基础入门 1. HTML 简介与作用 HTML（HyperText Markup Language，超文本标记语言）是构建网页的基础语言。它的核心作用是：定义网页内容的结构（标题、段落、图片、表格等）提供语义化标签，帮助搜索引擎与辅助设备理解页面内容配合 CSS 实现…...

编程日记 2025/7/25 7:12:48

支持向量机与逻辑回归的区别及 SVM 在图像分类中的应用

支持向量机与逻辑回归的区别及 SVM 在图像分类中的应用在机器学习的多元算法领域中，支持向量机（SVM）和逻辑回归（LR）作为两种经典的监督学习算法，被广泛应用于各类分类任务。尽管它们有着相似的目标&#…...

编程日记 2025/7/23 14:27:23

MySQL基础面试题集锦

MySQL基础面试题集锦一、SQL基础语法 1. 数据库和表操作 -- 创建数据库 CREATE DATABASE test_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;-- 创建表 CREATE TABLE users (id INT AUTO_INCREMENT PRIMARY KEY,username VARCHAR(50) NOT NULL UNIQUE,email VARCH…...

编程日记 2025/7/25 23:14:23

【网络分析工具】网络工具wireshark、TCPdump、iperf使用详解

这里写目录标题 1. wireshark1.1. 过滤包1.2. 常见分析 2. tcpdump3. iperf 1. wireshark **ip.dst eq 10.0.0.21** 是用于网络流量分析工具（例如 Wireshark 或 tcpdump）的过滤器表达式。它的作用是筛选出所有目标IP地址为 10.0.0.21 的数据包 IP.add…...

编程日记 2025/7/19 22:28:51

【漫话机器学习系列】253.超平面（Hyperplane）

超平面（Hyperplane）详解：从二维到高维空间在机器学习、深度学习、支持向量机（SVM）等领域中，经常会遇到一个重要的数学概念——超平面（Hyperplane）。但超平面究竟是什么&#xff1f…...

编程日记 2025/7/27 20:02:12

#微调重排序模型：Reranking从入门到实践

🧠 向所有学习者致敬！ “学习不是装满一桶水，而是点燃一把火。” —— 叶芝我的博客主页： https://lizheng.blog.csdn.net 🌐 欢迎点击加入AI人工智能社区！ 🚀 让我们一起努力，共创…...

编程日记 2025/7/25 16:02:01

vector 常见用法及模拟

文章目录 1. vector的介绍与使用1.1 vector的构造1.2 vector iterator 的使用1.3 有关大小和容量的操作1.4 vector 增删查改1.5 vector 迭代器失效问题（重点）1.6 vector 中二维数组的使用 2. vector 的模拟实现2.1 拷贝构造和赋值重载的现代写法2.2 memc…...

编程日记 2025/7/24 19:01:17

可变参数模板

引入：为什么会有可变参数模板？ 在C98/03中，也就是我们之前学的类模版和函数模版中只能含固定数量的模版参数，而C11中新增的可变参数模板能够不固定数量的模版参数！ 一：可变参数模板的格式 // Args是一个模板…...

编程日记 2025/7/22 2:10:30

缓存（5）：常见缓存数据淘汰算法/缓存清空策略

主要的三种缓存数据淘汰算法 FIFO(first in first out)：先进先出策略，最先进入缓存的数据在缓存空间不够的情况下（超出最大元素限制）会被优先被清除掉，以腾出新的空间接受新的数据。策略算法主要比较缓存元素的创建时…...

编程日记 2025/7/23 1:11:49

深入了解linux系统—— 自定义shell

shell的原理我们知道，我们程序启动时创建的进程，它的父进程都是bash也就是shell命令行解释器； 那bash都做了哪些工作呢？ 根据已有的知识，我们可以简单理解为： 输出命令行提示符获取并解析我们输入的指令…...

编程日记 2025/7/17 19:08:36

【通讯录教程】如何将号码快速导入手机通讯录，支持苹果和安卓手机，一次性导入大量号码进入手机通讯录，基于WPF的解决方案

以下是一个基于WPF的解决方案，用于将大量号码快速导入苹果和安卓手机通讯录： 项目应用场景企业员工通讯录批量导入：HR需要将数百名员工的联系方式快速导入公司手机客户关系管理：销售人员需要将大量客户信息导入…...

编程日记 2025/7/24 22:21:00

Git初始化相关配置

Git配置在Git安装完成后，windows操作系统上会多出一个Git Bash的软件，如果是linux或者是macOS，那么直接打开终端，在终端中敲击命令即可 # 检查git版本 git -v # 或 git --version在使用git时，需要配置一下用户名和邮…...

编程日记 2025/7/22 13:41:01

n8n中订阅MQTT数据

第一步：创建mqtt登录证证第二步：创建mqtt trigger组件，并配置凭证和订阅主题第三步：创建Code节点，编写格式转换代码第四步：创建转发MQTT节点，并配置MQTT凭证第五步：启用工作流整…...

编程日记 2025/7/23 17:46:26

Docker、ECS 与 K8s 网段冲突：解决跨服务通信中的路由问题

🧩 问题背景在阿里云的项目中，在项目初期搭建过程中遇到了一个让人头疼的网络冲突问题：同一个 VPC 中的 Docker 容器和 Kubernetes 集群由于使用相同的网段，导致k8s pod连接ECS容器之间的网络连接失败。背景环境： …...

编程日记 2025/7/23 4:49:07

《智能网联汽车自动驾驶系统设计运行条件》 GB/T 45312-2025——解读

目录 1. 标准概述 2. 核心概念 3. 标准核心内容 3.1 一般要求 3.2 ODC基础元素层级 3.3 ODC元素具体要求 3.4 附录A（ODC示例） 4. 技术挑战与实施建议 5. 标准意义原文链接：国家标准|GB/T 45312-2025 （发布：2…...

编程日记 2025/7/24 8:47:46

AARRR用户增长模型（海盗指标）详解

目录一、模型起源与概述二、五大阶段详解1. 获取（Acquisition）1.1 定义1.2 关键指标 2. 激活（Activation）2.1 定义2.2 关键指标 3. 留存（Retention）3.1 定义3.2 关键指标3.3 提升留存手段案例3.4 互联网留…...

编程日记 2025/7/25 21:11:22

CSS专题之自定义属性

前言石匠敲击石头的第 12 次 CSS 自定义属性是现代 CSS 的一个强大特性，可以说是前端开发需知、必会的知识点，本篇文章就来好好梳理一下，如果哪里写的有问题欢迎指出。什么是 CSS 自定义属性 CSS 自定义属性英文全称是 CSS Custom Proper…...

编程日记 2025/7/22 14:41:38

JVM——Java字节码基础

引入 Java字节码（Java Bytecode）是Java技术体系的核心枢纽，所有Java源码经过编译器处理后，最终都会转化为.class文件中的字节码指令。这些指令不依赖于具体的硬件架构和操作系统，而是由Java虚拟机（JVM&…...

编程日记 2025/7/25 11:38:40

【React中useRef钩子详解】

一、useRef的核心特性 useRef是React提供的Hook，用于在函数组件中创建可变的持久化引用，具有以下核心特性：持久化存储返回的ref对象在组件整个生命周期内保持不变，即使组件重新渲染，current属性的值也不会丢失。无触发渲染修改ref.current的值不会导致组件重新渲染，适…...

编程日记 2025/7/23 12:55:59