龙岗在线网站建设/全网整合营销外包
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(异步的 JavaScript 和 XML)。 AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。 虽然所有的AJAX请求都是HTTP请求,但并非所有的HT…...

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

深入剖析 Java Spring 中的 @Autowired、@Resource、@Qualifier、@Inject 注解:使用详解与注意事项
文章目录 Autowired:Spring 最常用的注解1. 作用与简介2. 使用示例3. 注意事项 Resource:按名称注入的利器1. 作用与简介2. 使用示例3. 注意事项 Qualifier:解决多 bean 注入问题1. 作用与简介2. 使用示例3. 注意事项 Inject:标准…...

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

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

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

lego-loam featureAssociation 源码注释(二)
咱们接着往下看initializationValue();!!! FeatureAssociation():nh("~"){subLaserCloud nh.subscribe<sensor_msgs::PointCloud2>("/segmented_cloud", 1, &FeatureAssociation::laserCloudHandler, this);s…...

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

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

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 远程…...

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

安全见闻(3)——开阔眼界,不做井底之蛙
内容预览 ≧∀≦ゞ 安全见闻三:脚本程序与病毒声明导语脚本语言BAT/PowerShell脚本木马与宏病毒脚本病毒BIOS病毒 结语 安全见闻三:脚本程序与病毒 声明 学习视频来自B站UP主 泷羽sec,如涉及侵权马上删除文章 笔记的只是方便各位师傅学习知识,以下网站只…...

MySQL 的意向锁(Intention Locks)原理详解
1. 背景:为什么需要意向锁? MySQL 中意向锁的主要作用是用于支持行级锁与表级锁的并存,特别是在 InnoDB 存储引擎中。InnoDB 提供了行级锁,而在某些场景下,数据库系统仍需要对整张表加锁,例如 LOCK TABLES …...

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

Python代码执行失败问题及解决方案
目录 一、Python代码执行失败的原因 二、常见的Python错误类型 1. 语法错误(SyntaxError) 2. 运行时错误(RuntimeError) 3. 类型错误(TypeError) 4. 导入错误(ImportError) 5…...

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

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

Qt/C++路径轨迹回放/回放每个点信号/回放结束信号/拿到移动的坐标点经纬度
一、前言说明 在使用百度地图的路书功能中,并没有提供移动的信号以及移动结束的信号,但是很多时候都期望拿到移动的哪里了以及移动结束的信号,以便做出对应的处理,比如结束后需要触发一些对应的操作。经过搜索发现很多人都有这个…...

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

Ivanti云服务被攻击事件深度解析:安全策略构建与未来反思
攻击事件背景 近期,威胁情报和研究机构Fortinet FortiGuard Labs发布了一份关于针对IT解决方案提供商Ivanti云服务设备(Ivanti Cloud Services Appliance,CSA)的复杂网络攻击的详细分析。 该攻击被怀疑是由国家级对手发起…...

如何做出正确选择编程语言:关于Delphi 与 C# 编程语言的优缺点对比
概述 为您的项目选择正确的技术可能是一项相当棘手的任务,尤其是当您以前从未需要做出这样的选择时。如今可用的选项范围非常广泛。虽然一些编程语言和工具有着相当悠久的历史,但其他一些则是刚刚开始赢得开发人员青睐的新手。 在这篇博文中࿰…...

39.3K Star,一个现代的数据库ORM工具,专为Node.js和TypeScript设计
大家好,今天给大家分享一个现代的数据库对象关系映射(Object-Relational Mapping,ORM)工具Prisma ORM,它旨在简化数据库操作,提高开发效率,并确保类型安全。 项目介绍 Prisma ORM适用于各种需要…...

Nginx和Mysql的基础命令
1.安装nginx brew install nginx 2.启动nginx brew services start nginx 3.查看nginx文件默认路径 brew info nginx 重装要先关闭nginx 4.nginx.conf 地址 nginx -t 5.nginx重启 brew services restart nginx 6.关闭nginx brew services stop nginx 7.卸载nginx brew uninstal…...

Docker之容器常见操作
docker 命令介绍 docker --help 管理命令: container 管理容器image 管理镜像network 管理网络命令: attach 介入到一个正在运行的容器build 根据 Dockerfile 构建一个镜像commit 根据容器的更改创建一个新的镜像cp 在本地文…...

猜数游戏(Fortran)
背景 学了两个月Fortran还没来一次正式练习 于是—— 代码 program gessnum! implicit none 不取消IN规则。integer::num,areal::Ncall random_seed()call random_number(N)aint(N*10)print*,"请输入您猜的数字:"read(*,*)numdo i1,3if (numa)thenpri…...

代码随想录 -- 贪心 -- 单调递增的数字
738. 单调递增的数字 - 力扣(LeetCode) 思路: 首先将正数n转化为字符串类型;定义一个flag:标记flag以及之后的位数都是9;从后向前遍历字符串n,如果当前的位数小于他上一位,将上一位…...

【小洛的VLOG】Web 服务器高并发压力测试(Reactor模型测试)
目录 引言 工具介绍 环境介绍 测试结果 个人主页:东洛的克莱斯韦克-CSDN博客 引言 大部分的网络通信都是支持TCP/IP协议栈,为了保证通信的可靠性,客户端和服务端之间需要建立链接。服务端能并发处理多少个链接,平均每秒钟能处理…...

Window:下载与安装triton==2.0.0
triton2.0.0谷仓下载 创建python3.10的工作环境: conda create -n anti-dreambooth python3.10然后在下载目录下执行代码: pip install triton-2.0.0-cp310-cp310-win_amd64.whl...

零,报错日志 2002-Can‘t connect to server on‘106.54.209.77‘(1006x)
零,报错日志 2002-Can’t connect to server on’106.54.209.77’(1006x) 今天差点被这个报错给折磨疯掉 尝试一:对腾讯云服务器进行更改 尝试二:针对配置文件处理 step1 //确保注释 /etc/mysql/mysql.conf.d/mysqld.cnf 下# bind-addres…...

R语言笔记(一)
文章目录 一、R objects二、Types of data三、Operators1、Operators2、Comparison operators3、Logical operators 四、Check types of data objects五、Convertion between data objects六、R workspace 一、R objects Two basic types of things/objects: data and functio…...