jQuery简介

简介: jQuery简介

JSON,即JavaScript对象表示法,是一种用于共享数据的格式。顾名思义,JSON 源自 JavaScript 编程语言,但也可被许多其他语言使用,包括 Python、Ruby、PHP 和 Java。JSON 通常发音为“杰森”。

JSON 也具有可读性强、轻量级、是 XML 的良好替代品,并且需要更少的格式化。本信息指南将讨论 JSON 文件中可用的数据,以及该格式的一般结构和语法。

语法和结构理解

JSON 在独立存在时使用 .json 扩展名,当它在另一个文件格式中定义时(如 .html),它可以作为 JSON 字符串出现在引号内,或者可以作为分配给变量的对象。该格式在 Web 服务器和客户端或浏览器之间传输。

JSON 对象 是一种键-值数据格式,通常用花括号表示。在使用 JSON 时,你可能会在 .json 文件中遇到 JSON 对象,但它们也可以存在于程序上下文中作为 JSON 对象或字符串。

以下是 JSON 对象的示例:

{
  "first_name" : "Sammy",
  "last_name" : "Shark",
  "location" : "Ocean",
  "online" : true,
  "followers" : 987 
}

尽管这只是一个简短的示例,JSON 可能会有很多行,但这个示例表明,该格式通常设置为两个花括号(或大括号),分别用 { } 表示,并且键-值对填充在它们之间的空间中。大多数在 JSON 中使用的数据最终都被封装在 JSON 对象中。

键-值对 之间用冒号分隔,如 "key" : "value"。每个键-值对之间用逗号分隔,因此 JSON 中间部分列出如下:"key" : "value", "key" : "value", "key": "value"。在前面的示例中,第一个键-值对是 "first_name" : "Sammy"

JSON 位于冒号的左侧。它们需要用双引号括起来,如 "key",并且可以是任何有效的字符串。在每个对象中,键需要是唯一的。这些键字符串可以包括空格,如 "first name",但这可能会使编程时更难访问,因此最好使用下划线,如 "first_name"

JSON 位于冒号的右侧。在粒度级别上,这些值需要是以下六种数据类型之一:

  • 字符串
  • 数字
  • 对象
  • 数组
  • 布尔值(true 或 false)
  • null

在更广泛的层面上,值也可以由 JSON 对象或数组的复杂数据类型组成,这将在下一节中讨论。

传递给 JSON 的每种数据类型都将保持其自己的语法,这意味着字符串将用引号括起来,但数字则不会。

.json 文件中,通常会得到一个跨越多行的格式,但 JSON 也可以写在一行中,如下例所示:

{ "first_name" : "Sammy", "last_name": "Shark",  "online" : true, }

这在另一种文件类型中或在遇到 JSON 字符串时更常见。

将 JSON 格式写在多行上通常会使其更易读,特别是在处理大型数据集时。因为 JSON 忽略其元素之间的空格,你可以在冒号和键-值对之间留出空格,以使数据更易读:

{ 
  "first_name"  :  "Sammy", 
  "last_name"   :  "Shark", 
  "online"      :  true 
}

重要的是要记住,尽管它们看起来相似,但 JSON 对象与JavaScript 对象的格式不同,因此尽管你可以在 JavaScript 对象中使用函数,但你不能将它们用作 JSON 中的值。JSON 最重要的属性是它可以在所有参与的语言都能处理的格式中在编程语言之间轻松传输。相比之下,JavaScript 对象只能通过 JavaScript 编程语言直接使用。

JSON 可以变得越来越复杂,其中包括由嵌套对象和数组组成的层次结构。接下来,你将了解更多关于这些复杂结构的内容。

在 JSON 中使用复杂类型

JSON 可以存储嵌套对象和嵌套数组的 JSON 格式。这些对象和数组将作为分配给键的值传递,并且可能由键-值对组成。

嵌套对象

在以下 users.json 文件中,对于每个四个用户("sammy""jesse""drew""jamie"),都有一个嵌套的 JSON 对象作为每个用户的值,其中包含与每个用户相关的 "username""location" 的嵌套键。以下代码块中的每个用户条目都是嵌套 JSON 对象的示例:

{ 
  "sammy" : {
    "username"  : "SammyShark",
    "location"  : "Indian Ocean",
    "online"    : true,
    "followers" : 987
  },
  "jesse" : {
    "username"  : "JesseOctopus",
    "location"  : "Pacific Ocean",
    "online"    : false,
    "followers" : 432
  },
  "drew" : {
    "username"  : "DrewSquid",
    "location"  : "Atlantic Ocean",
    "online"    : false,
    "followers" : 321
  },
  "jamie" : {
    "username"  : "JamieMantisShrimp",
    "location"  : "Pacific Ocean",
    "online"    : true,
    "followers" : 654
  }
}

在这个示例中,整个过程中都使用花括号来形成一个嵌套的 JSON 对象,其中包含了每个四个用户的相关用户名和位置数据。与任何其他值一样,使用对象时,逗号用于分隔元素。

嵌套数组

数据也可以通过使用作为值传递的 JavaScript 数组在 JSON 格式中进行嵌套。JavaScript 在其数组类型的两端使用方括号 [ ]。数组是有序集合,可以包含不同数据类型的值。

例如,当处理可以分组在一起的大量数据时,可以使用数组,比如当一个单一用户关联有各种网站和社交媒体资料时。

使用第一个嵌套数组,代表 "Sammy" 的用户资料可能如下所示:

{ 
  "first_name" : "Sammy",
  "last_name" : "Shark",
  "location" : "Ocean",
  "websites" : [
    {
      "description" : "work",
      "URL" : "https://www.digitalocean.com/"
    },
    {
      "desciption" : "tutorials",
      "URL" : "https://www.digitalocean.com/community/tutorials"
    }
  ],
  "social_media" : [
    {
      "description" : "twitter",
      "link" : "https://twitter.com/digitalocean"
    },
    {
      "description" : "facebook",
      "link" : "https://www.facebook.com/DigitalOceanCloudHosting"
    },
    {
      "description" : "github",
      "link" : "https://github.com/digitalocean"
    }
  ]
}

"websites" 键和 "social_media" 键各自使用数组来嵌套属于 Sammy 的两个网站链接和三个社交媒体资料链接的信息。你可以通过使用方括号来识别这些是数组。

在 JSON 格式中使用嵌套允许你处理更复杂和分层的数据。

将 JSON 与 XML 进行比较

XML,即 eXtensible Markup Language,是一种可以被人类和机器读取的存储可访问数据的方式。XML 格式可在许多编程语言中使用。

在许多方面,XML 与 JSON 类似,但它需要更多的文本,使其变得更长且更耗时来读写。XML 还必须使用 XML 解析器进行解析,而 JSON 可以使用标准函数进行解析。此外,与 JSON 不同,XML 不能使用数组。

以下是 XML 格式的示例:

<users>
    <user>
        <username>SammyShark</username> <location>Indian Ocean</location>
    </user>
    <user>
        <username>JesseOctopus</username> <location>Pacific Ocean</location>
    </user>
    <user>
        <username>DrewSquir</username> <location>Atlantic Ocean</location>
    </user>
    <user>
        <username>JamieMantisShrimp</username> <location>Pacific Ocean</location>
    </user>
</users>

现在,比较相同数据在 JSON 中的呈现:

{"users": [
  {"username" : "SammyShark", "location" : "Indian Ocean"},
  {"username" : "JesseOctopus", "location" : "Pacific Ocean"},
  {"username" : "DrewSquid", "location" : "Atlantic Ocean"},
  {"username" : "JamieMantisShrimp", "location" : "Pacific Ocean"}
] }

JSON 要紧凑得多,而且不需要结束标签,而 XML 需要。此外,XML 没有使用数组,而这个 JSON 示例使用了数组(你可以通过使用方括号来识别)。

如果你熟悉 HTML,你会注意到 XML 在标签使用上与 HTML 相似。虽然 JSON 比 XML 更精简且不冗长,且在许多情况下更快速,包括 AJAX 应用程序,但在决定使用何种数据结构之前,你首先要了解你正在处理的项目类型。

结论

JSON 是一种轻量级格式,使你能够共享、存储和处理数据。作为一种格式,JSON 在 API 中得到了越来越多的支持,包括 Twitter API。JSON 也是 JavaScript 中自然的格式,并且在许多流行的编程语言中有许多可用的实现。你可以在“Introducing JSON”网站上阅读完整的语言支持。

因为你可能不会创建自己的 .json 文件,而是从其他来源获取它们,所以重要的是少考虑 JSON 的结构,而更多地考虑如何最好地在程序中使用 JSON。例如,你可以使用开源工具 Mr. Data Converter 将你在电子表格程序中找到的 CSV 或制表符分隔的数据转换为 JSON。你还可以使用知识共享许可的 utilities-online.info 网站将 XML 转换为 JSON,反之亦然。

最后,当将其他数据类型转换为 JSON,或创建自己的 JSON 时,你可以使用 JSONLint 验证你的 JSON,并在 web 开发环境中使用 JSFiddle 测试你的 JSON。


目录
相关文章
|
2月前
|
XML JSON 前端开发
jQuery - AJAX 简介
jQuery - AJAX 简介
18 0
|
2月前
|
XML JSON 前端开发
jQuery - AJAX 简介
jQuery - AJAX 简介
12 0
|
3月前
|
Web App开发 XML 设计模式
jQuery简介
jQuery简介
41 0
|
5月前
|
JavaScript 前端开发
jQuery 简介
jQuery 简介
56 7
|
5月前
|
JavaScript 前端开发 API
jQuery对象与DOM对象简介及相互转换
jQuery对象与DOM对象简介及相互转换
|
JavaScript 前端开发
前端基础 - JQuery简介
前端基础 - JQuery简介
45 0
|
JavaScript 前端开发 索引
jQuery简介、语法属性及常用选择器
jQuery简介、语法属性及常用选择器
83 0
|
JavaScript
js基础笔记学习292jquery简介1
js基础笔记学习292jquery简介1
76 0
js基础笔记学习292jquery简介1
|
JavaScript 前端开发
Web前端学习:jQuery基础--1【简介和安装、语法使用、三种选选择器的使用(元素、class、id)】(附操作源码)
Web前端学习:jQuery基础--1【简介和安装、语法使用、三种选选择器的使用(元素、class、id)】(附操作源码)
281 0
Web前端学习:jQuery基础--1【简介和安装、语法使用、三种选选择器的使用(元素、class、id)】(附操作源码)
|
JavaScript 前端开发 API
jQuery简介
jQuery简介
239 0