程式碼詳解JavaScript中JSON的用法
- yulia原創
- 2018-09-14 17:50:371492瀏覽
最近歸納總結了一些JavaScript知識，分享給大家。這篇文章圍繞著JSON 展開，講解JSON和XML的區別，如何解析JSON文本，以及JSONP 。
有一定的參考價值，有需要的朋友可以看看，希望可以幫助你。
一、什麼是JSON
JSON就是JavaScript Object Notation，也就是JavaScript物件表示法。
二、JSON和XML的比較
相同點：都是儲存和交換文字資訊的一種方法。
不同點：JSON 比 XML 更小、更快，也更容易解析。 XML在JSON出現之前，風靡一時，XML有兩大主要功能，就是存儲數據和傳輸數據，不過隨著時間推移，XML在傳輸數據方面就顯得力不從心了，因此後來誕生的JSON在傳輸數據方面取代了XML。所以JSON主要用於傳輸數據，XML主要用於儲存數據。關於在ajax中傳輸JSON可以參考文章淺析Ajax的使用。
三、JSON的語法
資料在「名稱:值」對中，資料由逗號隔開，花括號保存對象，方括號保存陣列。
常見的JSON寫法：
var sites = [
{ "name":"百度" , "url":"www.baidu.com" },
{ "name":"Google" , "url":"www.google.com" },
];
或是：
var tx = '{ "sites" : [' +
'{ "name":"百度" , "url":"www.baidu.com" },' +
'{ "name":"Google" , "url":"www.google.com" } ]}';四、如何解析JSON文字
當javaScript類別寫成上面的第二種形勢的時候，就需要解析JSON ，產生對應的javaScript物件。
1，eval()方法
該方法是javaScript的內建方法，
<!DOCTYPE html>
<html>
<head>
<title>测试JSON</title>
<meta name="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="name">
</div>
<script>
var tx = '{ "sites" : [' +
'{ "name":"百度" , "url":"www.baidu.com" },' +
'{ "name":"Google" , "url":"www.google.com" } ]}';
var obj = eval ("(" + tx + ")");
alert(obj.sites[0].name+","+obj.sites[0].url);
</script>
</body>
</html>存取JSON中數據，有兩種方式，一種是透過物件.key來獲得，例如obj.sites[0].url ；另一種是透過物件["key"] 來獲得,例如obj.sites[0]["key"] 。第一種方式的好處就是簡潔，第二種方式的好處就是透過字串來獲得JSON物件的值，這可以套用在需要透過動態拼接一個字串的key，然後再得到對應值。
2，JSON.parse()方法
只需要將上面的用eval()方法解析的那句替換成如下：
var obj = JSON .parse(tx);
3，JSON數組
在進行Ajax存取資料中，我們常常會對服務端回傳回來的JSON數據，進行解析，而JSON數組又是比較常用的，接下來筆者說一說JSON數組的解析。 SON數組的解析，可以使用for迴圈，也可使用for...in...循環，
使用for-in存取數組：
<body>
<p>你可以使用 for-in 来访问数组:</p>
<p id="demo"></p>
<script>
var myObj, i, x = "";
myObj = {
"name":"网站",
"num":3,
"sites":[ "Google", "Runoob", "Taobao" ]
};
for (i in myObj.sites) {
x += myObj.sites[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
</body>使用for迴圈存取數組：
<body>
<p>使用 for 循环访问数组:</p>
<p id="demo"></p>
<script>
var myObj, i, x = "";
myObj = {
"name":"网站",
"num":3,
"sites":[ "Google", "Runoob", "Taobao" ]
};
for (i = 0; i < myObj.sites.length; i++) {
x += myObj.sites[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
</body>其中myObj.sites.length 可以得到sites陣列的長度。
五、如何解析JSON物件
如果需要將JSON解析為JSON文本，那麼只需要使用函數：
var JSONString = JSON. stringify(JSONObject);
stringify函數不會解析函數，它會刪掉物件中的函數，我們可以將函數轉換為字串來解決這個問題
var obj = { " name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"};
//將函式轉換為字串
obj.alexa = obj.alexa.toString();
var myJSON = JSON.stringify(obj);
六、JSONP
什麼是JSONP：JSONP(json width padding)，json的一種使用模式。
JSONP有什麼作用：它可以實現網頁從別的網域哪裡取得資料，也就是跨網域讀取資料。
為什麼要使用JSONP：因為同源策略（由NetScape提出的一種安全策略）。
使用JSP實作JSONP
<!DOCTYPE html>
<html>
<head>
<title>jsonp.html</title>
<meta name="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<script type="text/javascript">
function jsonpCallback(result){
alert(result[1].name);
}
</script>
<script type="text/javascript" src="http://localhost:8080/Jsonp/jsonp.jsp?callback=jsonpCallback"></script> </body>
</html>服務端的完整程式碼：
<%
String callback = request.getParameter("callback");
out.print(callback+"([ { name:'John',age:'19'},{ name:'joe',age:'20'}] );");
%>程式碼講解：
呼叫資料的為客戶端，傳送資料的稱為服務端。客戶端在存取服務端的url的程式碼中，加入一個制定了函數名稱的參數，也就是jsonCallback，然後在服務端用getParameter取得數據，最後依照js的語法，輸出到流中。這裡讀者需要注意，上面服務端的資料就是全部的jsp檔案內容了，除了使用jsp，讀者還可以使用php或是jquery等技術來實現服務端，但是後綴名和使用的語法必需一致。
以上是程式碼詳解JavaScript中JSON的用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！