JSON教程基础

扫码查看

一.基础简介

二.JSON 语法

三.JSON 使用

一.基础简介

1.JSON:JavaScript 对象表示法(JavaScript Object Notation)。 JSON 是存储和交换文本信息的语法。类似 XML。 JSON 比 XML 更小、更快,更易解析

2.JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C、C++、C#、Java、JavaScript、Perl、Python等)。这些特性使JSON成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络传输速率)。从Web API和服务端编程语言到NoSQL数据库和客户端框架,都有JSON的身影。在不同平台间传递数据方面,JSON已成为XML强有力的替代者。

JSON 实例

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

这个 employee 对象是包含 3 个员工记录(对象)的数组。

什么是 JSON ?

  • JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)
  • JSON 是轻量级的文本数据交换格式
  • JSON 独立于语言 *
  • JSON 具有自我描述性,更易理解

JSON 使用 Javascript语法来描述数据对象,但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态(PHPJSP.NET)编程语言都支持JSON。

  • JSON 是 JavaScript Object Notation 的缩写。
  • 这个格式由 Douglas Crockford 提出。
  • 被设计用于可读的数据交换。
  • 它是从 JavaScript 脚本语言中演变而来。
  • 文件名扩展是 .json
  • JSON 的网络媒体类型是 application/json
  • 统一标示符类型(Uniform Type Identifier)是 public.json。

JSON 使用范围

  • 用于编写基于 JavaScript 应用程序,包括浏览器扩展和网站。
  • JSON 格式可以用于通过网络连接序列化和传输结构化数据。
  • 主要用于在服务器和 Web 应用程序之间传输数据。
  • Web 服务和 APIs 可以使用 JSON 格式提供公用数据。
  • 还可以用于现代编程语言中。

JSON 特点

  • JSON 容易阅读和编写。
  • 它是一种轻量级的基于文本的交换格式。
  • 语言无关。

JSON 简单示例

鉴于书籍数据有语言和版本信息,下面的例子展示了使用 JSON 存储书籍信息:

{
"book": [
{
"id":"01",
"language": "Java",
"edition": "third",
"author": "Herbert Schildt"
},
{
"id":"07",
"language": "C++",
"edition": "second",
"author": "E.Balagurusamy"
}]
}

理解上述程序之后我们来看另外一个例子,让我们把下面的代码保存为 json.htm

<html>
<head>
<title>JSON example</title>
<script language="javascript" > var object1 = { "language" : "Java", "author" : "herbert schildt" };
document.write("<h1>JSON with JavaScript example</h1>");
document.write("<br>");
document.write("<h3>Language = " + object1.language+"</h3>");
document.write("<h3>Author = " + object1.author+"</h3>"); var object2 = { "language" : "C++", "author" : "E-Balagurusamy" };
document.write("<br>");
document.write("<h3>Language = " + object2.language+"</h3>");
document.write("<h3>Author = " + object2.author+"</h3>"); document.write("<hr />");
document.write(object2.language + " programming language can be studied " +
"from book written by " + object2.author);
document.write("<hr />"); </script>
</head>
<body>
</body>
</html>

实例

<!DOCTYPE html>
<html>
<body>
<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> </body>
</html>

与 XML 相同之处

  • JSON 是纯文本
  • JSON 具有"自我描述性"(人类可读)
  • JSON 具有层级结构(值中存在值)
  • JSON 可通过 JavaScript 进行解析
  • JSON 数据可使用 AJAX 进行传输

与 XML 不同之处

  • 没有结束标签
  • 更短
  • 读写的速度更快
  • 能够使用内建的 JavaScript eval() 方法进行解析
  • 使用数组
  • 不使用保留字

为什么使用 JSON?

对于 AJAX 应用程序来说,JSON 比 XML 更快更易使用:

使用 XML

  • 读取 XML 文档
  • 使用 XML DOM 来循环遍历文档
  • 读取值并存储在变量中

使用 JSON

  • 读取 JSON 字符串
  • 用 eval() 处理 JSON 字符串

有关JSON的介绍到此为止,在接下来的章节中,我们将开始学习与使用JSON!

二.JSON 语法

我们来快速浏览一下 JSON 的基本语法。JSON 的语法基本上可以视为 JavaScript 语法的一个子集,包括以下内容:

  • 数据使用名/值对表示。
  • 使用大括号保存对象,每个名称后面跟着一个 ':'(冒号),名/值对使用 ,(逗号)分割。
  • 使用方括号保存数组,数组值使用 ,(逗号)分割。
    {
    "book": [
    {
    "id":"01",
    "language": "Java",
    "edition": "third",
    "author": "Herbert Schildt"
    },
    {
    "id":"07",
    "language": "C++",
    "edition": "second"
    "author": "E.Balagurusamy"
    }]
    }

    JSON 支持以下两种数据结构:

    • 名/值对集合: 这一数据结构由不同的编程语言支持。
    • 有序的值列表: 包括数组,列表,向量或序列等等。

    JSON 语法规则

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

    JSON 语法规则不复杂,它参考了 C 语言家族的一些习惯,学习起来并不会感到陌生。

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

    JSON 名称/值对

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

    名称/值对包括字段名称(在双引号中),后面写一个冒号,然后是值:

    "firstName" : "John"

    JSON 值

    JSON 值可以是:

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

      JSON 对象

      JSON 对象在花括号中书写:

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

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

      JSON 数组

      JSON 数组在方括号中书写:

      数组可包含多个对象:

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

      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;

      可以像这样修改数据:

      employees[0].firstName = "Jonatan";

      三.JSON 使用

    • JSON 使用

      JSON经常应用到的场景是:在后台应用程序中将响应数据封装成JSON格式,传到前台页面之后,需要将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 + ")");
<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 解析器

JSON教程基础-LMLPHP  eval() 函数可编译并执行任何 JavaScript 代码。这隐藏了一个潜在的安全问题。

使用 JSON 解析器将 JSON 转换为 JavaScript 对象是更安全的做法。JSON 解析器只能识别 JSON 文本,而不会编译脚本。

在浏览器中,这提供了原生的 JSON 支持,而且 JSON 解析器的速度更快。

较新的浏览器和最新的 ECMAScript (JavaScript) 标准中均包含了原生的对 JSON 的支持。

Web 浏览器支持Web 软件支持
  • Firefox (Mozilla) 3.5
  • Internet Explorer 8
  • Chrome
  • Opera 10
  • Safari 4
  • jQuery
  • Yahoo UI
  • Prototype
  • Dojo
  • ECMAScript 1.5
04-14 09:35
查看更多