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

AJAX对于XML和JSON的处理

article 2025/9/11 11:18:46

这是book.xml文件：

<?xml version="1.0" encoding="ISO-8859-1"?><bookstore><book category="children"><title>Harry Potter</title> <author>J K. Rowling</author> <year>2005</year> <price>29.99</price> 
</book><book category="cooking"><title lang="en">Everyday Italian</title> <author>Giada De Laurentiis</author> <year>2005</year> <price>30.00</price> 
</book><book category="web"><title lang="en">Learning XML</title> <author>Erik T. Ray</author> <year>2003</year> <price>39.95</price> 
</book><book category="web"><title lang="en">XQuery Kick Start</title> <author>James McGovern</author> <author>Per Bothner</author> <author>Kurt Cagle</author> <author>James Linn</author> <author>Vaidyanathan Nagarajan</author> <year>2003</year> <price>49.99</price> 
</book></bookstore>

这是处理XML的HTML文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
// function readXML(){
// 	var xmlHttp;
//     if(window.ActiveXObject){
//       xmlHttp=new ActiveXObject("Microsoft.XMLHttp");
//     }else{
//       xmlHttp=new XMLHttpRequest();
//
//     }
// 	xmlHttp.open("GET","book.xml",false);
// 	xmlHttp.send();
// 	xmlDoc=xmlHttp.responseXML;
// 	books=xmlDoc.getElementsByTagName("book");
// 	alert(books.length);
// 	//alert(books[0].childNodes[0].nodeValue);
// 	for(i=0;i<books.length;i++){
// 		document.write(books[i].getElementsByTagName("title")[0].nodeName);
// 		document.write(": ");
// 		document.write(books[i].getElementsByTagName("title")[0].childNodes[0].nodeValue);
// 		document.write("&nbsp;&nbsp;&nbsp;&nbsp");
// 		document.write(books[i].getElementsByTagName("author")[0].nodeName);
// 		document.write(": ");
// 		document.write(books[i].getElementsByTagName("author")[0].childNodes[0].nodeValue);
// 		document.write("<br>");
// 	}
// }function readXML(){var xmlhttp;if (window.ActiveXObject){xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}else{xmlhttp = new XMLHttpRequest();}xmlhttp.open("GET","book.xml",false);xmlhttp.send();xmlDoc = xmlhttp.responseXML;books = xmlDoc.getElementsByTagName("book");alert(books.length);//books[0]：获取 XML 文档中第一个 <book> 元素。//childNodes[0]：获取该 <book> 元素的第一个子节点（可能是文本节点或元素节点）。//nodeValue：获取该子节点的文本值。alert(books[0].childNodes[0].nodeValue);for (i=0;i<books.length;i++){document.write(books[i].getElementsByTagName("title")[0].nodeName);document.write(": ");document.write(books[i].getElementsByTagName("title")[0].childNodes[0].nodeValue);document.write("&nbsp;&nbsp;&nbsp;&nbsp");document.write(books[i].getElementsByTagName("author")[0].nodeName);document.write(": ");document.write(books[i].getElementsByTagName("author")[0].childNodes[0].nodeValue);document.write("&nbsp;&nbsp;&nbsp;&nbsp");document.write(books[i].getElementsByTagName("year")[0].nodeName);document.write(": ");document.write(books[i].getElementsByTagName("year")[0].childNodes[0].nodeValue);document.write("&nbsp;&nbsp;&nbsp;&nbsp");document.write(books[i].getElementsByTagName("price")[0].nodeName);document.write(": ");document.write(books[i].getElementsByTagName("price")[0].childNodes[0].nodeValue);document.write("<br>")}
}</script>
</head><body>
<input type="button" value="读取XML" onclick="readXML();">
<span id="to">test</span>
</body>
</html>

这是处理json的处理方法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function aa(){var stu='{"name":"zhangsan","age":18,"addr":{"priv":"zhejiang","city":"zhangzhou","zip":"310018"}}';var students='[{"name":"zhangsan","age":18},{"name":"li","age":20,"id":"2001"}]';var obj=eval('('+students+')');  //将一个 JSON 格式的字符串 转换为 JavaScript 对象alert(obj[1].name);var stu=eval('('+stu+')');alert(stu.addr.city);
}function showJSON1() {  var user =  {  "username":"andy",  "age":20,  "info": { "tel": "123456", "cellphone": "98765"},  "address": [  {"city":"beijing","postcode":"222333"},  {"city":"newyork","postcode":"555666"}]  } alert(user.username);  alert(user.age);  alert(user.info.cellphone);  alert(user.address[0].city);  alert(user.address[0].postcode);  user.username = "Tom";  alert(user.username);  
}function showJSON2(){var user='{"name":"tom","num":"2015001","dept":{"name":"computer","office":"综合8楼"},"addr":{"city":"宁波市","zip":"310018","street":"南京路111号"	}}';alert(user);var obj=eval('('+user+')');alert(obj.name);}function showJSON3() {  var users = [{  "username":"andy",  "age":20,  "info": { "tel": "123456", "cellphone": "98765"},  "address": [  {"city":"beijing","postcode":"222333"},  {"city":"newyork","postcode":"555666"}]  },{  "username":"tom",  "age":19,  "info": { "tel": "dsfdsf", "cellphone": "987ewrew65"},  "address": [  {"city":"nanjing","postcode":"34343"},  {"city":"newyork","postcode":"34343"}]  }]for(i=0;i<users.length;i++){document.write(users[i].username+" ");document.write(users[i].age +" ");document.write(users[i].info.tel +" ");document.write(users[i].address[0].city +users[i].address[0].postcode+" ");document.write("<br>");}} 
</script>
</head><body>
<input type="button" value="test" onclick="aa();">
<input type="button" value="读取jason对象" onclick="showJSON1();">
<input type="button" value="读取jason字符串" onclick="showJSON2();">
<input type="button" value="读取jason数组" onclick="showJSON3();">
</body>
</html>

这是菜鸟里的处理xml的方式：

<CATALOG>
<script/>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Greatest Hits</TITLE>
<ARTIST>Dolly Parton</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>RCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
</CATALOG>

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><style>table,th,td {border : 1px solid black;border-collapse: collapse;}th,td {padding: 5px;}</style>
</head>
<body><h1>XMLHttpRequest 对象</h1><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);  //这里的this.responseXML是XMLHttpRequest对象属性，返回 XML 文档。}};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></tr>";var x = xmlDoc.getElementsByTagName("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></tr>";}document.getElementById("demo").innerHTML = table;}
</script></body>
</html>

这是菜鸟的处理JSON响应数据的代码：

[{"title": "JavaScript 教程","url": "https://www.runoob.com/js/"},{"title": "HTML 教程","url": "https://www.runoob.com/html/"},{"title": "CSS 教程","url": "https://www.runoob.com/css/"}
]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{var xmlhttp;if (window.XMLHttpRequest){// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码xmlhttp=new XMLHttpRequest();}else{// IE6, IE5 浏览器执行代码xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4 && xmlhttp.status==200){var myArr = JSON.parse(this.responseText);  //将JSON数据格式解析为JS格式myFunction(myArr)}}xmlhttp.open("GET","/try/ajax/json_ajax.json",true);xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");xmlhttp.send();
}
function myFunction(arr) {var out = "";var i;for(i = 0; i < arr.length; i++) {out += '<a href="' + arr[i].url + '">' + arr[i].title + '</a><br>';}document.getElementById("myDiv").innerHTML=out;
}
</script>
</head>
<body><h2>AJAX JSON</h2>
<button type="button" onclick="loadXMLDoc()">请求 JSON 数据</button>
<div id="myDiv"></div></body>
</html>

AJAX对于XML和JSON的处理

这是book.xml文件： <?xml version"1.0" encoding"ISO-8859-1"?><bookstore><book category"children"><title>Harry Potter</title> <author>J K. Rowling</author> <year>2005&…...

编程日记 2025/7/18 1:58:55

C++核心编程_关系运算符重载

4.5.5 关系运算符重载作用：重载关系运算符，可以让两个自定义类型对象进行对比操作 /*#### 4.5.5 关系运算符重载 **作用：**重载关系运算符，可以让两个自定义类型对象进行对比操作 */class Person { public:Person(string name, …...

编程日记 2025/9/6 23:46:24

NIO知识点

一、Java NIO 基础概念 Java NIO（New Input/Output）是从 Java 1.4 版本开始引入的新的 IO API，它提供了与标准 IO 不同的工作方式。主要特点包括： 面向缓冲区：数据读取到一个稍后处理的缓冲区，需要时可在…...

编程日记 2025/7/5 19:29:49

T/CCSA 663-2025《医疗科研云平台技术要求》标准解读与深度分析

参考地址：https://www.doc88.com/p-30280431175529.html 引言随着医疗信息化建设的深入推进，医疗行业正经历从"业务驱动"向"数据驱动"的转型。在这一背景下，中国通信标准化协会(CCSA)于2025年发布了T/CCSA 663-2025《医疗科研云平台技术要求》标准，并…...

编程日记 2025/9/7 0:13:14

win11回收站中出现：查看回收站中是否有以下项: WPS云盘回收站

好久没更新了，首先祝所有大朋友、小朋友六一儿童节快乐，真的希望我们永远都不会长大呀，长大真的好累呀(•_•) 免责声明笔者先来个免责声明吧，被网上的阴暗面吓到了若读者参照笔者的这篇文章所执行的操作中途或后续出现的任何…...

编程日记 2025/9/7 0:48:52

Nginx+Tomcat 负载均衡群集

一、Tomcat 基础与案例部署 （一）Tomcat 概述与应用场景起源与命名 Tomcat 最初由 Sun 公司的詹姆斯・邓肯・戴维森开发，后贡献给 Apache 软件基金会。项目早期名为 “Catalina”，因此安装目录中包含大量与 Catalina 相关的文件…...

编程日记 2025/7/23 1:42:26

SCDN如何同时保障网站加速与DDoS防御？

在互联网时代，网站既要面对用户访问量的激增，又要抵御层出不穷的网络攻击，特别是DDoS攻击的威胁。SCDN（安全内容分发网络）作为融合加速与安全的解决方案，如何实现“加速”与“防御”的双重保障？…...

编程日记 2025/9/8 6:05:50

Trae CN IDE 中 Python 开发的具体流程和配置总结

以下是 Trae CN IDE 中 Python 开发的具体流程和配置总结，结合实例说明，帮助开发者快速上手：一、环境准备 1. 安装 Trae CN IDE 下载地址：访问 Trae 官网下载对应操作系统的安装包（Windows .exe / macOS .dmg / Linux .tar.gz）。安装步骤： Windows：双击 .exe 文件，…...

编程日记 2025/7/21 5:36:50

PostgreSQL不同的等级认证体系

PostgreSQL 专家认证有不同的等级和体系，以工业和信息化部人才交流中心推出的认证为例，分为 PGCA 认证专员、PGCP 认证专家、PGCM 认证大师三个等级。以下是学习建议： 明确学习目标与认证等级 PGCA初级认证专员：适合刚接触 Post…...

编程日记 2025/7/20 8:52:15

项目前置知识——不定参以及设计模式

1.C语言不定参宏函数 c语言中，printf就是一个不定参函数，在使用不定参宏函数时，我们使用__VA_ARGS__来解析不定参： #include <iostream> #include <cstdarg>#define LOG(fmt/*格式*/, .../*用...表示不定参*/) prin…...

编程日记 2025/9/7 1:34:02

04powerbi-度量值-筛选引擎CALCULATE()

1、calculate calculate 的参数分两部分，分别是计算器和筛选器 2、多条件calculater与表筛选多条件有不列的多条件相同列的多条件 3、calculatertable （表，筛选条件）表筛选与calculate用法一样，可以用创建表&…...

编程日记 2025/9/11 4:23:30

JavaScript排序算法详解：从基础到高级

排序是编程中最基本也是最重要的操作之一。JavaScript作为一门广泛应用于Web开发的语言，提供了内置的排序方法，但了解各种排序算法的原理和实现对于开发者来说仍然至关重要。本文将深入探讨JavaScript中常见的排序算法，帮助您理解它们的原理、…...

编程日记 2025/7/20 6:42:59

问题描述 chromedriver 2.46.0 下载失败淘宝https://registry.npmmirror.com/chromedriver/2.46/chromedriver_win32.zip无法下载解决方法找到可下载源 https://cdn.npmmirror.com/binaries/chromedriver/2.46/chromedriver_win32.zip ，先将其下载到本地目录(D…...

编程日记 2025/9/7 19:47:09

Weather app using Django - Python

我们的任务是使用 Django 创建一个 Weather 应用程序，让用户可以输入城市名称并查看当前天气详细信息，例如温度、湿度和压力。我们将通过设置一个 Django 项目，创建一个视图来从 OpenWeatherMap API 获取数据，并设计一个简单的模板…...

编程日记 2025/9/7 19:49:02

机器视觉2，硬件选型

机器视觉1，学习了硬件的基本知识和选型，现在另外的教材巩固知识选相机工业相机选型的保姆级教程_哔哩哔哩_bilibili 1.先看精度多少mm，被检测物体长宽多少mm》分辨率， 选出合理范围内的相机 2.靶面尺寸，得出分…...

编程日记 2025/9/11 6:15:37

自定义序列生成器之单体架构实现

主键 ID VS 业务 ID 在数据库设计中，除了主键 ID，一般还需要一个具有唯一索引的业务 ID。二者承担的职责不一样，它们共同满足了我们对于技术实现和业务需求的双重目标 1. 职责分离原则主键 ID 业务唯一标识 ID 作用保证数据库层面…...

编程日记 2025/7/26 22:41:10

电阻电容的选型

一、电阻选型 1.1安装方式贴片电阻体积小，适用于SMT生产；功率小；易拆解插件电阻体积大；功率大；不易脱落 1.2阻值电阻的阻值是离散的，其标称阻值根据精度分为E6、E12、E24、E48、E96、E192六大系列&am…...

编程日记 2025/9/7 2:23:39

12.springCloud AlibabaSentinel实现熔断与限流

目录一、Sentinel简介 1.官网 2.Sentinel 是什么 3.Sentinel 的历史 4.Sentinel 基本概念资源规则 5.Sentinel 功能和设计理念 (1).流量控制什么是流量控制流量控制设计理念 (2).断降级什么是熔断降级熔断降级设计理念 (3).系统自适应保护 6.主要工作机制…...

编程日记 2025/9/11 3:23:49

Cookie 和 Session：Web 身份验证的核心机制

文章目录一、Cookie：客户端存储的小数据块**核心特性****典型应用场景**二、Session：服务器端的会话存储**核心特性****典型应用场景**三、Cookie vs Session：核心区别对比四、最佳实践与扩展一、Cookie：客户端存储的小数据块 …...

编程日记 2025/8/5 1:54:12

vSOME/IP与ETAS DSOME/IP通信的问题解决方案

✅ 一、服务版本不匹配导致 Handover 问题 —— 需要更新 VSOMEIP 代码逻辑 📌 问题描述：在 SOME/IP 通信中，发布者（offer）与订阅者（subscribe）之间存在服务版本不一致的问题，导致 Handover（切换）失败。 ✅ 解决方案：需要在 offer_service 和 subscribe 接口中…...

编程日记 2025/9/7 5:06:40

修改vscode切换上一个/下一个标签页快捷键

装了vim后一直没找到切tab页的快捷键 Code>Preferences>Keyboard Shortcuts on macOS 搜索这2个选项我设置成了commandh 向前切换，commandl向后切换，贴合vim的方向设置 workbench.action.previousEditor commandh workbench.action.nextEdit…...

编程日记 2025/7/5 18:11:34

三大中文wordpress原创主题汉主题

汉主题汉主题是一款极具特色的 WordPress 主题，由国内专业团队精心打造，专为中文用户设计。其设计灵感源自博大精深的汉文化，将传统文化元素与现代网页设计理念巧妙融合，呈现出独特而典雅的风格。无论是用于个人博客展示文学创作…...

编程日记 2025/7/21 3:35:45

软考-系统架构设计师-第十五章信息系统架构设计理论与实践

信息系统架构设计理论与实践 15.2 信息系统架构风格和分类15.3 信息系统常用的架构模型15.4 企业信息系统总体框架15.5 信息系统架构设计方法 15.2 信息系统架构风格和分类信息系统架构风格数据流体系结构风格：批处理、管道-过滤器调用/返回体系结构风格&#x…...

编程日记 2025/9/7 4:27:57

Redis缓存-数据淘汰策略

数据淘汰策略就是，当redis内存满的时候，此时在向redis添加新的key，那么redis会按照某一种规则将内存中的数据删掉，这种删除数据的规则成为内存的淘汰策略。 redis支持8中淘汰策略 1.noeviction，这种是redis默认的情况…...

编程日记 2025/7/8 0:35:18

52. N 皇后 II【力扣(LeetCode) 】

文章目录零、原题链接一、题目描述二、测试用例三、解题思路四、参考代码零、原题链接 52. N 皇后 II 一、题目描述 n 皇后问题研究的是如何将 n 个皇后放置在 n n 的棋盘上，并且使皇后彼此之间不能相互攻击。【补充：不能互相攻击就是要求一个皇后的…...

编程日记 2025/7/20 8:46:26

MySQL 8 完整安装指南（Ubuntu 22.04）

MySQL 8 完整安装指南（Ubuntu 22.04） 本教程详细说明如何在 Ubuntu 22.04 上安装和配置 MySQL 8，包含安全优化及远程访问设置。 1️⃣ 添加 MySQL 官方 APT 仓库官网仓库下载地址：MySQL APT 仓库下载页下载仓库配置包&#…...

编程日记 2025/9/7 5:36:51

C++ 标准输入输出 -- ＜iostream＞

<iostream>库是 C++ 标准库中用于输入输出操作的头文件。 <iostream> 定义了几个常用的流类和操作符，允许程序与标准输入输出设备（如键盘和屏幕）进行交互。以下是<iostream>库的详细使用说明，包括其主要类和常见用法示例。主要类 std::istream：用于…...

编程日记 2025/7/6 19:21:58

记一次sql按经纬度计算距离

具体代码： ROUND函数在mysql可以用来计算经纬度，代码如下： SELECTa.store_name_sfa as storeName,a.storeid_sfa as store_id,a.link_man_sfa as link_man,a.link_phon_sfa as link_phone,a.photo as image_url,a.district,a.street,ROUND(6…...

编程日记 2025/7/31 23:42:15

安卓jetpack compose学习笔记-UI基础学习

哲学知识应该用哲学的方式学习，技术知识也应该用技术的方式学习。没必要用哲学的态度来学习技术。学完安卓技术能做事就ok了，安卓技术肯定是有哲学的，但是在初学阶段没必要讨论什么安卓哲学。学习一们复杂技术的路径有很多，这里…...

编程日记 2025/9/10 9:08:29

线性回归用于分类

线性回归本身是一种用于回归问题的技术，即预测一个连续的目标变量值。然而，线性回归也可以被改造或结合其他技术来用于分类问题，尽管这不是其最直接或最常见的用途。以下是几种将线性回归应用于分类问题的方法或相关概念： 阈值划分…...

编程日记 2025/7/7 12:55:07

AJAX对于XML和JSON的处理

相关文章：

AJAX对于XML和JSON的处理

C++核心编程_关系运算符重载

NIO知识点

T/CCSA 663-2025《医疗科研云平台技术要求》标准解读与深度分析

win11回收站中出现：查看回收站中是否有以下项: WPS云盘回收站

Nginx+Tomcat 负载均衡群集

SCDN如何同时保障网站加速与DDoS防御？

Trae CN IDE 中 Python 开发的具体流程和配置总结

PostgreSQL不同的等级认证体系

项目前置知识——不定参以及设计模式

04powerbi-度量值-筛选引擎CALCULATE()

JavaScript排序算法详解：从基础到高级

chromedriver 下载失败

Weather app using Django - Python

机器视觉2，硬件选型

自定义序列生成器之单体架构实现

电阻电容的选型

12.springCloud AlibabaSentinel实现熔断与限流

Cookie 和 Session：Web 身份验证的核心机制

vSOME/IP与ETAS DSOME/IP通信的问题解决方案

修改vscode切换上一个/下一个标签页快捷键

三大中文wordpress原创主题汉主题

软考-系统架构设计师-第十五章信息系统架构设计理论与实践

Redis缓存-数据淘汰策略

52. N 皇后 II【力扣(LeetCode) 】

MySQL 8 完整安装指南（Ubuntu 22.04）

C++ 标准输入输出 -- ＜iostream＞

记一次sql按经纬度计算距离

安卓jetpack compose学习笔记-UI基础学习

线性回归用于分类