JSON（JavaScript Object Notation，JavaScript 对象表示法）是一种存储和交换文本信息的语法。类似于XML。

实例

<h2>JSON Object Creation in JavaScript</h2>
<p>
    Name:
    <span id="jname"></span>
    <br /> Age:
    <span id="jage"></span>
    <br /> Address:
    <span id="jstreet"></span>
    <br /> Phone:
    <span id="jphone"></span>
    <br />
</p>
<script>
    var JSONObject = {
        "name": "John Johnson",
        "street": "Oslo West 555",
        "age": 33,
        "phone": "555 1234567"
    };
    document.getElementById("jname").innerHTML = JSONObject.name
    document.getElementById("jage").innerHTML = JSONObject.age
    document.getElementById("jstreet").innerHTML = JSONObject.street
    document.getElementById("jphone").innerHTML = JSONObject.phone
</script>

JSON 语法

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

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

JSON 名称/值对

JSON 数据的书写格式是：名称/值对。

名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值：

"firstName" : "John"

这很容易理解，等价于这条 JavaScript 语句：

firstName = "John"

JSON 值

JSON 值可以是：

数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在方括号中）
对象（在花括号中）
null

JSON 对象

JSON 对象在花括号中书写：

对象可以包含多个名称/值对：

{ "firstName":"John" , "lastName":"Doe" }

这一点也容易理解，与这条 JavaScript 语句等价：

firstName = "John"
lastName = "Doe"

JSON 数组

JSON 数组在方括号中书写：

数组可包含多个对象：

{
    "employees": [{
            "firstName": "John",
            "lastName": "Doe"
        },
        {
            "firstName": "Anna",
            "lastName": "Smith"
        },
        {
            "firstName": "Peter",
            "lastName": "Jones"
        }
    ]
}

在上面的例子中，对象 “employees” 是包含三个对象的数组。每个对象代表一条关于某人（有姓和名）的记录。

JSON 使用 JavaScript 语法

因为 JSON 使用 JavaScript 语法，所以无需额外的软件就能处理 JavaScript 中的 JSON。

通过 JavaScript，您可以创建一个对象数组，并像这样进行赋值：

var employees = [{
        "firstName": "John",
        "lastName": "Doe"
    },
    {
        "firstName": "Anna",
        "lastName": "Smith"
    },
    {
        "firstName": "Peter",
        "lastName": "Jones"
    }
];

可以像这样访问 JavaScript 对象数组中的第一项：

employees[0].lastName;

返回的内容是：

Doe

可以像这样修改数据：

employees[0].firstName = "Jonatan";

在下面的章节，您将学到如何把 JSON 文本转换为 JavaScript 对象。

JSON 文件

JSON 文件的文件类型是 “.json”

JSON 文本的 MIME 类型是 “application/json”

JSON 使用

JSON – 转换为 JavaScript 对象

JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。

由于这种相似性，无需解析器，JavaScript 程序能够使用内建的 eval() 函数，用 JSON 数据来生成原生的 JavaScript 对象。

把 JSON 文本转换为 JavaScript 对象

JSON 最常见的用法之一，是从 web 服务器上读取 JSON 数据（作为文件或作为 HttpRequest），将 JSON 数据转换为 JavaScript 对象，然后在网页中使用该数据。

为了更简单地讲解，我们使用字符串作为输入进行演示（而不是文件）。

JSON 实例 – 来自字符串的对象

创建包含 JSON 语法的 JavaScript 字符串：

var txt = '{ "employees" : [' +
    '{ "firstName":"John" , "lastName":"Doe" },' +
    '{ "firstName":"Anna" , "lastName":"Smith" },' +
    '{ "firstName":"Peter" , "lastName":"Jones" } ]}';

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

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

在网页中使用 JavaScript 对象：

<p>
First Name: <span id="fname"></span><br />
Last Name: <span id="lname"></span><br />
</p>
<script>
    document.getElementById("fname").innerHTML = obj.employees[1].firstName
    document.getElementById("lname").innerHTML = obj.employees[1].lastName
</script>

JSON 解析器

tips: eval() 函数可编译并执行任何 JavaScript 代码。在旧版本的浏览器中，使用eval()对JSON数据结构求值存在风险，因为这可能会执行一些恶意代码。

JSON对象有两个办法：stringift()和parse()。在最简单的情况下，这两个方法分别把javascript对象序列化为JSON字符串和把JSON字符串解析为原生javascript值。

实例

var book = {
    "title": "Professional JavaScript",
    "authors": [
        "Nicholas C. Zakas"
    ],
    edition: 3,
    year: 2011
};
var jsonText = JSON.stringify(book);
alert(jsonText);

上面的例子将一个javascript对象转化为一个JSON字符串，默认情况下，JSON.stringift()输出的JSON字符串是不带任何空格缩进的，所以jsonText中的字符串是这样的：

{"title":"Professional JavaScript","authors":["Nicholas C. Zakas"],"edition":3,"year":2011}

然后将JSON字符串直接传递给JSON.parse()就可以得到相应的javascript对象，

var bookCopy = JSON.parse(jsonText);

如上代码可以创建一个类似book的对象

alert(bookCopy.title);  //Professional JavaScript

Ajax请求JSON数据

原生javascript请求实例

<body>
<button id="btn">请求数据</button>
<ul id="list"></ul>
<script>
    var btn=document.getElementById('btn');
    var list=document.getElementById('list');
    btn.onclick=function (){
        // 1.创建XMLHttpRequest对象
        var xhr=null;
        if (window.XMLHttpRequest) {
            xhr=new XMLHttpRequest();
        } else{
            xhr=new ActiveXObject('Microsoft.XMLHTTP');
        };
        xhr.open('get','test.json',true);
        xhr.send(null);
        xhr.onreadystatechange=function (){
            if (xhr.readyState==4) {
                if (xhr.status==200) {
                    var json=JSON.parse(xhr.responseText);
                    for (var i = 0; i < json.length; i++) {
                        list.innerHTML+='<li>姓名:'+json[i].name+'， 性别:'+json[i].sex+'， 年龄:'+json[i].age+'， 成绩:'+json[i].score+'</li>';
                    };
                } else{
                    alert(xhr.status);
                };
            };
        }
    }
</script>
</body>

test.json

[
    {"name":"老王","sex":"女","age":19,"score":66},
    {"name":"老刘","sex":"男","age":22,"score":72},
    {"name":"老李","sex":"女","age":24,"score":85},
    {"name":"老张","sex":"男","age":30,"score":96}
]

JQuery 的getJSON()方法

使用JQuery的getJSON()可以快速的获取后台的JSON数据

用法

$(selector).getJSON(url,data,success(data,status,xhr))

参数	说明
url	必需。规定将请求发送的哪个 URL。
data	可选。规定连同请求发送到服务器的数据。
success(data,status,xhr)	可选。规定当请求成功时运行的函数。

该函数是简写的 Ajax 函数，等价于：

$.ajax({
  url: url,
  data: data,
  success: callback,
  dataType: json
});

实例