`

深入浅出JSON

阅读更多

JSON定义

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,易于阅读和编写,同时也易于机器解析和生成。它基于ECMA262语言规范(1999-12第三版)中JavaScript编程语言的一个子集。 JSON采用与编程语言无关的文本格式,但是也使用了类C语言(包括C, C++, C#, Java, JavaScript, Perl, Python等)的习惯,这些特性使JSON成为理想的数据交换格式。

JSON的结构基于下面两点

  • 1. "名称/值"对的集合 不同语言中,它被理解为对象(object),记录(record),结构(struct),字典(dictionary),哈希表(hash table),键列表(keyed list)等
  • 2. 值的有序列表 多数语言中被理解为数组(array)

JSON使用

JSON以一种特定的字符串形式来表示 JavaScript 对象。如果将具有这样一种形式的字符串赋给任意一个 JavaScript 变量,那么该变量会变成一个对象引用,而这个对象就是字符串所构建出来的,好像有点拗口,我们还是用实例来说明。

 这里假设我们需要创建一个User对象,并具有以下属性

  • 用户ID
  • 用户名
  • 用户Email

     

  • 您可以使用以下JSON形式来表示User对象:

    {"UserID":11, "Name":"Truly", "Email":"zhuleipro◎hotmail.com"};

     

  • 然后如果把这一字符串赋予一个JavaScript变量,那么就可以直接使用对象的任一属性了。

    完整代码:

    <script>
    
    var User = {"UserID":11, "Name":"Truly", "Email":"zhuleipro◎hotmail.com"};
    alert(User.Name);
    </script>

     

  • 实际使用时可能更复杂一点,比如我们为Name定义更详细的结构,使它具有FirstName和LastName:

    {"UserID":11, "Name":{"FirstName":"Truly","LastName":"Zhu"}, "Email":"zhuleipro◎hotmail.com"}

     

  • 完整代码:

    <script>
    
    var User = {"UserID":11, "Name":{"FirstName":"Truly","LastName":"Zhu"}, "Email":"zhuleipro◎hotmail.com"};
    alert(User.Name.FirstName);
    </script>

     

  • 现在我们增加一个新的需求,我们某个页面需要一个用户列表,而不仅仅是一个单一的用户信息,那么这里就需要创建一个用户列表数组。
    下面代码演示了使用JSON形式定义这个用户列表:

    [
    {"UserID":11, "Name":{"FirstName":"Truly","LastName":"Zhu"}, "Email":"zhuleipro◎hotmail.com"},
    {"UserID":12, "Name":{"FirstName":"Jeffrey","LastName":"Richter"}, "Email":"xxx◎xxx.com"},
    {"UserID":13, "Name":{"FirstName":"Scott","LastName":"Gu"}, "Email":"xxx2◎xxx2.com"}
    ]

     

  • 完整代码:

    <script>
    var UserList = [
    {"UserID":11, "Name":{"FirstName":"Truly","LastName":"Zhu"}, "Email":"zhuleipro◎hotmail.com"},
    {"UserID":12, "Name":{"FirstName":"Jeffrey","LastName":"Richter"}, "Email":"xxx◎xxx.com"},
    {"UserID":13, "Name":{"FirstName":"Scott","LastName":"Gu"}, "Email":"xxx2◎xxx2.com"}
    ];
    alert(UserList[0].Name.FirstName);
    </script>

     

  • 事实上除了使用"."引用属性外,我们还可以使用下面语句:

    alert(UserList[0]["Name"]["FirstName"]); 或者 alert(UserList[0].Name["FirstName"]); 

    现在读者应该对JSON的使用有点认识了,归纳为以下几点:

  • 对象是属性、值对的集合。一个对象的开始于“{”,结束于“}”。每一个属性名和值间用“:”提示,属性间用“,”分隔。
  • 数组是有顺序的值的集合。一个数组开始于"[",结束于"]",值之间用","分隔。
  • 值可以是引号里的字符串、数字、true、false、null,也可以是对象或数组。这些结构都能嵌套。
  • 字符串和数字的定义和C或Java基本一致。

    小节

    本文通过一个实例演示,初步了解了JSON 的强大用途。可以归结如下:

  • JSON 提供了一种优秀的面向对象的方法,以便将元数据缓存到客户机上。
  • JSON 帮助分离了验证数据和逻辑。
  • JSON 帮助为 Web 应用程序提供了 Ajax 的本质。

    参考资料:
    http://www.json.org/

  • 分享到:
    评论

    相关推荐

      深入浅出JSON(PDF)

      深入浅出JSON 深入浅出JSON 深入浅出JSON 深入浅出JSON

      JSON深入浅出用法

      JSON的用法,结合具体的实例,超详细的讲解

      深入浅出Ajax.pdf

      图文并茂,总共478页,高清,文字可复制,从原理的角度详细的讲解了ajax的基本用法,可以打下牢固的基础。另外也讲解了现在流程的json格式数据用法,异步编程,对象模型,xml,表单验证,详细讲解post请求。

      深入浅出Extjs完全版(new)

      Ext是一个很不错的Ajax框架,可以用来开发带有华丽外观的胖客户端应用,使得我们的b/s应用更加具有活力及生命力,提高用户体验。ExtJS是一个用javascript编写,与后台技术无关的前端ajax

      黑马程序员Vue深入浅出视频代码

      这是根据黑马程序员中关于Vue11天课程中,跟着视频编写的代码,一行行跟着写出来的,连备注基本也是和视频一样,用的是...package.json里都有安装清单,http://vue.studyit.io/api这个地址不能用了,已经更换成新的地址

      ELK Stack深入浅出.pptx

      Elasticsearch 全部采用 JSON 接口,Logstash 是 Ruby DSL 设计,都是目前业界最通用的配置语法设计; 检索性能高效。虽然每次查询都是实时计算,但是优秀的设计和实现基本可以达到全天数据查询的秒级响应; 集群...

      Encounter-Node.js:深入浅出Node.js

      深入浅出Node.js 本仓库内容根据腾讯课堂 视频整理的学习笔记,视频教程讲的特别好,配合本仓库的代码测试环境来练习,学习效果更佳. 推荐大家按照目录结构的顺序进行学习,由浅入深,循序渐进,轻松学习 Node 如果觉得...

      Head First Ajax 中文版

      深入浅出Ajax(中文版)和其他深入浅出系列书籍一样,使用许多有趣的视觉刺激来保持我们大脑思考的兴奋。在您读完书中第一章后,不但能够掌握一个基于Ajax的简单应用程序开发,而且还能够了解怎样让一个混乱的项目走上...

      深入浅出NoSQL数据库Cloudant

      IBMCloudant是一种基于jsondocument类型的非关系型(NoSQL)数据库,其具有在云端高效处理高负载、高并发读写的强大特性。从另一个角度来说,Cloudant 还是一个开源的、分布式的数据库,它基于Apache的CouchDB项目...

      深入浅出webpack教程系列_安装与基本打包用法和命令参数详解

      新建文件夹webpack-&gt;再在webpack下面新建demo-&gt;命令行切换到demo目录,使用npm init –yes 初始化项目的package.json文件,然后执行npm install webpack –save-dev 第二步、全局安装webpack(3.5.6版本): npm ...

      BMI源代码程序免费下载

      是 《深入浅出Android--Google手持设备应用程序设计》中的完整BMI源代码,放在这是为了方便大家阅读,程序和书籍相对应,从而快速入门

      动力节点荣姐SpringMVC教程学习文档分享

      课程以实际应用为导向,从基础...最后做前后端分离的项目开发,前端使用当下流利的Vue框架,跨域ajax请求与服务器交互数据,课程深入浅出,在该视频中没有任何废话,全程干货,只需要四天时间即可拿下SpringMVC框架。

      springmvc深入浅出(备java基础,javaee课程,struts同类)

      Spring web mvc架构、springmvc入门程序、非注解处理器映射器和适配器、注解开发处理器映射器和适配器、springmvc整合Mybatis、RequestMapping...、springmvc上传图片、json数据交互、Validation、异常处理器、拦截器...

      struts2深入浅出(备java基础,javaweb,javaee,框架)

      Struts2框架介绍、工作原理与架构分析、6大配置文件分析使用通配符定义action、动态方法调用,ActionContext及ServletActionContext...默认拦截器分析、自定义拦截器、OGNL表达式、值栈分析及操作、标签、 json使用。

      爬虫技术系列课+Python+爬虫基础知识爬虫实例反爬机制+自学课程

      内容概要:Python爬虫系列课程,共10个章节,深入浅出掌握Python爬虫的基础知识,了解爬虫实例,熟悉反爬机制,小的系列课程。 适合人群:基础小白入门系列,想了解Python爬虫基础知识的同学,属于入门级课程,可以...

      Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别

      前言  第一次听说jsonp,其实早在2年之前。当时在做一个活动页面的抽奖模块,要从服务端get一个概率,当时什么都不懂,同事说用ajax,我就用ajax,同事说...没关系,既然是深入浅出,那就从头说起。  假如我

      深入理解Webpack 中路径的配置

      本文尽可能的汇集了 Webpack2 中涉及路径的配置,力争深入浅出。 context context 是 webpack 编译时的基础目录,入口起点(entry)会相对于此目录查找。 默认值为当前目录,webpack设置 context 默认值代码 可以...

      本人学习EXT以来的宝贵财富,1年多的积累啊!!!

      这是个MyEclipse的web工程 不需要数据库 ...有Ext官方自带的,&lt;深入浅出ExtJS&gt;一书的所有源码,73个Ext官方论坛收集的用户扩展控件。几个自己写的例子。 有任何问题可以找我 QQ:370735745 email:zhouli253@163.com

      Ext学习必备,涵盖大量实例,插件,其他有用组件

      2深入浅出extJs例子 3自己写的例子 470过个插件 新增内容: 1通过dtree将所有例子搞成一颗树,方便大家观看效果 2新增dhtmlx上传文件 3新增EXT异步加载树 4动态修改树节点图标和提示层 5ext结合mxGraph作出流程图...

    Global site tag (gtag.js) - Google Analytics