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

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

news 2025/11/3 19:55:35

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

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2025/11/2 13:12:12

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

编程新知 2025/10/19 16:05:44

家政维修平台实战20：权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

编程新知 2025/10/30 9:20:06

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

编程新知 2025/10/30 10:12:15

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

编程新知 2025/11/3 14:31:36

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

编程新知 2025/11/3 17:55:04

AI，如何重构理解、匹配与决策？

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

编程新知 2025/10/24 3:10:00

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

编程新知 2025/10/25 15:52:58

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...

编程新知 2025/10/28 22:03:45

BLEU评分：机器翻译质量评估的黄金标准

BLEU评分&#xff1a;机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域&#xff0c;衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标&#xff0c;自2002年由IBM的Kishore Papineni等人提出以来&#xff0c;…...

编程新知 2025/9/14 5:50:36