JSON基础

JSON (用于接收 web 服务端的数据)

• JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
• JSON 是存储和交换文本信息的语法。
• JSON 类似 XML，但它比 XML 更小、更快、更易解析。
• JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。
• JSON 文件的文件类型是 “.json” 。JSON 文本的 MIME 类型是 “application/json” 。(http返回的请求中设置返回格式为json就实用了"Content-type":"application/json")

---

JSON 与 XML 的异同

• 实例展示区别
• JSON 和 XML 都用于接收 web 服务端的数据。
• JSON 与 XML 的相同之处：
  • JSON 和 XML 数据具有“自我描述性”，易于理解（人类可读）
  • JSON 和 XML 数据具有层级结构（值中存在值）
  • JSON 和 XML 数据可通过 JavaScript 进行解析，可以被大多数编程语言使用
  • JSON 和 XML 数据数据可使用 AJAX 进行传输
• JSON 相比 XML 的不同之处：
  • JSON 不需要结束标签
  • JSON 更短
  • JSON 读写的速度更快
  • JSON 能够使用内建的 JavaScript eval() 方法进行解析
  • JSON 可以使用数组
  • JSON 不使用保留字
• 最大的不同：
  • XML 需要使用 XML 解析器来解析，JSON 可以使用标准的 JavaScript 函数来解析：
    • JSON.parse(): 将一个 JSON 字符串转换为 JavaScript 对象。
    • JSON.stringify(): 于将 JavaScript 值转换为 JSON 字符串。

---

为什么使用 JSON

• XML 比 JSON 更难解析。JSON 可以直接使用现有的 JavaScript 对象解析。对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用：
• 使用 XML 需要:
  1. 读取 XML 文档
  2. 使用 XML DOM 来循环遍历文档
  3. 读取值并存储在变量中
• 使用 JSON：
  1. 读取 JSON 字符串
  2. JSON.Parse() 解析 JSON 字符串

---

JSON 语法

• JSON 语法是 JavaScript 语法的子集。
• JSON 属性必须加双引号,值不可以是 方法函数、undefined以及NAN
• 数据在名称/值对中
• 数据由逗号分隔
• JSON 的两种结构：
  • 花括号保存对象
  • 方括号保存数组

JSON 书写格式

• JSON 数据的书写格式是：名称/值对，也就是 "名称":值
• 注意JSON对象需要使用花括号
  • 比如：{"name" : "我就是你想放进去的值呀"}等价于这条 JavaScript 语句：name = "我就是你想放进去的值呀"

JSON 值

• JSON 值可以是（注意JSON对象需要使用花括号）：
  数字（整数或浮点数）:{"age":233}
  字符串（在双引号中）:'{"name":"aaaaaa"}'【注意：由于属性必须使用双引号，所以字符串只能使用单引号】
  逻辑值（true 或 false）:{"flag":true}
  数组（在中括号中）:例子在下面
  对象（在大括号中）:例子在下面
  null:{"name":null}

---

JSON 对象

• 可参考菜鸟教程

语法

• JSON 对象放在大括号{}中。
• 对象可以包含多个 key/value（键/值）对，key 和 value 中使用冒号:分割。
• key 必须是字符串，value 可以是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。
• 多个 key/value对 之间使用逗号,分割。
• 例子：

  { 
      "name":"菜鸟教程" , 
      "url":"www.runoob.com" 
  }

  • 与之等价的 JavaScript 语句：

    name = "菜鸟教程"
    url = "www.runoob.com"

---

访问对象值(.或[])

• 可以**使用点号.**来访问对象的值：

  var myObj, x;
  myObj = { "name":"hlz", "alexa":10000, "site":null };
  x = myObj.name;//hlz

• 也可以**使用中括号[]**来访问对象的值(记住带上双引号，中括号是通过变量取值用的)：

  var myObj, x;
  myObj = { "name":"hlz", "alexa":10000, "site":null };
  x = myObj["name"];//hlz

---

循环对象的属性与值( for-in )

• 注意：在 for-in 循环对象的属性时，不能使用.来访问属性的值（循环不到）！需要使用中括号[]来访问属性的值。
  • 原因：遍历出的属性名是变量不是常量，所以需要使用obj[属性名变量]这种方式读取属性值
• 使用 for-in 来循环对象的属性：

  <script>
      var myObj = { "name":"runoob", "alexa":10000, "site":null };
      for (x in myObj) {
          document.getElementById("demo").innerHTML += x + "<br>";//name alexa site
      }
  </script>

• 在 for-in 循环对象的属性时，使用中括号[]来访问属性的值(注意这里不能使用.来访问属性的值)：

  <script>
      var myObj = { "name":"runoob", "alexa":10000, "site":null };
      for (x in myObj) {
          document.getElementById("demo").innerHTML += myObj[x] + "<br>";//runoob 10000 null
      }
  </script>

---

嵌套 JSON 对象

• JSON 对象中可以包含另外一个 JSON 对象：

  myObj = {
      "name":"hlz",
      "alexa":10000,
      "sites": {
          "site1":"www.baidu.com",
          "site2":"m.baidu.com",
          "site3":"c.baidu.com"
      }
  }

• 可以使用点号.或者中括号[]来访问嵌套的 JSON 对象:

  x = myObj.sites.site1;//www.baidu.com
  x = myObj.sites["site1"];//www.baidu.com
  x = myObj["sites"]["site1"];//www.baidu.com
  x = myObj["sites"].site1;//www.baidu.com

  实际运行起来的例子

---

修改对象的值(.或[])

• 使用**点号.**来修改 JSON 对象的值,比如修改myObj对象中的sites对象的site1属性值：myObj.sites.site1 = "www.google.com";(例子)
• 可以使用**中括号[]**来修改 JSON 对象的值：myObj.sites["site1"] = "www.google.com";(例子)
  (至于访问嵌套对象的值的多种方法可以看上面“嵌套 JSON 对象”)

---

删除对象属性(delete 关键字)

• 可以使用 delete 关键字来删除 JSON 对象的属性。
• 比如：删除myObj对象中的sites对象的site1属性值（不同的调用属性值方法都是可以的）：
  delete myObj.sites.site1;(例子)或者delete myObj.sites["site1"](例子)

---

JSON 数组

语法

• JSON 数组放在中括号中，数组值（数组元素）必须是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。
• 数组元素之间使用逗号分隔。(JSON文件中可以只放数组)
• JavaScript 中，数组值可以是 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null），也可以是 JavaScript 的表达式，包括函数，日期，及 undefined
• 例子：
  JSON文件中可以只放数组：

  [ "Google", "Runoob", "Taobao" ]

• JSON对象属性的值可以是一个数组：

  {
  "name":"网站",
  "num":3,
  "sites":[ "Google", "Runoob", "Taobao" ]
  }

  可以使用索引值来访问数组(完整例子)：

  x = myObj.sites[0];//Google

• 数组元素为对象的数组例子：
  • JSON 数组放在中括号中，数组可包含多个对象,数据由逗号分隔：

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

• 在上面的例子中，对象 “sites”是包含三个对象的数组,每个对象代表一条关于某个网站（name、url）的记录。

---

循环数组（for-in或for 循环）

• 可以使用 for-in 来访问数组(例子)：

  for (i in myObj.sites) {
      x += myObj.sites[i] + "<br>";
  }

• 也可以使用 for 循环(例子)：

  for (i = 0; i < myObj.sites.length; i++) {
      x += myObj.sites[i] + "<br>";
  }

---

嵌套 JSON 对象中的数组

• JSON 对象中数组可以包含另外一个数组，或者另外一个 JSON 对象,但是记住了：JSON值可以是任意符合要求的（可以是另外一个数组/对象），但是JSON名称必须是字符串！
• 例子：

  myObj = {
      "name":"网站",
      "num":3,
      "sites": [
          { "name":"Google", "info":[ "Android", "Google 搜索", "Google 翻译" ] },
          { "name":"Runoob", "info":[ "菜鸟教程", "菜鸟工具", "菜鸟微信" ] },
          { "name":"Taobao", "info":[ "淘宝", "网购" ] }
      ]
  }

  可以使用 for-in 来循环访问每个数组，形成name为标题、info为内容的三部分展示数据：

  for (i in myObj.sites) {
      x += "<h1>" + myObj.sites[i].name + "</h1>";
      for (j in myObj.sites[i].info) {
          x += myObj.sites[i].info[j] + "<br>";
      }
  }

  完整例子

---

修改数组值

• 可以使用索引值来修改数组值(完整例子)：

  myObj.sites[1] = "Github";

---

删除数组元素

• 可以使用 delete 关键字来删除数组元素(完整例子)：

  delete myObj.sites[1];

---

JSON 使用 JavaScript 语法

• JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。
• 由于这种相似性，无需解析器，JavaScript 程序能够使用内建的 eval() 函数，用 JSON 数据来生成原生的 JavaScript 对象。
• 但使用 JSON 解析器将 JSON 转换为 JavaScript 对象是更安全的做法。
• 具体可见《JSON方法》
• 可参考JSON.parse()、JSON.stringify()

---