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

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

news 2026/2/8 23:28:56

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

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

编程新知 2026/2/8 1:22:58

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

编程新知 2026/2/8 3:54:15

Python爬虫（一）：爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

编程新知 2026/1/30 20:42:46

【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）

🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览 在物联网实际项目中，**“终端 + 网关”**是…...

编程新知 2026/1/31 6:12:22

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

编程新知 2026/1/29 17:56:19

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

编程新知 2026/1/23 12:22:14

AI+无人机如何守护濒危物种？YOLOv8实现95%精准识别

【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而&#xff0c;传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案&#xff0c;能够实现大范围覆盖并远程采集数据。尽管具备这些优势&#xf…...

编程新知 2026/1/26 12:50:00

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

编程新知 2026/1/8 0:40:27

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题&#xff0c;无需引入&#xff0c;直接可…...

编程新知 2026/1/31 9:29:45

苹果AI眼镜：从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中，苹果AI眼镜（Apple Glasses）正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch，而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠，而在于如何通过形态设计打破社交壁垒，成为用户“全天佩戴…...

编程新知 2025/12/22 12:09:15