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

AJAX对于XML和JSON的处理

news 2025/8/19 6:10:10

 这是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>
http://www.lqws.cn/news/71587.html

相关文章：

  • Missashe考研日记—Day51-Day57
  • 企业级开发中的 maven-mvnd 应用实践
  • window ollama部署模型
  • QT入门学习(二)---继承关系、访问控制和变量定义
  • C++ 标准输入输出 -- ＜iostream＞
  • 修改vscode切换上一个/下一个标签页快捷键
  • demo_win10配置WSL、DockerDesktop环境，本地部署Dify，ngrok公网测试
  • 安装DockerDocker-Compose
  • 【DBA】MySQL经典250题，改自OCP英文题库中文版（2025完整版）
  • AIGC工具平台-GPT-SoVITS-v4-TTS音频推理克隆
  • 短视频平台差异视角下开源AI智能名片链动2+1模式S2B2C商城小程序的适配性研究——以抖音与快手为例
  • 【Doris基础】Apache Doris中的Coordinator节点作用详解
  • 工作流引擎-18-开源审批流项目之 plumdo-work 工作流，表单，报表结合的多模块系统
  • 深入解析 Python 字符串方法：从基础到高级应用
  • 深度学习和神经网络 卷积神经网络CNN
  • DAY 41 简单CNN
  • 传送文件利器wormhole的使用方法
  • 打开一个新的Maven工程要做的事情
  • 从0开始学vue：pnpm怎么安装
  • 启动metastore时报错MetaException(message:Version information not found in metastore
  • 计算机组成原理核心剖析：CPU、存储、I/O 与总线系统全解
  • ⚡️ Linux grep 命令参数详解
  • Redis部署架构详解：原理、场景与最佳实践
  • RocketMQ 消息发送核心源码解析：DefaultMQProducerImpl.send () 方法深度剖析
  • 初识Linux指令（笔记2）
  • gcc编译构建流程-动态链接库
  • 【端午安康】龙舟争渡Plug-In
  • Java中对象哈希值的解析
  • Fullstack 面试复习笔记：操作系统 / 网络 / HTTP / 设计模式梳理
  • 【Linux网络篇】：HTTP协议深度解析---基础概念与简单的HTTP服务器实现