十分钟知道 JSON 是什么

引言（概要）

JSON 代表 JavaScript 对象表示法。

JSON 对象用于在服务器和客户端之间传输数据，XML 用于相同目的。

然而，JSON 对象比 XML 有几个优点，JSON 比 XML 更小、更快，更易解析，也更易于人阅读和编写。

我将在本教程中讨论它们以及 JSON 概念及其用法。

JSON 长这样：

{
    "sites": [
    { "name":"菜鸟教程" , "url":"www.runoob.com" }, 
    { "name":"google" , "url":"www.google.com" }, 
    { "name":"微博" , "url":"www.weibo.com" }
    ]
}

这个 sites 对象（第二行的名字）是包含 3 个站点记录（对象）的数组。

JSON的特点

• 轻量级 (light-weight)
• 与语言无关，可以适用于各种语言（C、Python、C++、Java、PHP、Go……）
• 易读易写
• 基于文本的，可读的数据交换格式

为什么使用 JSON

标准结构：JSON 对象具有的标准结构可以让开发人员更加轻松的阅读和编写代码。

轻量级：使用 Ajax 时，快速异步加载数据而不请求重新加载页面非常重要。而 JSON 轻量级的特点使得它可以更快速的获取和加载请求的数据。

可扩展：JSON 是独立于语言的，这意味着它可以与大多数现代编程语言一起工作。假设我们需要更改服务器端语言，在这种情况下，我们会更容易继续进行更改，因为所有语言的 JSON 结构都是相同的。

JSON 与 XML

让我们看看当我们以基于文本的格式存储 4 个学生的记录时 JSON 和 XML 的外观，以便我们以后可以在需要时检索它。

JSON style:

{"students":[
   {"name":"John", "age":"23", "city":"Agra"},
   {"name":"Steve", "age":"28", "city":"Delhi"},
   {"name":"Peter", "age":"32", "city":"Chennai"},
   {"name":"Chaitanya", "age":"28", "city":"Bangalore"}
]}

XML style:

<students>
  <student>
    <name>John</name> <age>23</age> <city>Agra</city>
  </student>
  <student>
    <name>Steve</name> <age>28</age> <city>Delhi</city>
  </student>
  <student>
    <name>Peter</name> <age>32</age> <city>Chennai</city>
  </student>
  <student>
    <name>Chaitanya</name> <age>28</age> <city>Bangalore</city>
  </student>
</students>

比较两者，我们可以发现，JSON与XML相比，明显更加简洁，也就是更加“轻量级”。

JSON 数据结构类型以及如何读取它们

JSON 对象

var leeasy = {
  "name" : "Leeasy",
  "age" : "18",
  "website" : "csdnBlog"
};

上面的文本创建了一个对象，我们可以使用变量 leeasy 访问该对象。在一个对象中，可以有任意数量的键值对，就像上面那样。我们可以像这样从 JSON 对象中访问信息：

document.writeln("The name is:  " + leeasy.name);
document.writeln("his age is: " + leeasy.age);
document.writeln("his website is: "+ leeasy.website);

数组中的 JSON 对象

在上面的例子中，我们在一个 JSON 对象中存储了一个人的信息，假设我们想存储多个人的信息;

在这种情况下，我们可以有一个对象数组。

var students = [{
   "name" : "Steve",
   "age" :  "29",
   "gender" : "male"
},
                
{
   "name" : "Peter",
   "age" : "32",
   "gender" : "male"
},
                
{
   "name" : "Sophie",
   "age" : "27",
   "gender" : "female"
}];

为了从这个数组中访问信息，我们这样写代码：

document.writeln(students[0].age); //output would be: 29
document.writeln(students[2].name); //output: Sophie

JSON 对象嵌套

接下来将用对象嵌套来表示上面的内容

var students = {
  "steve" : {
  "name" : "Steve",
  "age" :  "29",
  "gender" : "male" 
},

"pete" : {
  "name" : "Peter",
  "age" : "32",
  "gender" : "male"
},

"sop" : {
  "name" : "Sophie",
  "age" : "27",
  "gender" : "female"
}
}

这样做可以从上面嵌套的 JSON 对象中访问信息:

document.writln(students.steve.age); //output: 29
document.writeln(students.sop.gender); //output: female

相比于数组，采用对象嵌套的方式代码的可阅读性会更好。

JSON & JavaScript

JSON 被视为 JavaScript 的子集，但这并不意味着 JSON 不能与其他语言一起使用。

事实上，它适用于 PHP、Perl、Python、Ruby、Java、Ajax 等等。

如何从json文件读取数据，并将其转换为JavaScript对象?

我们有两种方法：

1. 使用 eval 函数。但是出于安全考虑不建议使用

   服务器会将恶意数据发送到客户端，然后在客户端脚本中进行 eval，会造成不良影响。

2. 使用 JSON 解析器。没有安全问题，而且比 eval 更快。下面是它的使用方法:

   var leeasy = {
   "name" : "Leeasy",
   "age" : "18",
   "website" : "csdn"
   };
   

现在，我们使用 JSON 解析器将上述 JSON 对象转换为 javascript 对象：

var myJSObject = JSON.parse(leeasy);

如何将JavaScript对象转换成JSON文本?

通过使用 stringify 方法

var jsonText= JSON.stringify(myJSObject);