ajax怎么获取json数据和xml数据
2021-03-10 00:26
标签:浏览器 ready NPU esc asc == 属性 ota child ajax使用方法就不多=说了,参照这篇https://www.cnblogs.com/shangrao/p/12861845.html json和xml不同的地方是得到响应方法。 如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性 xml文件 文件格式介绍:结构化数据 获取xml文件方法 1.Js解析xml格式 2.根据xml文本内容创建xml对象 3.获取元素节点的文本内容 4.获取元素的属性值 data.xml HTML页面 json文件 文件格式介绍:JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它使得人们很容易的进行阅读和编写 json简单说就是javascript中的对象和数组。{ } 这是对象, [ ] 这是数组。 获取数组内容只需要arr[索引]就可以了。 获取对象内容只需要 obj.属性名 就可以了。 解析下面的数据,整个json 文件 我们给他声明一个变量 叫datas。 datas 对象是可以放任何内容的,下面是有一个属性 total,一个数组 date,一个键值对 obj。 获取对象的值 直接 datas.total,就可以得到“4”了。 datas.data 就可以得到[....]一个数组了,数组有4个元素,这四个元素是四个不同的对象,obj.data[0],代表第一个数组,obj.data[0].name 就可以到第一个数组的name值 “三国演义”。 datas["adf"] 就可得到"aa"值。其实相当于数组,只不过下标可以自己去定义。 data.json html页面 ajax怎么获取json数据和xml数据 标签:浏览器 ready NPU esc asc == 属性 ota child 原文地址:https://www.cnblogs.com/shangrao/p/12861904.htmlajax如何的发哦json数据和xml数据
属性
描述
responseText
获得字符串形式的响应数据。
responseXML
获得 XML 形式的响应数据。
xml version="1.0" encoding="utf-8"?>
bookstore>
book>
name>三国演义name>
category>文学category>
desc>描述desc>
book>
book>
name>水浒传name>
category>文学category>
desc>草寇or英雄豪杰desc>
book>
book>
name>西游记name>
category>文学category>
desc>妖魔鬼怪牛鬼蛇神什么都有desc>
book>
book>
name>红楼梦name>
category>文学category>
desc>宝哥哥与林妹妹的爱情史desc>
book>
bookstore>
doctype html>
html lang="en">
head>
meta charset="UTF-8">
title>json文件title>
script type="text/javascript">
window.onload = function(){
var btn = document.getElementById(‘btn‘);
btn.onclick = function(){
showBookInfo();
}
function showBookInfo(){
document.getElementById(‘bookInfo‘).innerHTML = ‘‘;
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
}
console.log(‘第一步‘+xhr.readyState);
xhr.open(‘get‘,‘./data.xml‘);//xml文件位置
console.log(‘第二步‘+xhr.readyState);
xhr.send(null);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
var data = xhr.responseXML;//返回xml对象(所有内容--document)
var bs = data.getElementsByTagName(‘bookstore‘)[0];//得到bookstores节点
console.log(bs);
var books = bs.getElementsByTagName(‘book‘);
var tag = ‘‘;
for(var i=0;ibooks.length;i++){//循环遍历内容
var book = books[i];
var name = book.getElementsByTagName(‘name‘)[0];
var category = book.getElementsByTagName(‘category‘)[0];
var desc = book.getElementsByTagName(‘desc‘)[0];
tag += ‘
‘;
}
var tbody = document.createElement(‘tbody‘);
tbody.innerHTML = tag;
document.getElementById(‘bookInfo‘).appendChild(tbody);
}
}
}
}
//获取文本节点内容
function getNodeText(node){
if(window.ActiveXObject){//IE
return node.text;
}else{//标准浏览器
if(node.nodeType == 1){
return node.textContent;
}
}
}
script>
head>
body>
input type="button" value="点击" id="btn">
div>
table id="bookInfo">
table>
div>
body>
html>
‘+getNodeText(name)+‘
‘+getNodeText(category)+‘
‘+getNodeText(desc)+‘
{
"total":"4",
"data":[
{
"name":"三国演义",
"category":"文学",
"desc":"一个军阀混战的年代"
},{
"name":"水浒传",
"category":"文学",
"desc":"草寇or英雄好汉"
},{
"name":"西游记",
"category":"文学",
"desc":"妖魔鬼怪牛鬼蛇神什么都有"
},{
"name":"红楼梦",
"category":"文学",
"desc":"一个封建王朝的缩影"
}
],
"obj":{"adf":"aa"}
}
doctype html>
html lang="en">
head>
meta charset="UTF-8">
title>json文件title>
script type="text/javascript">
window.onload = function(){
var btn = document.getElementById(‘btn‘);
btn.onclick = function(){
showBookInfo();
}
function showBookInfo(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
}
xhr.open(‘get‘,‘./data.json‘);
xhr.onreadystatechange = function(){//回调函数
if(xhr.readyState == 4 && xhr.status == 200){
var data = JSON.parse(xhr.responseText);//得到数据
console.log(data);//打印数据
var total = data.total;//得到 4 值
var list = data.data;//得到data数组
var tag = ‘‘;
for(var i=0;itotal;i++){
var book = list[i];
tag += ‘
‘;
}
var tbody = document.createElement(‘tbody‘);
tbody.innerHTML = tag;
document.getElementById(‘bookInfo‘).appendChild(tbody);
}
}
xhr.send(null);
}
}
script>
head>
body>
input type="button" value="点击" id="btn">
div>
table id="bookInfo">
table>
div>
body>
html>
‘+book.name+‘
‘+book.category+‘
‘+book.desc+‘
下一篇:vue.js(3)
文章标题:ajax怎么获取json数据和xml数据
文章链接:http://soscw.com/index.php/essay/62510.html