Web开发——JavaScript基础(JSON教程)

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

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

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

1、什么是 JSON ?

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

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

2、JSON - 转换为 JavaScript 对象

  JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。

  由于这种相似性,无需解析器,JavaScript 程序能够使用内建的 eval() 函数,用 JSON 数据来生成原生的 JavaScript 对象。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8
 9         <!--引用jQuery库,src可以直接指向本地下载的jQery库-->
10         <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">-->
11         <script src="jquery-3.3.1.js"></script>
12
13     </head>
14
15     <body class="siblings">
16
17         <h2>在 JavaScript 中创建 JSON 对象</h2>
18         <p>
19             Name: <span id="jname"></span><br />
20             Age: <span id="jage"></span><br />
21             Address: <span id="jstreet"></span><br />
22             Phone: <span id="jphone"></span><br />
23         </p>
24
25         <script type="text/javascript">
26             var JSONObject = {
27                 "name": "Bill Gates",
28                 "street": "Fifth Avenue New York 666",
29                 "age": 56,
30                 "phone": "555 1234567"
31             };
32
33             document.getElementById("jname").innerHTML = JSONObject.name;
34             document.getElementById("jage").innerHTML = JSONObject.age;
35             document.getElementById("jstreet").innerHTML = JSONObject.street;
36             document.getElementById("jphone").innerHTML = JSONObject.phone;
37         </script>
38
39     </body>
40 </html>        

  输出结果:

在 JavaScript 中创建 JSON 对象

Name: Bill Gates
Age: 56
Address: Fifth Avenue New York 666
Phone: 555 1234567

3、类似 XML

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

4、相比 XML 的不同之处

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

5、为什么使用 JSON?

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

使用 XML

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

使用 JSON

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

6、JSON 语法

6.1 JSON语法规则

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

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

6.2 JSON 名称/值对

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

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

1 "firstName" : "John"

这很容易理解,等价于这条 JavaScript 语句:

1 firstName = "John"

6.3 JSON 值

  JSON 值可以是:

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

6.4 JSON 对象

  JSON 对象在花括号中书写:

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

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

  这一点也容易理解,与这条 JavaScript 语句等价:

1 firstName = "John"
2 lastName = "Doe"

6.5 JSON 数组

  JSON 数组在方括号中书写:

  数组可包含多个对象:

1 {
2   "employees": [
3   { "firstName":"John" , "lastName":"Doe" },
4   { "firstName":"Anna" , "lastName":"Smith" },
5   { "firstName":"Peter" , "lastName":"Jones" }
6   ]
7 }

  在上面的例子中,对象 "employees" 是包含三个对象的数组。每个对象代表一条关于某人(有姓和名)的记录。

6.6 JSON 使用 JavaScript 语法

  因为 JSON 使用 JavaScript 语法,所以无需额外的软件就能处理 JavaScript 中的 JSON。

  通过 JavaScript,您可以创建一个对象数组,并像这样进行赋值:

1 var employees  = [
2     { "firstName":"Bill" , "lastName":"Gates" },
3     { "firstName":"George" , "lastName":"Bush" },
4     { "firstName":"Thomas" , "lastName": "Carter" }
5 ];

  访问 JavaScript 对象数组中的第一项:

1 employees[0].lastName;
2
3 // 返回的内容是:
4 Gates
5
6 // 修改数据
7 employees[0].lastName = "Jobs";

  举例:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8
 9         <!--引用jQuery库,src可以直接指向本地下载的jQery库-->
10         <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">-->
11         <script src="jquery-3.3.1.js"></script>
12
13     </head>
14
15     <body class="siblings">
16
17         <h3>通过 JSON 字符串来创建对象</h3>
18         <p>First name: <span id="fname"></span></p>
19
20         <script type="text/javascript">
21             var employees = [
22                 { "firstName":"Bill" , "lastName":"Gates" },
23                 { "firstName":"George" , "lastName":"Bush" },
24                 { "firstName":"Thomas" , "lastName": "Carter" }
25             ];
26
27             document.getElementById("fname").innerHTML = employees[0].firstName;
28         </script>
29
30     </body>
31 </html>        

  输出结果:

通过 JSON 字符串来创建对象

First name: Bill

6.7 JSON 文件

  • JSON 文件的文件类型是 ".json"
  • JSON 文本的 MIME 类型是 "application/json"

原文地址:https://www.cnblogs.com/zyjhandsome/p/9795030.html

时间: 2024-08-29 01:59:24

Web开发——JavaScript基础(JSON教程)的相关文章

Web开发——JavaScript基础(数组)

. 当前参考学习<JavaScript语言精粹> 1.数组字面量 一个数组字面量是在一对方括号中包围零个或多个用逗号分隔的值的表达式.数组字面量可以出现在任何表达式可以出现的地方.数组的第一个值将获得属性名'0',第二个值将获得属性名'1',依次类推: 1 // numbers继承来自Array.prototype,所以numbers继承了大量有用的方法. 2 // 同时numbers也有一个诡异的lenght属相,而numbers_object则(见下文中)没有 3 var empty =

2015年10个最佳Web开发JavaScript库

2015年10个最佳Web开发JavaScript库 现在的互联网可谓是无所不有,有大量的JavaScript项目开发工具充斥于网络中.我们可以参考网上的指导来获取构建代码项目的各种必要信息.如果你是搞Web开发的,那么大多更喜欢支持前端开发的JavaScript.此脚本语言使用相对比较容易,并能为网站和Web应用创造了有趣的用户界面.下面是10个最佳的可用于Web项目开发的JavaScript库. 1. IO.js: IO.js是一个以Chrome V8  runtime为引擎的JavaScr

web前端javaScript基础第六天

目前在从事前端工作,特别总结javaScript基础知识供大家学习,本人特总结一下使用方法献给目前正在学习web前端的小伙伴们,希望你们在前端领域闯出属于自己的一片天空来,需要sublime软件安装包的或者前端资料的,可以加我创建的前端群 937268047 函数:变量作用域:js只有函数能够关住变量的作用域全局变量局部变量:在函数内部声明的变量,只能在函数内部使用 函数的形参是局部变量,形参只能在函数内部使用全局变量作用:一个变量可以被多个函数改变,这个变量一定是全局变量(信号量) 函数作用域

web前端javaScript基础教程

大家好,我是轻风乍起,本人从事前端8年了,总结了很多学习资料,有时间我会普及一些入门和提升建议,思想提升了,路线明确了自然就好了,于是就整理了下这篇学习路线文章,干货福利内容 在文末↓ 一,循环语句1.1 累加器累加器:我们不想输出所有的可能值,只想输出一个最后满足条件的总数.累加器:1累加器是一个变量,必须书写在for循环外面.2累加器初始值是0,有一个满足条件的结果累加器自加13累加器最终结果也是在for外面输出 案例:求一个正整数约数总个数.1// 获取数字2var num = parse

JavaScript基础入门教程(四)

说明 前面三篇博客介绍了js中基本的知识点,包括变量类型及其转换.表达式.运算符等小知识点,这篇博客主要讲的是对象.如果你学过java等语言,你也许在下文的阅读中发现在js中的对象与java中的对象存在一定的区别. 相关术语说明 一.对象中成员变量的"属性特性" ①可写:表明该属性可以设置其值. ②可枚举:表明是否可以通过for/in循环返回该属性. ③可配置:表明是否可以删除或者修改该属性. 注:关于for/in等语句的说明,第一篇博文就说过,本系列教程是建立在读者对基本的编程有一定

Web开发——HTML基础(HTML事件属性)

1.全局事件属性 HTML 4 增加了使事件在浏览器中触发动作的能力,比如当用户点击元素时启动 JavaScript. 如需学习更多有关事件编程的知识,请访问我们的 JavaScript 教程. 下面列出了添加到 HTML 元素以定义事件动作的全局事件属性. ?= HTML5 中新的事件属性. 2.Window 事件属性 针对 window 对象触发的事件(应用到 <body> 标签): 属性 值 描述 onafterprint script 文档打印之后运行的脚本. onbeforeprin

JavaScript基础入门教程(二)

说明 前一篇博客介绍了js以及一些关于js基本类型的简单知识,本篇博客将详细介绍js的基础类型,捎带介绍对象类型,更详细的对象类型的说明将后续再讲. js中类型的说明 js中的类型分为基本类型和对象类型,其中基本类型包括:①数字.②字符串.③布尔值.此外还有两个原始值null和undefined.其中对象包括数组对象.函数对象和普通对象,普通对象是"命名值"的无序集合,而数组对象是带编号的值的有序集合.JavaScript核心还定义了三种有用的类:日期(Data)类.正则(RegExp

Web开发——JavaScript库(jQuery 语法 / 选择器 / 事件)

通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions). 1.jQuery 语法 1.1 jQuery语法举例 1.1.1 $(this).hide() 演示 jQuery hide() 函数,隐藏当前的 HTML 元素. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta h

android开发零基础入门教程

最实用.最容易上手的android课程 很多java学习者都想尽快掌握android开发的流程!为此,我们推出了12小时系列课程,学习者只需要两天时间即可掌握android开发的基本知识,跨入android开发的大门,如想深入学习,请关注课程更新:授课时,我们也注重展示android开发中的实际技巧,课上代码都由老师一行一行实际敲出,真实展现了android开发中的细节. 在学习本课程时,你应该掌握基本java开发知识.数据库知识.XML技术等.这些技术我们再12小时学android课程中不再赘