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

简单实现Ajax基础应用

article 2025/8/29 15:28:25

Ajax不是一种技术，而是一个编程概念。HTML 和 CSS 可以组合使用来标记和设置信息样式。JavaScript 可以修改网页以动态显示，并允许用户与新信息进行交互。内置的 XMLHttpRequest 对象用于在网页上执行 Ajax，允许网站将内容加载到屏幕上而无需刷新页面。Ajax不是一种新技术，也不是一种新语言。相反，它是以新方式使用的现有技术。

在创造“Ajax”一词的文章中，杰西·詹姆斯·加勒特解释说，以下技术被整合在一起：

用于演示的HTML（或 XHTML）和 CSS
文档对象模型（DOM），用于动态显示数据并与之交互
用于数据交换的 JSON 或 XML，以及用于 XML 操作的 XSLT
用于异步通信的XMLHttpRequest对象
将这些技术结合在一起的JavaScript

下面为你介绍 AJAX 的基础应用，我会通过原生 JavaScript 和 Fetch API 两种方式来实现一个简单的示例。

1. 原生 XMLHttpRequest 方式

步骤解析：

创建 XMLHttpRequest 对象。
打开与服务器的连接。
监听请求状态的变化。
发送请求。
处理响应数据。

示例代码：

// 创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();// 配置请求（以GET请求为例）
xhr.open('GET', 'https://api.example.com/data', true);// 监听状态变化
xhr.onreadystatechange = function() {if (xhr.readyState === 4) { // 请求已完成if (xhr.status === 200) { // 请求成功console.log('响应数据:', xhr.responseText);} else {console.error('请求失败，状态码:', xhr.status);}}
};// 发送请求
xhr.send();

2. Fetch API 方式（现代方法）

步骤解析：

使用 fetch () 函数发起请求。
处理 Promise 对象。
将响应数据解析为 JSON 格式。
处理解析后的数据。

示例代码：

// 发起GET请求
fetch('https://api.example.com/data').then(response => {if (!response.ok) {throw new Error('HTTP错误，状态码：' + response.status);}return response.json(); // 解析JSON数据}).then(data => {console.log('响应数据:', data);}).catch(error => {console.error('请求出错:', error);});

3. 实际应用示例

下面是一个结合 HTML 和 Fetch API 的完整示例，它能够从 GitHub API 获取用户信息并展示出来：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>AJAX示例</title>
</head>
<body><button id="fetchData">获取GitHub用户信息</button><div id="result"></div><script>document.getElementById('fetchData').addEventListener('click', function() {// 使用Fetch API发送请求fetch('https://api.github.com/users/octocat').then(response => response.json()).then(data => {// 处理返回的数据const resultDiv = document.getElementById('result');resultDiv.innerHTML = `<h3>${data.login}</h3><img src="${data.avatar_url}" alt="Avatar" width="100"><p>关注者: ${data.followers}</p><p>仓库数量: ${data.public_repos}</p>`;}).catch(error => {console.error('请求出错:', error);document.getElementById('result').innerHTML = '获取数据失败';});});</script>
</body>
</html>

4. 关键要点提醒

跨域请求：由于浏览器的同源策略限制，AJAX 通常只能向同源的服务器发送请求。不过，可以通过 CORS（跨域资源共享）或者 JSONP 来解决跨域问题。
错误处理：在实际应用中，必须对网络错误、超时等异常情况进行处理。
请求方法：支持 GET、POST、PUT、DELETE 等多种 HTTP 请求方法。
数据格式：常见的数据格式有 JSON、XML、纯文本等。

通过上述示例，你可以实现简单的 AJAX 请求。在实际的项目开发中，建议使用 axios 等第三方库，它能提供更强大的功能和更友好的 API。

简单实现Ajax基础应用

Ajax不是一种技术，而是一个编程概念。HTML 和 CSS 可以组合使用来标记和设置信息样式。JavaScript 可以修改网页以动态显示，并允许用户与新信息进行交互。内置的 XMLHttpRequest 对象用于在网页上执行 Ajax，允许网站将内容加载到屏幕上而无需…...

编程日记 2025/8/19 17:08:55

关于 java：3. Java 常用类库与数据结构

一、String 1.1 String 是什么？ public final class String implements java.io.Serializable, Comparable<String>, CharSequence特点： 是不可变对象（immutable） 是 final 类，不能被继承内部使用字符数组…...

编程日记 2025/7/5 18:07:51

数据挖掘顶刊《IEEE Transactions on Knowledge and Data Engineering》2025年5月研究热点都有些什么？

本推文对2025年5月出版的数据挖掘领域国际顶级期刊《IEEE Transactions on Knowledge and Data Engineering》进行了分析，对收录的62篇论文的关键词与研究主题进行了汇总，并对其中的研究热点进行了深入分析，希望能为相关领域的研究人员提供有…...

编程日记 2025/8/27 6:49:52

LabVIEW双光子显微镜开发

基于LabVIEW 开发高性能双光子显微镜系统，聚焦于生物样本深层成像与纳米材料三维表征。实现了超快激光控制、多维数据采集与实时图像重建。系统采用飞秒激光光源与高精度振镜扫描模块，结合 LabVIEW 的 FPGA 实时控制能力，可对活体组织、荧光纳…...

编程日记 2025/8/19 17:09:06

WordPress 6.5版本带来的新功能

WordPress 6.5正式上线了！WordPress团队再一次为我们带来了许多新的改进。在全球开发者的共同努力下，WordPress推出了许多新的功能，本文将对其进行详细总结。 Hostease的虚拟主机现已支持一键安装最新版本的WordPress。对于想要体验WordPres…...

编程日记 2025/8/19 17:09:07

通过Texture2D的EncodeToPNG方法将纹理转为图片形式 material.GetTexture方法通过属性名获取纹理贴图 material.SetTexture方法通过属性名设置纹理贴图属性名可在shader代码中查看 using UnityEngine; using System.IO;public class TextureSaver : MonoBehaviour {public…...

编程日记 2025/7/5 20:09:04

Linux应用开发之网络套接字编程

套接字（Socket）是计算机网络数据通信的基本概念和编程接口，允许不同主机上的进程（运行中的程序）通过网络进行数据交换。它为应用层软件提供了发送和接收数据的能力，使得开发者可以在不用深入了解底层网络细…...

编程日记 2025/8/8 23:57:18

实现RabbitMQ多节点集群搭建

目录引言一、环境准备二、利用虚拟机搭建三、镜像集群配置四、HAProxy实现负载均衡(主用虚拟机操作) 五、测试RabbitMQ集群搭建情况引言在现代分布式系统中，消息队列（Message Queue）扮演着至关重要的角色,而 RabbitMQ 作为…...

编程日记 2025/8/21 14:50:47

GLIDE论文阅读笔记与DDPM（Diffusion model）的原理推导

Abstract 扩散模型（Diffusion model）最近被证明可以生成高质量的合成图像，尤其是当它们与某种引导技术结合使用时，可以在生成结果的多样性与保真度之间进行权衡。本文探讨了在文本条件图像生成任务中使用扩散模型，并比…...

编程日记 2025/8/29 15:10:26

机器学习——放回抽样

为了构建树集成模型，需要一种叫做有放回采样的技术。以4个标记为演示，分别是红色、黄色、绿色和蓝色，用一个黑色的袋子把这四个标记的例子放进去，然后从这个袋子里有放回地抽取四次，抽出一个标记，结果是绿…...

编程日记 2025/8/28 0:01:18

前端内存泄漏：原理、检测与防范实践

一、什么是内存泄漏内存泄漏（Memory Leak）是指程序中已动态分配的堆内存由于某种原因未能被释放或无法被释放，造成系统内存的浪费，导致程序运行速度减慢甚至系统崩溃等严重后果。在前端开发中，虽然现代浏览器具备垃…...

编程日记 2025/7/9 22:42:02

Go的隐式接口机制

正确使用Interface 不要照使用C/Java等OOP语言中接口的方式去使用interface。 Go的Interface的抽象不仅可以用于dynamic-dispatch 在工程上、它最大的作用是：隔离实现和抽象、实现完全的dependency inversion 以及interface segregation(SOLID principle中的I和D)。…...

编程日记 2025/8/19 17:09:10

UE音频中间件wwise插件

虚幻引擎用wwise插件有什么用? 没有这个插件不是也能播放声音吗? 为什么要用他? 在Unreal Engine（UE）中使用 Wwise 插件，不是因为 UE 不能做声音，而是因为 Wwise 更强、更专业，适合复杂的音频需求。 🎧 …...

编程日记 2025/7/6 15:06:51

C++.cstring string

C.cstring string 1. C 中的字符串概述1.1 C 中字符串的两种表示方式C 中的 cstring示例代码 C 中的 string示例代码 1.2 C 中字符串的使用场景使用 cstring 的场景使用 string 的场景示例对比使用 cstring 的示例使用 string 的示例 2. C 中的 cstring2.1 cstring 的定义与基本…...

编程日记 2025/7/22 15:11:46

Spring AOP 和 AspectJ 有什么区别

1. 织入方式 Spring AOP： 运行时织入：Spring AOP 使用动态代理技术（如 JDK 动态代理或 CGLIB 代理）在运行时创建代理对象。依赖 Spring 容器：仅支持 Spring 管理的 Bean。 AspectJ： 编译时织入&#xf…...

编程日记 2025/7/14 6:48:45

报表/报告组件(二)-实例与实现解释

上篇《报表/报告组件(一)-指标/属性组件设计》介绍了组件核心指标/属性设计，本文以实例介绍各个特性的实现和效果，实例是多个报告融合，显示所有的特性。设计指标/属性组件是报告/报表关键部分，上篇已介绍过，本节回顾…...

编程日记 2025/8/26 0:05:52

linux的实时性

Linux 的实时性取决于其内核配置和使用场景。标准 Linux 内核（非实时内核）在设计上更注重吞吐量和公平调度，而非严格的实时性。但通过以下方式可以显著提升其实时性能： 1. 标准 Linux 内核的实时性优点： 适用于大多数…...

编程日记 2025/7/20 13:15:45

Opencv4 c++ 自用笔记 04 图像滤波与边缘检测

图像滤波与边缘检测直接采集到的图像可能带有噪声的干扰，因此去除噪声是图像预处理中十分重要的一步。图像滤波是图像噪声去除的重要方式。图像卷积卷积操作广泛应用于信号处理领域，而图像本质上可以视为一种二维信号数据。卷积过程可以理解为一…...

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

流媒体基础解析：音视频封装格式与传输协议

在视频处理与传输的完整流程中，音视频封装格式和传输协议扮演着至关重要的角色。它们不仅决定了视频文件的存储方式，还影响着视频在网络上的传输效率和播放体验。今天，我们将深入探讨音视频封装格式和传输协议的相关知识。音视频封装格式什…...

编程日记 2025/8/19 17:09:09

一个html实现数据库自定义查询

使用场景应用上线后甲方频繁的找开发查询数据库数据，且没有固定的查询规律，产品经理也没有规划报表需求。实现方案后端开放自定义sql查询，屏蔽所有数据库的高危操作，将常用查询的sql放在一个html中的js中直接查询&#xff0…...

编程日记 2025/8/19 17:09:08

OCC笔记：TopoDS_Edge上是否一定存在Geom_Curve

1. 问题写occt代码时，访问边的几何数据，通常有以下代码，若边不为空，BRep_Tool::Curve函数是否能返回Curve的有效对象指针呢？ //其他略...const TopoDS_Edge& curEdge TopoDS::Edge(edgeExp.Current()); if( cu…...

编程日记 2025/7/7 11:12:14

Python aiohttp 全面指南：异步HTTP客户端/服务器框架

边写代码零食不停口盼盼麦香鸡味块、卡乐比（Calbee）薯条三兄弟独立小包、好时kisses多口味巧克力糖、老金磨方【黑金系列】黑芝麻丸边写代码边贴面膜事业美丽两不误 DR. YS 野森博士【AOUFSE/澳芙雪特证】377专研美白淡斑面膜组合优惠劵别光顾写…...

编程日记 2025/8/10 1:57:03

更新已打包好的 Spring Boot JAR 文件中的 class 文件

# 1. 解压原始 JAR unzip -q original-app.jar -d temp # 2. 替换 class 文件 cp ~/projects/new-classes/*.class temp/BOOT-INF/classes/com/example/ # 3. 保留原始清单 cp temp/META-INF/MANIFEST.MF . # 4. 重新打包 jar -cf0m new-app.jar MANIFEST.MF -C temp/ . # …...

编程日记 2025/7/7 2:28:52

容器（如 Docker）中，通常不建议运行多个进程或要求进程必须运行在前台

在容器（如Docker）中，通常不建议运行多个进程或要求进程必须运行在前台，这与容器的设计理念、资源管理和生命周期管理机制密切相关。以下是具体原因和深入解析： 一、容器的设计理念：单一职责原则容器的核…...

编程日记 2025/8/14 2:50:01

conda管理环境指令综合（随时更新）

创建环境和删除环境 #创建环境 conda create --name envname#删除环境 conda env remove --name envname克隆环境 # 查看现有环境列表 conda env list# 执行克隆操作 conda create --name 新环境名称 --clone 原环境名称# 示例：将名为"tf2"的环境克隆…...

编程日记 2025/7/6 23:03:55