當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

Ajax拿取JSON格式的数据

發(fā)布時間：2023/12/31 javascript 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 Ajax拿取JSON格式的数据小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

JSON簡介

JSON(javaScript Object Notation) 一種簡單的數(shù)據(jù)格式，比xml更輕巧。 JSON是javaScript原生格式。這意味著在 javaScript中處理JSON數(shù)據(jù)不需要任何特殊的API或工具包。
JSON的規(guī)則很簡單：對象是一個無序的“‘名稱／值’對”集合。一個對象以“{”(做括號)開始，“}”(右括號)結(jié)束。但每個“名稱”后跟一個“ ：”（冒號）；“’名稱／值‘對”之間使用“，”（逗號）分隔。

解析JSON

JSON只是一種文本字符串，它被存儲在responsetext屬性中
為了讀取存儲在responseText屬性中的JSON數(shù)據(jù)，需要根據(jù)javaScript對eval語句。函數(shù)eval會把一個字符串當(dāng)作它對參數(shù)，然后這個字符串會被當(dāng)作javaScript代碼來執(zhí)行。因為JSON 對字符串就是由javaScript代碼構(gòu)成的，所以它本身是可執(zhí)行的
JSON提供了json.js包，下載http://www.json.org/json.js后，使用parseJSON()方法將字符串解析JS

var jsonResponse=xhr.responseText;var personObject=jsonResponse.parseJSON();var name=personObject.person.name;var website=personObject.person.website;var email=personObject.person.email;

JSON小結(jié)

優(yōu)點：

作為一種數(shù)據(jù)傳輸格式，JSON與XML很相似，但是它更加靈巧。
JSON不需要從服務(wù)器端發(fā)送含有特定內(nèi)容類型的首部信息

缺點

語法過于嚴(yán)謹(jǐn)
代碼不易讀
eval函數(shù)存在風(fēng)險

解析JSON文件代碼示例

1、json數(shù)據(jù)(所在文件：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、結(jié)果不能直接使用,必須先創(chuàng)建對應(yīng)但節(jié)點,再把節(jié)點加入到#detail中 // 目標(biāo)格式為: // <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>

三種數(shù)據(jù)格式對比小結(jié)

若應(yīng)用程序不需要與其他應(yīng)用程序共享數(shù)據(jù)的時候，使用HTML片段來返回數(shù)據(jù)時最簡單
如果數(shù)據(jù)需要重用，JSON文件是個不錯的選擇，其在性能和文件大小方面有優(yōu)勢
當(dāng)遠(yuǎn)程應(yīng)用程序未知時，XML文檔是首選，因為XML是web服務(wù)器領(lǐng)域的“世界語”

總結(jié)

以上是生活随笔為你收集整理的Ajax拿取JSON格式的数据的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。