标签：浏览器 ready NPU esc asc == 属性 ota child
ajax使用方法就不多=说了，参照这篇https://www.cnblogs.com/shangrao/p/12861845.html
json和xml不同的地方是得到响应方法。
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性
| 属性 | 描述 |
|---|---|
| responseText | 获得字符串形式的响应数据。 |
| responseXML | 获得 XML 形式的响应数据。 |
xml文件
文件格式介绍：结构化数据
获取xml文件方法
1.Js解析xml格式
2.根据xml文本内容创建xml对象
3.获取元素节点的文本内容
4.获取元素的属性值
data.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>
HTML页面
<!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;i<books.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 += ‘<tr><td>‘+getNodeText(name)+‘</td><td>‘+getNodeText(category)+‘</td><td>‘+getNodeText(desc)+‘</td></tr>‘; } 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>
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
{ "total":"4", "data":[ { "name":"三国演义", "category":"文学", "desc":"一个军阀混战的年代" },{ "name":"水浒传", "category":"文学", "desc":"草寇or英雄好汉" },{ "name":"西游记", "category":"文学", "desc":"妖魔鬼怪牛鬼蛇神什么都有" },{ "name":"红楼梦", "category":"文学", "desc":"一个封建王朝的缩影" } ], "obj":{"adf":"aa"} }
html页面
<!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;i<total;i++){ var book = list[i]; tag += ‘<tr><td>‘+book.name+‘</td><td>‘+book.category+‘</td><td>‘+book.desc+‘</td></tr>‘; } 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>
标签：浏览器 ready NPU esc asc == 属性 ota child
原文地址：https://www.cnblogs.com/shangrao/p/12861904.html
