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

AJAX对于XML和JSON的处理

news 来源：原创 2025/6/4 18:27:51

 这是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>

相关文章：

  • 腾讯云 Python3.12.8 通过yum安装 并设置为默认版本
  • dify应用探索
  • 基于ubuntu和树莓派环境对游戏进行移植
  • imx6ull(0):烧录、启动
  • JavaSE:面向对象进阶之内部类（Inner Class）
  • Uiverse.io：免费UI组件库
  • 通信革新与网络安全探索与创新：开启未来之门
  • MySQL-多表关系、多表查询
  • 绿盟 IPS 设备分析操作手册
  • 详细解析2MHz和3MHz压电陶瓷片的区别
  • TomSolver 库 | config详解及其测试
  • 嵌入式Linux 期末复习指南（下）
  • Java如何读取CSV文件并将数据放入对象中详解
  • GMDCMonitor企业版功能分享0602
  • Python列表、字典、元组、集合
  • 系统级 EOS 测试方法 - System Level EOS Testing Method
  • 【设计模式-3.5】结构型——装饰器模式
  • window ollama部署模型
  • Node.js 中使用 Express 框架系统详细讲解
  • 有公网ip但外网访问不到怎么办？内网IP端口映射公网连接常见问题和原因
  • 做微信头图的网站/舆情网站直接打开
  • 官方网站建设步骤/福州百度网站排名优化
  • 龙胜做网站的公司/长沙百度网站排名优化
  • 电商服务/沈阳seo团队
  • 巴西网站建设/seo培训机构哪家好
  • 曲靖网站网站建设/刷粉网站推广