大数据最新JSON从入门到大师_json讲的好的csdn博主(1)

以下是本篇文章正文内容

一、初识json

1.1 JSON概念

在这里插入图片描述

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


1.2 JavaScript内建对象

进入JSON前,先简单介绍一下JavaScript内建对象’Array对象第一段‘Array声明’的地方,声明一个Javascript Array对象,基本上是两种语法:

// 正式声明
  var team1 = new Array('Bruce', 'Sherry', 'Happy');
  // 整合声明
  var team2 = ['Bruce', 'Sherry', 'Happy'];
  alert(team1[0]); // Bruce
  alert(team2[2]); // Happy


一个比较正式,一个是比较简写,通常Javascript写久了,会采用第二种方式来声明Array。

再来看Javascript对象的声明,基本上也是两种:

// 正式声明
  var Bruce = new Object();
  Bruce.name = 'King Kong';
  Bruce.age = 18;
  Bruce.sex = 'male';
  alert(Bruce.age); // 18
  // 整合声明
  var Bruce = {
  'name' : 'King Kong',
  'age' : 18,
  'sex' : 'male'
  }
  alert(Bruce.name); // King Kong
  alert(Bruce[name]); // King Kong

一样,久了也是会选第二种来写,再来我们看看Javascript的‘Array + Object’的声明:

// 声明一个familys Array,里面包含两个Object
  var familys = [
  {'name' : 'Bruce',
  'age' : 18,
  'sex' : 'male'},
  {'name' : 'Sherry',
  'age' : 16,
  'sex' : 'famale'}
  ];
  alert(family[0].name); // Bruce
  alert(family[1].sex); // famale

到这里你已经会了JSON的80%了,JSON (JavaScript Object Notation)已经说明的很清楚了,它是一个JavaScript的子集,它利用Object与Array来表示数据,让数据很容易的可以交换使用。


JSON写法:

{
  'familys' = [
  {'name' : 'Bruce',
  'age' : 18,
  'sex' : 'male'},
  {'name' : 'Sherry',
  'age' : 16,
  'sex' : 'famale'}
  ]
  }

JSON Object: 以"{“开始,以”}“结尾 每个名称后跟着一个”:" 每对"名称:值"之间用","分隔

{ // 以"{"开始
  'name' : 'Bruce', // 每个名称后跟着一个":"
  'age' : 18, // 每对"名称:值"之间用","分隔
  'sex' : 'male'
  } // 以"}"结尾


JSON Array: 以"[“开始,以”]“结尾  值之间使用”,"

{
  // familys为一维数组,数组里包含两笔对象数据
  'familys' = [ // 以"["开始
  
  {'name' : 'Bruce',
 
  'age' : 18,
 
  'sex' : 'male'}, // 值之间使用","
  
  {'name' : 'Sherry',
 
  'age' : 16,
  
  'sex' : 'famale'}
 
  ] // 以"]"结尾
  
  }

JSON Value:

值本身可以是String、Number、true、false、null、Object、Array;

JSON String:

由双引号包围的任意Unicode字符集合。可以使用"反斜线()"来转义。

在这里插入图片描述


二、JSON的使用

那JSON要如何使用呢?

原生的JSON格式数据,目前在IE7以上及MF 3以上,已经内建解析JSON格式的能力,但在兼容性及网络上的不确定性(其他浏览器),建议在有需要使用JSON格式的页面引用json2.js,依官方说法,请不要在使用json.js这个版本的Script了。

有以下代码:

var jsonData = "{'familys'=[{'name' : 'Bruce', 'age' : 18, 'sex' : 
'male'},
  
  {'name' : 'Sherry','age' : 16, 'sex' : 'famale'}]}"

方法一:使用eval()

这个方法会引发安全性问题,我就不介绍了。

方法二:使用json2.js (IE7以上及MF 3以上可以不引用)

先在网页中引用json2.js,然后使用json2所提供的parse方法:

var jsonData = "{'familys'=[{'name' : 'Bruce', 'age' : 18, 'sex' : 
'male'},
  
  {'name' : 'Sherry','age' : 16, 'sex' : 'famale'}]}"
 
  var jsonObj = JSON.parse(jsonData); // 将JSON格式数据转为对象
  
  alert(jsonObj.familys[0].name); // Bruce
  
  alert(jsonObj.familys[1].age); // 16

这样之后,我们就能在Ajax函数将服务器传回的JSON格式做解析:

// ...
  if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
  var jsonObj = JSON.parse(xmlHttp.responseText);
  // ...
  }

使用了JSON来交换数据后,你会发现相关Ajax的源程序变简单了,例如:

// 原始Ajax函数
  function Do(xmlHttp) {
  if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
  var familys = xmlHttp.responseXML.getElementsByTagName('familys');
  for (var i = 0; i < familys.length; i++) {
  var name = 
familys.getElementsByTagName('name')[0].firstChild.nodeValue;
  var age = familys.getElementsByTagName('age')[0].firstChild.nodeValue;
  var sex = familys.getElementsByTagName('sex')[0].firstChild.nodeValue;
  }
  }


![img](https://img-blog.csdnimg.cn/img_convert/5b45c3a8cfad3a691dbbc426f00d98fb.png)
![img](https://img-blog.csdnimg.cn/img_convert/256b4223500aac9e65a0973211e6d4d5.png)
![img](https://img-blog.csdnimg.cn/img_convert/848eca43322342f61136a8b8d0432a0f.png)

**既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上大数据知识点,真正体系化!**

**由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新**

**[需要这份系统化资料的朋友,可以戳这里获取](https://bbs.csdn.net/topics/618545628)**

782838797)]
[外链图片转存中...(img-rvRiIQXQ-1714782838797)]

**既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上大数据知识点,真正体系化!**

**由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新**

**[需要这份系统化资料的朋友,可以戳这里获取](https://bbs.csdn.net/topics/618545628)**

  • 5
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值