TatMing's Studio: jQuery教學(3) - Deserialization of Json

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都是使用它，所以處理大量資料下的效能，應該會較優勝。

TatMing's Studio

網頁

2009年5月6日星期三

jQuery教學(3) - Deserialization of Json

1 則留言: