JSON学习笔记(W3CSchool)

本文涉及的产品
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: JSON学习笔记(W3CSchool)

## 第一章 JSON教程

####1.1 概述

* JSON:JavaScript对象表示法(JavaScript Object Notation)

* JSON是存储和交换文本信息的语法。类似XML。

* JSON比XML更小、更快、更易解析。

每一章用到的实例

```

/*

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

*/

{

 "employees":[

   {"firstName":"Bill","lastName":"Gates"},

   {"firstName":"Alen","lastName":"Chen"},

   {"firstName":"Brose","lastName":"Li"}

 ]

}

```

####1.2 什么是JSON

* JSON值得是JavaScript对象表示法(JavaScript Object Notation)

* JSON是轻量级的文本数据交换格式

* JSON独立于语言

* JSON具有自我描述性,更容易理解

**JSON使用JavaScript语法来描述数据对象,但是JSON任然独立于语言和平台。JSON解析器和JSON库支持许多不同语言**

##第二章 简介

####2.1 类似XML

* JSON是纯文本

* JSON具有“自我描述性”(人类可读)

* JSON 具有层级结构(值中存在值)

* JSON可通过JavaScript进行解析

* JSON数据可使用AJAX进行传输

####2.2 相比XML不同之处

* 没有结束标签

* 更短

* 读写的速度更快

* 能够使用内建的JavaScript eval()方法进行解析*

* 使用数组

* 不适用保留字

####2.3 为什么使用JSON

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

* **使用XML**

 * 读取XML文档

 * 使用XML DOM来循环遍历文档

 * 读取值并存储在变量中

* **使用JSON**

 * 读取JSON字符串

 * 用eval()处理JSON字符串

试一试:

```

   <!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title>在JavaScript中创建JSON对象</title>

</head>

<body>

<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 language="JavaScript">

   var JSONObject = {

       "name":"Bill Getes",

       "street":"Fifth Avenue 666",

       "age":88,

       "phone":"123321123"

   };

   document.getElementById("jname").innerHTML = JSONObject.name;

   document.getElementById("jstreet").innerHTML = JSONObject.street;

   document.getElementById("jage").innerHTML = JSONObject.age;

   document.getElementById("jphone").innerHTML = JSONObject.phone;

</script>

</body>

</html>

```

界面结果:

![](http://upload-images.jianshu.io/upload_images/2789632-44f0a3504c4fd1c7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

###### 注意:

起初我将js代码写在了head里面,并不会得到想要的结果。由于html的执行顺序造成的。当执行获取id时,页面还未加载到该标签,所以此时的获取id是获取不到的。所以**建议,把js写在body里的底部位置。**

这里采用对象.属性.字段的方式要比使用xml里的查找要简单的多。

##第三章 JSON语法

**JSON语法是JavaScript语法的子集。**

####3.1 JSON语法规则

* 数据在名称/值中

* 数据由逗号分隔

* 花括号保存对象

* 方括号保存数组

####3.2 JSON名称/值对(“名称-值”对)

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

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

```

"name":"Bill Getes"

```

等价于JavaScript语句:

```

name = "Bill Getes";

```

####3.3 JSON 值

* 数字(整数或者浮点数)

* 字符串(在双引号中)

* 逻辑值(true or false)

* 数组(在方括号中)

* 对象(在花括号中)

* null

####3.4 JSON对象

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

```

   {"firstName":"Bill","lastName":"Gates"},

   {"firstName":"Alen","lastName":"Chen"},

   {"firstName":"Brose","lastName":"Li"}

```

####3.5 JSON数组

```

{

 "employees":[

   {"firstName":"Bill","lastName":"Gates"},

   {"firstName":"Alen","lastName":"Chen"},

   {"firstName":"Brose","lastName":"Li"}

 ]

}

```

####3.5 JSON 文件

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

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

##第四章 JSON使用

####4.1 把JSON文本转换为JavaScript对象

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

```

<html>

<body>

<h2>通过 JSON 字符串来创建对象</h3>

<p>

First Name: <span id="fname"></span><br />  

Last Name: <span id="lname"></span><br />  

</p>  

<script type="text/javascript">

var txt = '{"employees":[' +

'{"firstName":"Bill","lastName":"Gates" },' +

'{"firstName":"George","lastName":"Bush" },' +

'{"firstName":"Thomas","lastName":"Carter" }]}';

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

document.getElementById("fname").innerHTML=obj.employees[1].firstName  

document.getElementById("lname").innerHTML=obj.employees[1].lastName  

</script>

</body>

</html>

```

![](http://upload-images.jianshu.io/upload_images/2789632-57448e19731847c5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

由于 JSON 语法是 JavaScript 语法的子集,JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。

eval() 函数使用的是 JavaScript 编译器,可解析 JSON 文本,然后生成 JavaScript 对象。必须把文本包围在括号中,这样才能避免语法错误:

```

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

```

####4.2 JSON 解析器

提示:eval() 函数可编译并执行任何 JavaScript 代码。这隐藏了一个潜在的安全问题。

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

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

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

目录
相关文章
|
26天前
|
XML JSON 数据可视化
数据集学习笔记(二): 转换不同类型的数据集用于模型训练(XML、VOC、YOLO、COCO、JSON、PNG)
本文详细介绍了不同数据集格式之间的转换方法,包括YOLO、VOC、COCO、JSON、TXT和PNG等格式,以及如何可视化验证数据集。
32 1
数据集学习笔记(二): 转换不同类型的数据集用于模型训练(XML、VOC、YOLO、COCO、JSON、PNG)
|
JSON 前端开发 数据格式
前端学习笔记202306学习笔记第三十七天-js-认识json数据2
前端学习笔记202306学习笔记第三十七天-js-认识json数据2
48 0
|
6月前
|
JSON 前端开发 Java
Spring mvc-文件上传与JSON-学习笔记
Spring mvc-文件上传与JSON-学习笔记
68 2
|
JSON 前端开发 数据格式
前端学习笔记202307学习笔记第六十天-json server的介绍和服务搭建1
前端学习笔记202307学习笔记第六十天-json server的介绍和服务搭建1
68 0
|
JSON 前端开发 数据格式
前端学习笔记202306学习笔记第三十七天-js-认识json数据1
前端学习笔记202306学习笔记第三十七天-js-认识json数据1
58 0
|
JSON 前端开发 数据格式
前端学习笔记202306学习笔记第三十七天-js-认识json数据3
前端学习笔记202306学习笔记第三十七天-js-认识json数据3
59 0
|
JSON 数据格式 Python
python读取exlce并转为json的学习笔记
python读取exlce并转为json的学习笔记
83 0
|
JSON 数据格式
java202303java学习笔记第四十六天-请求-日期参数&json参数1
java202303java学习笔记第四十六天-请求-日期参数&json参数1
204 0
|
JSON 数据格式
java202303java学习笔记第四十六天-请求-日期参数&json参数2
java202303java学习笔记第四十六天-请求-日期参数&json参数2
59 0
|
JSON 数据格式
java202304java学习笔记第六十二天-ssm-页面跳转-回显数据json格式字符串
java202304java学习笔记第六十二天-ssm-页面跳转-回显数据json格式字符串
78 0