json

头像
yint
    阅读 3 分钟

    evernote免费版的流量被我用光了,暂时把这当笔记本使..
    想写篇json相关的文章总结一下(其实不太知道想说啥
    可能是这篇文章很多部分内容老旧可以修改一下)...
    先挖个坑,把之前一篇的一部分剪到这..
    图片描述
    图片描述

    JSON

    (JavaScript Object Notation) 是一种轻量级的数据交换格式。JSON 依赖于 JavaScript 开发人员,因为它是 JavaScript 对象的字符串表示。例如,假设有一个含两个属性的 ticker 对象:symbol 和 price。这是在 JavaScript 中定义 ticker 对象的方式:

    var ticker = {symbol: 'IBM', price: 91.42};

    并且这是它的 JSON 表示方式:
    {symbol: 'IBM', price: 91.42}

    有关 JSON 和将其作为数据内部交换格式的信息。清单 1 定义了一个 JavaScript 函数,调用该函数时会显示 IBM 的股价。

    清单 1. 定义 showPrice 函数

    function showPrice(data) {
        alert("Symbol: " + data.symbol + ", Price: " + data.price);
    }

    可以将 JSON 数据作为参数传递,以调用该函数:

    showPrice({symbol: 'IBM', price: 91.42}); // alerts: Symbol: IBM, Price: 91.42
    

    现在准备将这两个步骤包含到 Web 页面,如清单 2 所示。
    清单 2. 在 Web 页面中包含 showPrice 函数和参数

    <script type="text/javascript">
    function showPrice(data) {
        alert("Symbol: " + data.symbol + ", Price: " + data.price);
    }
    </script>
    <script type="text/javascript">showPrice({symbol: 'IBM', price: 91.42});</script>
    

    至此,本文已展示了如何将静态 JSON 数据作为参数调用 JavaScript 函数。不过,通过在函数调用中动态包装 JSON 数据可以用动态数据调用函数,这是一种动态 JavaScript 插入的技术。要查看其效果,将下面一行放入名为 ticker.js 的独立 JavaScript 文件中。

    showPrice({symbol: 'IBM', price: 91.42});

    现在改变 Web 页面中的脚本,使其和清单 3 一样。
    清单 3. 动态 JavaScript 插入代码

    <script type="text/javascript">
    // This is our function to be called with JSON data
    function showPrice(data) {
        alert("Symbol: " + data.symbol + ", Price: " + data.price);
    }
    var url = “ticker.js”; // URL of the external script
    // this shows dynamic script insertion
    var script = document.createElement('script');
    script.setAttribute('src', url);
     
    // load the script
    document.getElementsByTagName('head')[0].appendChild(script); 
    </script>

    在清单 3 所示的例子中,动态插入的 JavaScript 代码位于 ticker.js 文件中,它将真正的 JSON 数据作为参数调用 showPrice()函数。
    前面已经提到,同源策略不阻止将动态脚本元素插入文档中。也就是说,可以动态插入来自不同域的 JavaScript,并且这些域都携带 JSON 数据。这其实是真正的 JSONP(JSON with Padding):打包在函数调用中的 JSON 数据。注意,为了完成该操作,Web 页面必须在插入时具有已经定义好的回调函数,也就是我们例子中的 showPrice()。
    不过,所谓的 JSONP 服务(或 Remote JSON Service)是一种带有附加功能的 Web 服务,该功能支持在特定于用户的函数调用中打包返回的 JSON 数据。这种方法依赖于接受回调函数名作为请求参数的远程服务。然后该服务生成对该函数的调用,将 JSON 数据作为参数传递,在到达客户端时将其插入 Web 页面并开始执行。[5]


    JSON语法


    JSON 语法是 JavaScript 对象表示法语法的子集。
    数据在名称/值对中
    数据由逗号分隔
    花括号保存对象
    方括号保存数组[7]

    // 描述一个人
    
    var person = {
        "Name": "Bob",
        "Age": 32,
        "Company": "IBM",
        "Engineer": true
    }
    
    // 获取这个人的信息
    
    var personAge = person.Age;
    
    // 描述几个人
    
    var members = [
        {
            "Name": "Bob",
            "Age": 32,
            "Company": "IBM",
            "Engineer": true
        },
        {
            "Name": "John",
            "Age": 20,
            "Company": "Oracle",
            "Engineer": false
        },
        {
            "Name": "Henry",
            "Age": 45,
            "Company": "Microsoft",
            "Engineer": false
        }
    ]
    
    // 读取其中John的公司名称
    
    var johnsCompany = members[1].Company;
    
    // 描述一次会议
    
    var conference = {
        "Conference": "Future Marketing",
        "Date": "2012-6-1",
        "Address": "Beijing",
        "Members": 
        [
            {
                "Name": "Bob",
                "Age": 32,
                "Company": "IBM",
                "Engineer": true
            },
            {
                "Name": "John",
                "Age": 20,
                "Company": "Oracle",
                "Engineer": false
            },
            {
                "Name": "Henry",
                "Age": 45,
                "Company": "Microsoft",
                "Engineer": false
            }
        ]
    }
    
    // 读取参会者Henry是否工程师
    
    var henryIsAnEngineer = conference.Members[2].Engineer;

    yint
    388 声望21 粉丝

    转AIing