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

学习AJAX请求（初步）24.10.21-10.23

news 2026/2/8 6:47:30

1.AJAX概念

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

虽然所有的AJAX请求都是HTTP请求，但并非所有的HTTP请求都是AJAX请求。AJAX是一种利用HTTP协议实现特定功能（异步数据交换）的技术。

2.AJAX请求小案例（GET）

（1）根据浏览器类型创建XMLHttpRequest对象（需要考虑浏览器的兼容性）

（2）设置事件处理程序onreadystatechange

判断请求是否成功，若成功则执行响应要求

<script>function loadMessage(){let xmlhttp;if(window.XMLHttpRequest){xmlhttp = new XMLHttpRequest();}else{// 兼容IE6、IE5xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.onreadystatechange=()=>{let div=document.getElementById("loading")if(xmlhttp.readyState==1) {div.innerHTML="数据加载中...";}if(xmlhttp.readyState==4 && xmlhttp.status==200){div.innerHTML="加载完毕"const data = JSON.parse(xmlhttp.responseText);const ul=document.getElementById("myList");data.forEach(element => {const li=document.createElement("li");li.innerHTML=`name:${element.name},price:${element.price},type:${element.type}`;ul.appendChild(li);});}}xmlhttp.open("GET","https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",true)xmlhttp.send();this.disabled=true;//点击一次后按钮被禁用}</script><button type="button" onclick="loadMessage.apply(this)">获取数据</button>
<ul id="myList"></ul>

3.AJAX请求的服务器响应

XMLHttpRequest 对象有两种属性 可获取服务器的响应数据，需要根据数据的格式选择：

1.responseText 属性

服务器返回的JSON格式的数据(json格式的数据更通用，不受编程语言限制），可以使用 JSON.parse() 方法来解析它。

2.responseXML 属性

返回的数据是已经解析好的 XML Document 对象，可以直接使用 DOM API 来访问和操作这个 XML 文档，例如获取元素、属性、文本内容等。

4.onreadystatechange 事件处理器

当请求被发送到服务器时，readyState会改变 ，进而触发 onreadystatechange 事件处理器，调用函数。

以下是XMLHttpRequest 对象的三个重要属性。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

注意：

一旦设置了onreadystatechange 事件处理器， onreadystatechange 事件会被触发 4 次（0 - 4）, 分别是： 0-1、1-2、2-3、3-4，对应着 readyState 的每个变化。

5.用回调函数封装请求

当有多个AJAX请求时，可使用回调函数封装请求。

  let xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest){// IE7+, Firefox, Chrome, Opera, Safari 代码xmlhttp=new XMLHttpRequest();}
else{// IE6, IE5 代码xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{loadXMLDoc("https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",function(){if (xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("myDiv").innerHTML=xmlhttp.responseText;}});
}

6.AJAX与数据库进行实时通信

AJAX 数据库 | 菜鸟教程

7.AJAX获取XML文件案例

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table,th,td {border : 1px solid black;border-collapse: collapse;/*合并边框*/}th,td {padding: 5px;}</style>
</head>
<body><button type="button" onclick="loadXMLDoc()">获取我收藏的 CD</button><br><br><table id="demo"></table><script>function loadXMLDoc() {var xhttp = new XMLHttpRequest();xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {myFunction(this);}};xhttp.open("GET", "https://www.runoob.com/try/demo_source/cd_catalog.xml", true);xhttp.send();}function myFunction(xml) {var i;var xmlDoc = xml.responseXML;var table="<tr><th>Artist</th><th>Title</th><th>Price</th></tr>";var x = xmlDoc.getElementsByTagName("CD");//获取全部标签名为CD的元素for (i = 0; i <x.length; i++) {table += "<tr><td>" +x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +"</td><td>" +x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +"</td><td>"+x[i].getElementsByTagName("PRICE")[0].childNodes[0].nodeValue +"</td></tr>" ;}document.getElementById("demo").innerHTML = table;}</script></body>

相关文章：

学习AJAX请求（初步）24.10.21-10.23

1.AJAX概念 AJAX Asynchronous JavaScript and XML&#xff08;异步的 JavaScript 和 XML&#xff09;。 AJAX 最大的优点是在不重新加载整个页面的情况下&#xff0c;可以与服务器交换数据并更新部分网页内容。 虽然所有的AJAX请求都是HTTP请求&#xff0c;但并非所有的HT…...

编程日记 2024/10/24 15:43:45

初识算法——二分查找

1.概念 二分查找算法也称折半查找&#xff0c;是一种非常高效的工作于有序数组的查找算法。 需求&#xff1a;在有序数组 A A A 内&#xff0c;查找值 t a r g e t target target 如果找到返回索引如果找不到返回 − 1 -1 −1 前提给定一个内含 n n n 个元素的有序数组…...

编程日记 2024/10/24 15:41:42

深入剖析 Java Spring 中的 @Autowired、@Resource、@Qualifier、@Inject 注解：使用详解与注意事项

文章目录 Autowired&#xff1a;Spring 最常用的注解1. 作用与简介2. 使用示例3. 注意事项 Resource&#xff1a;按名称注入的利器1. 作用与简介2. 使用示例3. 注意事项 Qualifier&#xff1a;解决多 bean 注入问题1. 作用与简介2. 使用示例3. 注意事项 Inject&#xff1a;标准…...

编程日记 2024/10/24 15:39:40

ThingsBoard规则链节点：Delete Attributes节点详解

引言 删除属性节点简介 用法 含义 应用场景 实际项目运用示例 智能家居安全系统 物流跟踪解决方案 工业自动化生产线 结论 引言 ThingsBoard是一个开源的物联网平台&#xff0c;它提供了设备管理、数据收集与处理以及实时监控等功能。其中&#xff0c;规则引擎是其核心…...

编程日记 2024/10/24 15:38:38

关于作为面试官以及如何准备面试的一些心得

关于作为面试官以及如何准备面试的一些心得 一、面试官&#xff08;我站在前端角度来说&#xff09; 当作为这样身份的时候&#xff0c;我想第一步应该是自己梳理一些从简到难、从点到面的问题 CSS - JS - 框架 - 项目 从这四个角度出发&#xff0c;一步一步的引导面试者的思…...

编程日记 2024/10/24 15:36:36

Bean对象 和 普通对象 的区别

Bean对象 和 普通对象 的区别 前言Bean的概念与new创建的对象的区别Spring Bean的优势两者使用的关键点总结 前言 在Spring框架中&#xff0c;我们通常将Spring容器管理的对象称为“Bean”或“Bean对象”。而通过new关键字创建的对象则被称为“对象”或“普通对象”。 Bean的…...

编程日记 2024/10/24 15:35:35

lego-loam featureAssociation 源码注释（二）

咱们接着往下看initializationValue();&#xff01;&#xff01;&#xff01; FeatureAssociation():nh("~"){subLaserCloud nh.subscribe<sensor_msgs::PointCloud2>("/segmented_cloud", 1, &FeatureAssociation::laserCloudHandler, this);s…...

编程日记 2024/10/24 15:34:33

Claude 3.5 的六大应用场景

Claude 3.5 的六大应用场景 随着人工智能技术的飞速发展&#xff0c;Claude 3.5 已经成为一款强大的语言模型工具&#xff0c;在多个领域展现了其卓越的应用潜力。本文将通过CSDN格式&#xff0c;介绍Claude 3.5在六大主要领域的实际应用场景&#xff0c;帮助开发者和企业更好…...

编程日记 2024/10/24 15:32:31

进程线程知识总结

1. 程序什么时候应该使用线程&#xff0c;什么时候单线程效率高 使用线程&#xff1a;在I/O密集型或高并发的场景&#xff0c;例如网络服务、文件读写等。通过多线程可以同时处理多个任务&#xff0c;提高利用率。单线程效率高&#xff1a;在CPU密集型任务中&#xff0c;当任务…...

编程日记 2024/10/24 15:29:27

Rsync数据复制/备份服务应用

文章目录 1. rsync概述1.1 什么是Rsync1.2 rsync的功能1.3 rsync 的功能特性1.4 Rsync 增量复制原理1.5 生产场景架构集群备份方案 2. Rsync工作方式介绍与实践2.1 本地数据传输模式2.1.1 本地数据传输模式语法2.1.2 本地数据传输模式实践 2.2 远程Shell 数据传输模式2.2.1 远程…...

编程日记 2024/10/24 15:27:25

如何为自己的跨境网站添加多国语言翻译功能及推荐起尔网定制与插件开发

如何为自己的跨境网站添加多国语言翻译功能及推荐起尔网定制与插件开发 在全球化的浪潮下&#xff0c;跨境电商成为越来越多企业拓展国际市场的重要途径。然而&#xff0c;语言障碍成为了一个不可忽视的问题。为了更好地服务全球用户&#xff0c;为自己的跨境网站添加多国语言…...

编程日记 2024/10/24 15:26:24

安全见闻（3）——开阔眼界，不做井底之蛙

内容预览 ≧∀≦ゞ 安全见闻三&#xff1a;脚本程序与病毒声明导语脚本语言BAT/PowerShell脚本木马与宏病毒脚本病毒BIOS病毒 结语 安全见闻三&#xff1a;脚本程序与病毒 声明 学习视频来自B站UP主 泷羽sec,如涉及侵权马上删除文章 笔记的只是方便各位师傅学习知识,以下网站只…...

编程日记 2024/10/24 15:25:23

MySQL 的意向锁（Intention Locks）原理详解

1. 背景&#xff1a;为什么需要意向锁&#xff1f; MySQL 中意向锁的主要作用是用于支持行级锁与表级锁的并存&#xff0c;特别是在 InnoDB 存储引擎中。InnoDB 提供了行级锁&#xff0c;而在某些场景下&#xff0c;数据库系统仍需要对整张表加锁&#xff0c;例如 LOCK TABLES …...

编程日记 2024/10/24 15:24:22

31个省份农业科技水平（农业技术创新或农业科技专利数据）2010-2022年

一、测算方式&#xff1a;参考C刊《湖北大学学报(哲学社会科学版)》张金鑫&#xff08;2020&#xff09;老师的做法&#xff0c;采用农业( 农林牧渔业) 三类专利总和来衡量农业技术创新 二、资料范围&#xff1a;31个省份&#xff0c;403个观测值&#xff0c;已经整理成面板数…...

编程日记 2024/10/24 15:23:21

Python代码执行失败问题及解决方案

目录 一、Python代码执行失败的原因 二、常见的Python错误类型 1. 语法错误&#xff08;SyntaxError&#xff09; 2. 运行时错误&#xff08;RuntimeError&#xff09; 3. 类型错误&#xff08;TypeError&#xff09; 4. 导入错误&#xff08;ImportError&#xff09; 5…...

编程日记 2024/10/24 15:22:20

Java 遗传算法

遗传算法&#xff08;Genetic Algorithm, GA&#xff09;是一种基于自然选择和遗传学原理的优化算法&#xff0c;用于求解复杂的搜索和优化问题。在Java中实现遗传算法通常包括以下几个步骤&#xff1a; 初始化种群&#xff1a;生成一组随机解作为初始种群。适应度评估&#x…...

编程日记 2024/10/24 15:21:19

C++ (一) 基础语法

基础语法&#xff1a;C的开胃小菜 欢迎来到C的世界&#xff0c;这里是编程的盛宴&#xff0c;也是逻辑的迷宫。别担心&#xff0c;我们不会一开始就让你啃硬骨头&#xff0c;而是从基础语法开始&#xff0c;让你慢慢品尝编程的美味。准备好了吗&#xff1f;让我们开始这场编程…...

编程日记 2024/10/24 15:20:18

Qt/C++路径轨迹回放/回放每个点信号/回放结束信号/拿到移动的坐标点经纬度

一、前言说明 在使用百度地图的路书功能中&#xff0c;并没有提供移动的信号以及移动结束的信号&#xff0c;但是很多时候都期望拿到移动的哪里了以及移动结束的信号&#xff0c;以便做出对应的处理&#xff0c;比如结束后需要触发一些对应的操作。经过搜索发现很多人都有这个…...

编程日记 2024/10/24 15:18:15

C 语言介绍及操作案例

C 语言是一种广泛使用的通用编程语言，具有高效、灵活和可移植性强等特点。 一、C 语言的基本特点 简洁高效 C 语言语法简洁，表达能力强。它提供了丰富的数据类型和运算符，可以方便地进行各种计算和操作。C 语言的代码执行效率高，能够直接访问硬件资源，适用于对性能要求较…...

编程日记 2024/10/24 15:16:11

Ivanti云服务被攻击事件深度解析：安全策略构建与未来反思

攻击事件背景 近期&#xff0c;威胁情报和研究机构Fortinet FortiGuard Labs发布了一份关于针对IT解决方案提供商Ivanti云服务设备&#xff08;Ivanti Cloud Services Appliance&#xff0c;CSA&#xff09;的复杂网络攻击的详细分析。 该攻击被怀疑是由国家级对手发起&#xf…...

编程日记 2024/10/24 15:15:08

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

编程新知 2026/2/7 4:57:53

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/11/20 2:48:44

rknn优化教程（二）

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

编程新知 2025/6/11 15:25:30

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

编程新知 2025/10/8 10:56:25

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

编程新知 2026/1/24 6:22:43

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法（ISWC2024）

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

编程新知 2026/1/31 12:03:23

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

编程新知 2026/1/30 17:10:19

JVM暂停（Stop-The-World，STW）的原因分类及对应排查方案

JVM暂停（Stop-The-World，STW）的完整原因分类及对应排查方案，结合JVM运行机制和常见故障场景整理而成： 一、GC相关暂停​​ 1. ​​安全点（Safepoint）阻塞​​ ​​现象​​：JVM暂停但无GC日志，日志显示No GCs detected。​​原因​​：JVM等待所有线程进入安全点（如…...

编程新知 2026/2/7 11:25:15

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

编程新知 2026/1/31 8:45:21

抽象类和接口（全）

一、抽象类 1.概念&#xff1a;如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象&#xff0c;这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法&#xff0c;包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中&#xff0c;⼀个类如果被 abs…...

编程新知 2026/2/5 4:38:22