首頁 > web前端 > js教程 > 主體

程式碼詳解JavaScript中JSON的用法

yulia
發布: 2018-09-14 17:50:37
原創
1480 人瀏覽過

最近歸納總結了一些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 = &#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.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板