首頁 > 文章 > web前端 > 程式碼詳解JavaScript中JSON的用法

程式碼詳解JavaScript中JSON的用法

yulia原創: 2018-09-14 17:50:371461瀏覽

最近歸納總結了一些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 = &#39;{ "sites" : [&#39; +
&#39;{ "name":"百度" , "url":"www.baidu.com" },&#39; +
&#39;{ "name":"Google" , "url":"www.google.com" } ]}&#39;;

四、如何解析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 = &#39;{ "sites" : [&#39; +
&#39;{ "name":"百度" , "url":"www.baidu.com" },&#39; +
&#39;{ "name":"Google" , "url":"www.google.com" } ]}&#39;;
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:&#39;John&#39;,age:&#39;19&#39;},{ name:&#39;joe&#39;,age:&#39;20&#39;}] );"); 
%>

程式碼講解：

呼叫資料的為客戶端，傳送資料的稱為服務端。客戶端在存取服務端的url的程式碼中，加入一個制定了函數名稱的參數，也就是jsonCallback，然後在服務端用getParameter取得數據，最後依照js的語法，輸出到流中。這裡讀者需要注意，上面服務端的資料就是全部的jsp檔案內容了，除了使用jsp，讀者還可以使用php或是jquery等技術來實現服務端，但是後綴名和使用的語法必需一致。

以上是程式碼詳解JavaScript中JSON的用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php JavaScript json jquery ajax Object for xml 字符串循环 Length var JS function 对象 for...in padding

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：javascript如何實作URL的轉碼與解碼?下一篇：javascript如何實作URL的轉碼與解碼?

看更多