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

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

news 2025/7/4 20:45:00

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

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

编程新知 2025/7/4 14:21:11

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

编程新知 2025/7/4 1:30:15

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

编程新知 2025/6/17 2:24:14

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

编程新知 2025/6/17 4:52:56

从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

编程新知 2025/7/4 2:21:56

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

编程新知 2025/6/21 12:17:37

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

编程新知 2025/6/27 2:40:37

2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

编程新知 2025/7/4 6:55:45

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

编程新知 2025/6/26 3:44:44

ios苹果系统，js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

编程新知 2025/7/4 12:15:37