ajax如何的發哦json數據和xml數據
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>