當前位置:
首頁 >
Ajax拿取JSON格式的数据
發布時間:2023/12/31
44
豆豆
生活随笔
收集整理的這篇文章主要介紹了
Ajax拿取JSON格式的数据
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
JSON簡介
- JSON(javaScript Object Notation) 一種簡單的數據格式,比xml更輕巧。 JSON是javaScript原生格式。這意味著在 javaScript中處理JSON數據不需要任何特殊的API或工具包。
- JSON的規則很簡單:對象是一個無序的“‘名稱/值’對”集合。一個對象以“{”(做括號)開始,“}”(右括號)結束。但每個“名稱”后跟一個“ :”(冒號);“’名稱/值‘對”之間使用“,”(逗號)分隔。
解析JSON
- JSON只是一種文本字符串,它被存儲在responsetext屬性中
- 為了讀取存儲在responseText屬性中的JSON數據,需要根據javaScript對eval語句。函數eval會把一個字符串當作它對參數,然后這個字符串會被當作javaScript代碼來執行。因為JSON 對字符串就是由javaScript代碼構成的,所以它本身是可執行的
- JSON提供了json.js包,下載http://www.json.org/json.js后,使用parseJSON()方法將字符串解析JS
JSON小結
優點:
- 作為一種數據傳輸格式,JSON與XML很相似,但是它更加靈巧。
- JSON不需要從服務器端發送含有特定內容類型的首部信息
缺點
- 語法過于嚴謹
- 代碼不易讀
- eval函數存在風險
解析JSON文件代碼示例
1、json數據(所在文件:json,js)代碼:
{"person": {"name": "JBK","website": "http://baidu.com/","email": "15204510180@163.com" } }2、解析代碼:
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script>window.onload = function () {var as= document.getElementsByTagName("a");for(var i=0;i< as.length;i++){as[i].onclick= function () {var request = new XMLHttpRequest();var url = this.href;var method="GET";request.open(method,url);request.send(null);request.onreadystatechange= function () {if( request.readyState==4){if(request.status==200||request.status==304){ var result=request.responseText;var objectJSON=eval("("+result+")"); // 2、結果不能直接使用,必須先創建對應但節點,再把節點加入到#detail中 // 目標格式為: // <h2><a href="mailto:15204510180@163.com">JBK</a></h2> // <a href="http://baidu.com/">http://baidu.com</a>var name=objectJSON.person.name;var website=objectJSON.person.website;var email=objectJSON.person.email;//alert(name);//alert(website);//alert(email);var aNode=document.createElement("a");aNode.appendChild(document.createTextNode(name));aNode.href="maelto:"+email;var hNode=document.createElement("h2");hNode.appendChild(aNode);var aNode1=document.createElement("a");aNode.appendChild(document.createTextNode(website));aNode.href=website;var dNode=document.getElementById("details");dNode.innerHTML="";dNode.appendChild(aNode);dNode.appendChild(aNode1)}}}return false;}}}</script> </head> <body> <a href="json.js">1</a> <a href="json.js">2</a> <a href="json.js">3</a> <a href="json.js">4</a> <div id="details"></div></body> </html>三種數據格式對比小結
- 若應用程序不需要與其他應用程序共享數據的時候,使用HTML片段來返回數據時最簡單
- 如果數據需要重用,JSON文件是個不錯的選擇,其在性能和文件大小方面有優勢
- 當遠程應用程序未知時,XML文檔是首選,因為XML是web服務器領域的“世界語”
總結
以上是生活随笔為你收集整理的Ajax拿取JSON格式的数据的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 医院形象广告文案语30句
- 下一篇: JS中代表结束的三个关键字 break,