Json (讀音-Jason,不要讀做J-S-On啊...
http://en.wikipedia.org/wiki/JSON)
如果要用jQuery以Ajax存取Database,以ASP.NET為例,無論是使用Page Method或者Web Service時,普遍都是Return Json格式的。與XML相比,Json格式沒有Tag,大大減小資料的大小。使用逗號分隔資料;冒號區分Keys/Values,可讀性不遜於XML。
Json格式的例子:
[
{"Name":"Visual Studio Express","Type":"Dev IDE","License":"Free"},
{"Name":"WordPress","Type":"Blog System","License":"Open Source"},
{"Name":"WinRAR","Type":"Archive","License":"Commercial"},
{"Name":"iTunes","Type":"Music Player","License":"Free"},
{"Name":"FileZilla","Type":"FTP Tool","License":"Open Source"}
]
甚至部份網上服務的API,除XML格式外,還會直接提供CallBack Json格式。目的就是盡量減小Data的大小,而且可以直接讓很多不同的Javascript Framework讀取。
以Flickr相簿為例 :
API Service Url :
http://api.flickr.com/services/feeds/photos_public.gne?tags=hongkong&tagmode=any&format=json
用Notepad打開photos_public.gne就可以見到是Json字串。
Deserialize
要解開Json格式資料,就要進行Deserialize把Json轉至類似
C#的Enumeration Types,不同的是Json格式的Key是可以重複的。
可能你會發現
jQuery有serialize() Method,但沒有deserialize(),原因不是作者懶...而是沒有需要。
因為要做Deserialize可以有三個方法(當然還有很多,不能盡錄),分別是:
Javascript本身的eval() / Json官方的json_parse() 以及 Microsoft ASP.NET AJAX Library下的
Sys.Serialization.JavaScriptSerializer.deserialize。
Eval()
<html>
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var $strJson = '[';
$strJson += '{"Name":"Visual Studio Express","Type":"Dev IDE","License":"Free"},';
$strJson += '{"Name":"WordPress","Type":"Blog System","License":"Open Source"},';
$strJson += '{"Name":"WinRAR","Type":"Archive","License":"Commercial"},';
$strJson += '{"Name":"iTunes","Type":"Music Player","License":"Free"},';
$strJson += '{"Name":"FileZilla","Type":"FTP Tool","License":"Open Source"}';
$strJson += ']';
$.each(eval($strJson), function (key, item) {
$("body").append(item.Name + ' / ' + item.Type + ' / ' + item.License + '<br />');
});
});
</script>
</head>
<body>
<!--
Output Result:
Visual Studio Express / Dev IDE / Free
WordPress / Blog System / Open Source
WinRAR / Archive / Commercial
iTunes / Music Player / Free
FileZilla / FTP Tool / Open Source
-->
</body>
</html>
json_parse()
<html>
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://www.json.org/json_parse.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var $strJson = '[';
$strJson += '{"Name":"Visual Studio Express","Type":"Dev IDE","License":"Free"},';
$strJson += '{"Name":"WordPress","Type":"Blog System","License":"Open Source"},';
$strJson += '{"Name":"WinRAR","Type":"Archive","License":"Commercial"},';
$strJson += '{"Name":"iTunes","Type":"Music Player","License":"Free"},';
$strJson += '{"Name":"FileZilla","Type":"FTP Tool","License":"Open Source"}';
$strJson += ']';
$.each(json_parse($strJson), function (key, item) {
$("body").append(item.Name + ' / ' + item.Type + ' / ' + item.License + '<br />');
});
});
</script>
</head>
<body>
<!--
Output Result:
Visual Studio Express / Dev IDE / Free
WordPress / Blog System / Open Source
WinRAR / Archive / Commercial
iTunes / Music Player / Free
FileZilla / FTP Tool / Open Source
-->
</body>
</html>
deserialize()
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!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 id="Head1" runat="server">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var $strJson = '[';
$strJson += '{"Name":"Visual Studio Express","Type":"Dev IDE","License":"Free"},';
$strJson += '{"Name":"WordPress","Type":"Blog System","License":"Open Source"},';
$strJson += '{"Name":"WinRAR","Type":"Archive","License":"Commercial"},';
$strJson += '{"Name":"iTunes","Type":"Music Player","License":"Free"},';
$strJson += '{"Name":"FileZilla","Type":"FTP Tool","License":"Open Source"}';
$strJson += ']';
$.each(Sys.Serialization.JavaScriptSerializer.deserialize($strJson), function (key, item) {
$("body").append(item.Name + ' / ' + item.Type + ' / ' + item.License + '<br />');
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<!--Place a ScriptManager for Sys NameSpace-->
<asp:ScriptManager ID="ScriptManager1" runat="server" />
</div>
</form>
</body>
</html>
你可以見到其實三種方法使用上分別不大,唯一注意的是如果使用Microsoft的,緊記放上ScriptManager。它會自動load入ASP.NET AJAX library 和 script files。
如果要我說,會用那種方法。我想比較小的資料會直接用eval()就可以了。如果是很多資料的話,會用Microsoft的,因為Microsoft的Ajax library原本是給Webforms上的Ajax使用。而Ajax control Toolkit都是使用它,所以處理大量資料下的效能,應該會較優勝。