JSON学习

什么是Json

w3c上说

JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
JSON 是轻量级的文本数据交换格式
JSON 独立于语言 *
JSON 具有自我描述性，更易理解

* JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。

Json 的语法

JSON 语法是 JavaScript 对象表示法语法的子集。

数据在名称/值对中
数据由逗号分隔
花括号保存对象
方括号保存数组

现在json在项目中使用的越来越广泛，json较xml的不同之处

没有结束标签
更短
读写的速度更快
能够使用内建的 JavaScript eval() 方法进行解析
使用数组
不使用保留字

JSON具有以下形式：

对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔

数组是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔

值（value）可以是双引号括起来的字符串（string）、数值(number)、true、false、 null、对象（object）或者数组（array）。这些结构可以嵌套。

字符串（string）是由双引号包围的任意数量Unicode字符的集合，使用反斜线转义。一个字符（character）即一个单独的字符串（character string）。字符串（string）与C或者Java的字符串非常相似

数值（number）也与C或者Java的数值非常相似。除去未曾使用的八进制与十六进制格式。除去一些编码细节

空白可以加入到任何符号之间。以下描述了完整的语言。

以上摘自于JSON官网

下面通过ajax来操作json

之前我在vs上建过一个mvc2的应用web应用，为了获取它自带的Jquery脚本，就干脆在项目的根目录下建了一个html页面，不知道为什么每次在vs中点击在浏览器中运行此页面时，页面里的脚本就不执行，干脆就拷贝出js重新建了个站点，之后也就没有深入研究过到底为什么不行。

先说下json，下面是从人人网上拷贝的部分json文件内容

{
  "ad_js_version":40881,
  "ad_css_version":40918,
  "udpate_interval":"40",
  "max_update_count":"9",
  "list" : [    
    { 
      "next_load_time":15000000,
      "flush_type":0,
      "adzone_id":"100000000063",
      "ads" : 
        [
          {
            "widget_id" : "33",
            "widget_version" : "1.10",
            "widget" : "{title:'西方神话怪物排行',clickUrl:'http://gamestat.renren.com/game/1006159',content:'10，人马怪；9，阿尔克墨涅；8，独眼巨人；7，美杜莎；6，狮鹫；第一名竟是…',mediaUri:'/20120727/15/c0ce6184-3b14-40a5-8bbe-8f8f963bd659.jpg'}",

            "ad_param": {
              "creative_id": "1000067828000100001",
              "title":"NULL",
              "content":"10，人马怪；9，阿尔克墨涅；8，独眼巨人；7，美杜莎；6，狮鹫；第一名竟是…",
              "click_url":"http://ebp.renren.com/ebpn/click.html?aid=1000067828000100001&mc=0%5EC33%5EC1000067828000100001%5EC1000067828000100001%5EC104.528%5EC1%5EC105%5EC1343741049%5EC1000000_280866289%7C1%7C1984-01-01%7C28%7C4%7C0086110000000000%7C0_0086000000000000%7C0%7C0%7C0%7C0086110000000000%5EC100000000063%5EC0%5EC%5EC1%5ECrr_0_33%5EC0%5EC1409014614350257260%5EC100000019711%5EC1000067828%5EC4%5EC10&refresh_source=0&refresh_idx=1&engine_type=1&ref=http%3A%2F%2Fbrowse.renren.com%2Fsearch.do&url=http%3A%2F%2Fgamestat.renren.com%2Fgame%2F1006159",
              "media_uri":"http://jebe.xnimg.cn",
              "engine":"1",
              "pvtime":"2012-07-31 21:24:09",
              "monitor_url":"%2F20120727%2F15%2Fc0ce6184-3b14-40a5-8bbe-8f8f963bd659.jpg"
            }
          }
          ,
          {
            "widget_id" : "31",
            "widget_version" : "1.8",
            "widget" : "{title:'北京周末网络学习',clickUrl:'http://xueliedu.com',mediaUri:'/20120611/14/137ca525-7f46-4fe8-aee6-dc5c15723593.png'}",

            "ad_param": {
              "creative_id": "1000062897000700001",
              "title":"北京周末网络学习",
              "content":"",
              "click_url":"http://ebp.renren.com/ebpn/click.html?aid=1000062897000700001&mc=0%5EC31%5EC1000062897000700001%5EC1000062897000700001%5EC200%5EC2%5EC200%5EC1343741049%5EC1000000_280866289%7C1%7C1984-01-01%7C28%7C4%7C0086110000000000%7C0_0086000000000000%7C0%7C0%7C0%7C0086110000000000%5EC100000000063%5EC0%5EC%5EC1%5ECrr_0_31%5EC0%5EC1409014614350257260%5EC100000025181%5EC1000062897%5EC4%5EC10&refresh_source=0&refresh_idx=1&engine_type=1&ref=http%3A%2F%2Fbrowse.renren.com%2Fsearch.do&url=http%3A%2F%2Fxueliedu.com",
              "media_uri":"http://jebe.xnimg.cn",
              "engine":"1",
              "pvtime":"2012-07-31 21:24:09",
              "monitor_url":"%2F20120611%2F14%2F137ca525-7f46-4fe8-aee6-dc5c15723593.png"
            }
          }
          ,
          {
            "widget_id" : "31",
            "widget_version" : "1.8",
            "widget" : "{title:'订杂志特价3折起',clickUrl:'http://www.zazhipu.com/ggfrom.asp?src=renren&url=tejia/index.asp',mediaUri:'/20120718/08/f220db7c-65c1-4d56-a335-462d8caa113d.jpg'}",

            "ad_param": {
              "creative_id": "1000063780000100001",
              "title":"NULL",
              "content":"",
              "click_url":"http://ebp.renren.com/ebpn/click.html?aid=1000063780000100001&mc=0%5EC31%5EC1000063780000100001%5EC1000063780000100002%5EC200%5EC3%5EC200%5EC1343741049%5EC1000000_280866289%7C1%7C1984-01-01%7C28%7C4%7C0086110000000000%7C0_0086000000000000%7C0%7C0%7C0%7C0086110000000000%5EC100000000063%5EC0%5EC%5EC1%5ECrr_0_31%5EC0%5EC1409014614350257260%5EC100000026258%5EC1000063780%5EC4%5EC10&refresh_source=0&refresh_idx=1&engine_type=1&ref=http%3A%2F%2Fbrowse.renren.com%2Fsearch.do&url=http%3A%2F%2Fwww.zazhipu.com%2Fggfrom.asp%3Fsrc%3Drenren%26url%3Dtejia%2Findex.asp",
              "media_uri":"http://jebe.xnimg.cn",
              "engine":"1",
              "pvtime":"2012-07-31 21:24:09",
              "monitor_url":"%2F20120718%2F08%2Ff220db7c-65c1-4d56-a335-462d8caa113d.jpg"
            }
          }
        ]
      }  
  ]
}

这个json看起来还挺复杂的，下面我们来获取所有的click_url所对应的值

上面的例子很简单的就取到了click_url

下面在取widget值中的title和clickUrl

首先widget的值是一个json格式的字符串，下面就用到js自带的函数eval（）

JSON 语法是 JavaScript 语法的子集，JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。

eval() 函数使用的是 JavaScript 编译器，可解析 JSON 文本，然后生成 JavaScript 对象。必须把文本包围在括号中，这样才能避免语法错误：

var obj = eval ("(" + jsonString+ ")");

代码如下：

<!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>
    <title></title>
    <script src="../JS/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                url: '../Data/show.json',
                dataType: 'json',
                success: function (data) {
                    //因为list数组里就只有一个对象，长度为1，就直接对ads数组进行循环取click_url
                    $.each(data.list[0].ads, function (i, item) {
                        $("#url").append("<a href='" + item.ad_param.click_url + "' >Click" + i + "</a></br>");

                        $("#url1").append("<a href='" + eval("(" + item.widget + ")").clickUrl + "' >" + eval("(" + item.widget + ")").title + "</a></br>");
                    });
                }
            });
        });
    </script>
</head>
<body>
    <div id="url">
    </div>
    <div id="url1">
    </div>
</body>
</html>

测试结果：