JSON 教程 json入門學(xué)習(xí)筆記
JSON: JavaScript Object Notation(JavaScript 對(duì)象表示法)
JSON 是存儲(chǔ)和交換文本信息的語(yǔ)法。類似 XML。
JSON 比 XML 更小、更快，更易解析。
JSON 實(shí)例
{
"sites": [
{ "name":"腳本之家" , "url":"m.fzitv.net" },
{ "name":"google" , "url":"www.google.com" },
{ "name":"微博" , "url":"www.weibo.com" }
]
}
這個(gè) sites 對(duì)象是包含 3 個(gè)站點(diǎn)記錄（對(duì)象）的數(shù)組。
什么是 JSON ？
JSON 指的是 JavaScript 對(duì)象表示法（JavaScript Object Notation）
JSON 是輕量級(jí)的文本數(shù)據(jù)交換格式
JSON 獨(dú)立于語(yǔ)言：JSON 使用 Javascript語(yǔ)法來描述數(shù)據(jù)對(duì)象，但是 JSON 仍然獨(dú)立于語(yǔ)言和平臺(tái)。JSON 解析器和 JSON 庫(kù)支持許多不同的編程語(yǔ)言。 目前非常多的動(dòng)態(tài)（PHP，JSP，.NET）編程語(yǔ)言都支持JSON。
JSON 具有自我描述性，更易理解
JSON - 轉(zhuǎn)換為 JavaScript 對(duì)象
JSON 文本格式在語(yǔ)法上與創(chuàng)建 JavaScript 對(duì)象的代碼相同。
由于這種相似性，無需解析器，JavaScript 程序能夠使用內(nèi)建的 eval() 函數(shù)，用 JSON 數(shù)據(jù)來生成原生的 JavaScript 對(duì)象。
在線實(shí)例
通過我們的編輯器，您可以在線編輯 JavaScript 代碼，然后通過點(diǎn)擊一個(gè)按鈕來查看結(jié)果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>腳本之家(jb51.net)</title>
</head>
<body>
<h2>JavaScript 創(chuàng)建 JSON 對(duì)象</h2>
<p>
網(wǎng)站名稱: <span id="jname"></span><br />
網(wǎng)站地址: <span id="jurl"></span><br />
網(wǎng)站 slogan: <span id="jslogan"></span><br />
</p>
<script>
var JSONObject= {
"name":"腳本之家",
"url":"m.fzitv.net",
"slogan":"學(xué)的不僅是技術(shù)，更是夢(mèng)想！"
};
document.getElementById("jname").innerHTML=JSONObject.name
document.getElementById("jurl").innerHTML=JSONObject.url
document.getElementById("jslogan").innerHTML=JSONObject.slogan
</script>
</body>
</html>
與 XML 相同之處
JSON 是純文本
JSON 具有"自我描述性"（人類可讀）
JSON 具有層級(jí)結(jié)構(gòu)（值中存在值）
JSON 可通過 JavaScript 進(jìn)行解析
JSON 數(shù)據(jù)可使用 AJAX 進(jìn)行傳輸
與 XML 不同之處
沒有結(jié)束標(biāo)簽
更短
讀寫的速度更快
能夠使用內(nèi)建的 JavaScript eval() 方法進(jìn)行解析
使用數(shù)組
不使用保留字
為什么使用 JSON？
對(duì)于 AJAX 應(yīng)用程序來說，JSON 比 XML 更快更易使用：
使用 XML
讀取 XML 文檔
使用 XML DOM 來循環(huán)遍歷文檔
讀取值并存儲(chǔ)在變量中
使用 JSON
讀取 JSON 字符串
用 eval() 處理 JSON 字符串
JSON 語(yǔ)法
JSON 語(yǔ)法是 JavaScript 語(yǔ)法的子集。
JSON 語(yǔ)法規(guī)則
JSON 語(yǔ)法是 JavaScript 對(duì)象表示語(yǔ)法的子集。
數(shù)據(jù)在名稱/值對(duì)中
數(shù)據(jù)由逗號(hào)分隔
大括號(hào)保存對(duì)象
中括號(hào)保存數(shù)組
JSON 名稱/值對(duì)
JSON 數(shù)據(jù)的書寫格式是：名稱/值對(duì)。
名稱/值對(duì)包括字段名稱（在雙引號(hào)中），后面寫一個(gè)冒號(hào)，然后是值：
"name" : "腳本之家"
這很容易理解，等價(jià)于這條 JavaScript 語(yǔ)句：
name = "腳本之家"
JSON 值
JSON 值可以是：
數(shù)字（整數(shù)或浮點(diǎn)數(shù)）
字符串（在雙引號(hào)中）
邏輯值（true 或 false）
數(shù)組（在中括號(hào)中）
對(duì)象（在大括號(hào)中）
null
JSON 數(shù)字
JSON 數(shù)字可以是整型或者浮點(diǎn)型：
{ "age":30 }
JSON 對(duì)象
JSON 對(duì)象在大括號(hào)（{}）中書寫：
對(duì)象可以包含多個(gè)名稱/值對(duì)：
{ "name":"腳本之家" , "url":"m.fzitv.net" }
這一點(diǎn)也容易理解，與這條 JavaScript 語(yǔ)句等價(jià)：
name = "腳本之家"
url = "m.fzitv.net"
JSON 數(shù)組
JSON 數(shù)組在中括號(hào)中書寫：
數(shù)組可包含多個(gè)對(duì)象：
{
"sites": [
{ "name":"腳本之家" , "url":"m.fzitv.net" },
{ "name":"google" , "url":"www.google.com" },
{ "name":"微博" , "url":"www.weibo.com" }
]
}
在上面的例子中，對(duì)象 "sites" 是包含三個(gè)對(duì)象的數(shù)組。每個(gè)對(duì)象代表一條關(guān)于某個(gè)網(wǎng)站（name、url）的記錄。
JSON 布爾值
JSON 布爾值可以是 true 或者 false：
{ "flag":true }
JSON null
JSON 可以設(shè)置 null 值：
{ "jb51":null }
JSON 使用 JavaScript 語(yǔ)法
因?yàn)?JSON 使用 JavaScript 語(yǔ)法，所以無需額外的軟件就能處理 JavaScript 中的 JSON。
通過 JavaScript，您可以創(chuàng)建一個(gè)對(duì)象數(shù)組，并像這樣進(jìn)行賦值：
var sites = [
{ "name":"jb51" , "url":"www.jb51.com" },
{ "name":"google" , "url":"www.google.com" },
{ "name":"微博" , "url":"www.weibo.com" }
];
可以像這樣訪問 JavaScript 對(duì)象數(shù)組中的第一項(xiàng)（索引從 0 開始）：
sites[0].name;
返回的內(nèi)容是：
jb51
可以像這樣修改數(shù)據(jù)：
sites[0].name="腳本之家";
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>腳本之家(jb51.com)</title>
</head>
<body>
<h2>JavaScript 創(chuàng)建 JSON 對(duì)象</h2>
<p>第一個(gè)網(wǎng)站名稱: <span id="name1"></span></p>
<p>第一個(gè)網(wǎng)站修改后的名稱: <span id="name2"></span></p>
<script>
var sites = [
{ "name":"jb51" , "url":"www.jb51.com" },
{ "name":"google" , "url":"www.google.com" },
{ "name":"微博" , "url":"www.weibo.com" }
];
document.getElementById("name1").innerHTML=sites[0].name;
// 修改網(wǎng)站名稱
sites[0].name="腳本之家";
document.getElementById("name2").innerHTML=sites[0].name;
</script>
</body>
</html>
在下面的章節(jié)，您將學(xué)到如何把 JSON 文本轉(zhuǎn)換為 JavaScript 對(duì)象。
JSON 文件
JSON 文件的文件類型是 ".json"
JSON 文本的 MIME 類型是 "application/json"
JSON vs XML
JSON 和 XML 都用于接收 web 服務(wù)端的數(shù)據(jù)。
JSON 和 XML在寫法上有所不同，如下所示：
JSON 實(shí)例
{
"sites": [
{ "name":"腳本之家" , "url":"www.jb51.com" },
{ "name":"google" , "url":"www.google.com" },
{ "name":"微博" , "url":"www.weibo.com" }
]
}
XML 實(shí)例
<sites> <site> <name>腳本之家</name> <url>www.jb51.com</url> </site> <site> <name>google</name> <url>www.google.com</url> </site> <site> <name>微博</name> <url>www.weibo.com</url> </site> </sites>
JSON 與 XML 的相同之處：
JSON 和 XML 數(shù)據(jù)都是 "自我描述" ，都易于理解。
JSON 和 XML 數(shù)據(jù)都是有層次的結(jié)構(gòu)
JSON 和 XML 數(shù)據(jù)可以被大多數(shù)編程語(yǔ)言使用
JSON 與 XML 的不同之處：
JSON 不需要結(jié)束標(biāo)簽
JSON 更加簡(jiǎn)短
JSON 讀寫速度更快
JSON 可以使用數(shù)組
最大的不同是：XML 需要使用 XML 解析器來解析，JSON 可以使用標(biāo)準(zhǔn)的 JavaScript 函數(shù)來解析。
JSON.parse(): 將一個(gè) JSON 字符串轉(zhuǎn)換為 JavaScript 對(duì)象。
JSON.stringify(): 于將 JavaScript 值轉(zhuǎn)換為 JSON 字符串。
為什么 JSON 比 XML 更好？
XML 比 JSON 更難解析。
JSON 可以直接使用現(xiàn)有的 JavaScript 對(duì)象解析。
針對(duì) AJAX 應(yīng)用，JSON 比 XML 數(shù)據(jù)加載更快，而且更簡(jiǎn)單：
使用 XML
獲取 XML 文檔
使用 XML DOM 迭代循環(huán)文檔
接數(shù)據(jù)解析出來復(fù)制給變量
使用 JSON
獲取 JSON 字符串
JSON.Parse 解析 JSON 字符串
Json介紹：
JSON(JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式。易于人閱讀和編寫。
json 官方網(wǎng)站 http://www.json.org/
json.net 下載地址 http://json.codeplex.com/releases/view/37810
Demo:
描述：
點(diǎn)擊獲取按鈕后，將請(qǐng)求頁(yè)面，獲取json數(shù)據(jù)，填充到表格
html代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/jscript" src="../jquery/jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
$("#Button1").click(function() {
$.get("json1.aspx?m=m", null, function(callbackmsg) {
var product = eval(callbackmsg);
ShowProduct(product)
})
});
})
function ShowProduct(callbackmsg) {
var row='';
for (var u in callbackmsg) {
var len = callbackmsg[u].length;
row += '<tr>';
row += '<td>' + callbackmsg[u].Name + '</td>';
row += '<td>' + callbackmsg[u].Price + '</a></td>';
row += '<td>' + callbackmsg[u].Size + '</td>';
row += '</tr>';
}
$("#body").html(row);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Button1" type="button" value="獲取" />
</div>
<table>
<thead>
<tr>
<th>
名稱
</th>
<th>
價(jià)格
</th>
<th>
大小
</th>
</tr>
</thead>
<tbody id="body">
</tbody>
</table>
</form>
</body>
</html>
后臺(tái)代碼：
public partial class json1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (HttpContext.Current.Request.QueryString["m"] != null)
{
List<Product> Products = new List<Product>();
Products.Add(new Product() { Name = "筆記本", Price = "4.2", Size = "30x50" });
Products.Add(new Product() { Name = "尺子", Price = "1.2", Size = "30x50" });
Products.Add(new Product() { Name = "書", Price = "36", Size = "30x50" });
Products.Add(new Product() { Name = "鋼筆", Price = "6.0", Size = "30x50" });
Products.Add(new Product() { Name = "鉛筆", Price = "2.2", Size = "30x50" });
string json = JsonConvert.SerializeObject(Products);
Response.Write(json);
Response.End();
}
}
}
public class Product
{
public string Name { get; set; }
public string Size { get; set; }
public string Price { get; set; }
}
知識(shí)點(diǎn)：
1.json官方提供了用于.net操作的dll類庫(kù)，JsonConvert.SerializeObject將.net對(duì)象序列化為json。
2.Javascript讀取json對(duì)象var product = eval(callbackmsg)。
3.Javascript讀取json值callbackmsg[u].Name。
- JSON 入門教程基礎(chǔ)篇 json入門學(xué)習(xí)筆記
- javascript學(xué)習(xí)之json入門
- Ajax與JSON的一些學(xué)習(xí)總結(jié)
- JSON學(xué)習(xí)筆記
- Python解析json文件相關(guān)知識(shí)學(xué)習(xí)
- JSON stringify方法原理及實(shí)例解析
- Java使用JSON傳遞字符串注意事項(xiàng)解析
- 10分鐘掌握XML、JSON及其解析
- Java解析JSON數(shù)據(jù)時(shí)報(bào)錯(cuò)問題解決方案
- javascript解析json格式的數(shù)據(jù)方法詳解
- 10分鐘學(xué)會(huì)js處理json的常用方法
相關(guān)文章
JSON是JavaScript Object Notation的縮寫。JSON是個(gè)輕量級(jí)的用于服務(wù)器端和客戶端交換數(shù)據(jù)的數(shù)據(jù)格式。它經(jīng)常會(huì)用在ajax應(yīng)用上,是因?yàn)樗腔赼jax對(duì)象的格式定義出來的。2009-08-08
改進(jìn)版通過Json對(duì)象實(shí)現(xiàn)深復(fù)制的方法
改進(jìn)版通過Json對(duì)象實(shí)現(xiàn)深復(fù)制的方法，需要的朋友可以參考下2012-10-10
Javascript Jquery 遍歷Json的實(shí)現(xiàn)代碼
Javascript Jquery 遍歷Json的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2010-03-03
如何實(shí)現(xiàn)json數(shù)據(jù)可視化詳解
最近在工作中開發(fā)一個(gè)內(nèi)部功能時(shí)碰到的一個(gè)需求，要把json數(shù)據(jù)在頁(yè)面上展示出來，平時(shí)瀏覽器會(huì)安裝jsonView這樣的擴(kuò)展來看json數(shù)據(jù)，但是程序要用到的話該怎么辦呢？今天在網(wǎng)上搜索的時(shí)候，發(fā)現(xiàn)了這個(gè)小技巧，分享給大家，有需要的朋友們可以參考借鑒，下面來一起看看吧2016-11-11
我們?cè)谑褂肁JAX來做服務(wù)器端和客戶端交互的時(shí)候，一般的做法是讓服務(wù)器端返回一段JSON字符串，然后在客戶端把它解析成JavaScript對(duì)象。2009-12-12
如何解析Json已經(jīng)成為了眾多業(yè)內(nèi)人士談?wù)摰慕裹c(diǎn)，依我看，要解析輕量化類型json，用.net自帶的類庫(kù)就可以勝任了，有一種看起來更方便的老古董——正則表達(dá)式，處理json是綽綽有余，感興趣的你可不要錯(cuò)過了哈2013-02-02
Chrome中JSON.parse的特殊實(shí)現(xiàn)
ECMA 262 Edition5 中提供了原生的JSON支持，其中JSON.parse用來將字符串轉(zhuǎn)成成json，見ECMA 262 Edition5 15.12.2。另見：字符串轉(zhuǎn)換成json的三種方式2011-01-01
把普通對(duì)象轉(zhuǎn)換成json格式的對(duì)象的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄哑胀▽?duì)象轉(zhuǎn)換成json格式的對(duì)象的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
JSON是JavaScript面向?qū)ο笳Z(yǔ)法的一個(gè)子集。由于JSON是JavaScript的一個(gè)子集，因此它可清晰的運(yùn)用于此語(yǔ)言中。2009-10-10
這篇文章主要介紹了個(gè)人看了JSON 必知必會(huì)一書的讀后感，此書從各個(gè)方面介紹了json的一些注意事項(xiàng)與優(yōu)缺點(diǎn)。2016-10-10