JavaScript 笔记(3) -- JSON

JavaScript JSON (JavaScript Object Notation): 是一种轻量级的数据交换格式

JSON 是用于存储和传输数据的格式
JSON 通常用于服务端向网页传递数据
JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本(文本可以被任何编程语言读取及作为数据格式传递)
JSON 格式化后为 JavaScript 对象：JSON 格式在语法上与创建 JavaScript 对象代码是相同的，所以 JavaScript 程序可以很容易的将 JSON 数据转换为 JavaScript 对象。

通常，我们从服务器中读取 JSON 数据，并在网页中显示数据。可使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象，实例:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>JSON 字符串转换为 JavaScript 对象</title>

</head>

<body>

<h2>为 JSON 字符串创建对象</h2>

<p id="demo"></p>

<script>

    var text = '{ "sites" : [' +

    '{ "name":"Runoob" , "url":"www.runoob.com" },' +

    '{ "name":"Google" , "url":"www.google.com" },' +

    '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';

    obj = JSON.parse(text);

    document.getElementById("demo").innerHTML =  obj.sites[1].name + " " + obj.sites[1].url;

</script>

</body>

</html>

相关函数

函数	描述
JSON.parse(text[, reviver])	用于将一个 JSON 字符串转换为 JavaScript 对象。 text: 必需，一个有效的 JSON 字符串。 reviver: 可选，一个转换结果的函数，将为对象的每个成员调用此函数。
JSON.stringify(value[, replacer[, space]])	用于将 JavaScript 值转换为 JSON 字符串。

函数

描述

JSON.parse(text[, reviver])

用于将一个 JSON 字符串转换为 JavaScript 对象。

text: 必需，一个有效的 JSON 字符串。
reviver: 可选，一个转换结果的函数，将为对象的每个成员调用此函数。

JSON.stringify(value[, replacer[, space]])

用于将 JavaScript 值转换为 JSON 字符串。

JSON 对象

语法：

JSON 对象使用在大括号({})中书写。

对象可以包含多个 key/value（键/值）对。

key 必须是字符串，value 可以是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。

key 和 value 中使用冒号(:)分割。

每个 key/value 对使用逗号(,)分割。

访问对象：

(1) 可以使用点号（.）来访问对象的值：

var myObj, x;
myObj = { "name":"runoob", "alexa":10000, "site":null };
x = myObj.name;

（2）也可以使用中括号（[]）来访问对象的值：

var myObj, x;
myObj = myObj = { "name":"runoob", "alexa":10000, "site":null };
x = myObj["name"];    // 返回 runoob

（3）可以使用 for-in 来循环对象的属性时，使用中括号（[]）来访问属性的值：

var myObj = { "name":"runoob", "alexa":10000, "site":null };

for (x in myObj) {

    document.getElementById("demo").innerHTML += myObj[x] + "<br>";

}

（4）嵌套 JSON 对象，可使用点号(.) 或者中括号([]) 来访问嵌套的 JSON 对象,eg：

myObj = {

    "name":"runoob",

    "alexa":10000,

    "sites": {

        "site1":"www.runoob.com",

        "site2":"m.runoob.com",

        "site3":"c.runoob.com"

    }

}

// 访问

x = myObj.sites.site1;

// 或者

x = myObj.sites["site1"];

（5）JSON 数组：数组作为 JSON 对象，可用索引值或 for-in 来访问数组，实例：

var myObj = {
　　"name":"网站",
　　"num":3,
　　"sites":[ "Google", "Runoob", "Taobao" ]
}

// 索引值访问

var  x = myobj.sites[0];
for (var i = 0; i < myObj.sites.length; i++) { 
　　x += myObj.sites[i] + "<br>"; 
}

// 或者 for-in 来访问

for (var i in myObj.sites) {

    x += myObj.sites[i] + "<br>";

}

JSON 与服务器

从服务器端接收 JSON 数据，可以使用 AJAX 从服务器请求 JSON 数据，如下：

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {

    if (this.readyState == 4 && this.status == 200) {

        myObj = JSON.parse(this.responseText);

        document.getElementById("demo").innerHTML = myObj.name;

    }

};

xmlhttp.open("GET", "/try/ajax/json_demo.txt", true);

xmlhttp.send();

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>JSON 数据访问</title>

</head>

<body>

<h2>使用 XMLHttpRequest 来获取文件内容</h2>

<p>文件内容是标准的 JSON 格式，可以使用 JSON.parse 方法将其转换为 JavaScript 对象。</p>

<p id="demo"></p>

<script>

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {

    if (this.readyState ==  && this.status == ) {

        myObj = JSON.parse(this.responseText);

        document.getElementById("demo").innerHTML = myObj.name;

    }

};

xmlhttp.open("GET", "/try/ajax/json_demo.txt", true);

xmlhttp.send();

</script>

<p>查看 JSON 文件数据 <a href="/try/ajax/json_demo.txt" target="_blank">json_demo.txt</a></p>

</body>

</html>

注：json_demo.txt 文件内容如下：

{

    "name":"网站",

    "num":,

    "sites": [

        { "name":"Google", "info":[ "Android", "Google 搜索", "Google 翻译" ] },

        { "name":"Runoob", "info":[ "菜鸟教程", "菜鸟工具", "菜鸟微信" ] },

        { "name":"Taobao", "info":[ "淘宝", "网购" ] }

    ]

}

实例代码全部

实例代码全部

从服务器接收数组的 JSON 数据：如果从服务端接收的是数组的 JSON 数据，则 JSON.parse 会将其转换为 JavaScript 数组：

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {

    if (this.readyState == 4 && this.status == 200) {

        myArr = JSON.parse(this.responseText);

        document.getElementById("demo").innerHTML = myArr[1];

    }

};

xmlhttp.open("GET", "/try/ajax/json_demo_array.txt", true);

xmlhttp.send();

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<h2>内容是数组</h2>

<p>内容是数组会转换为 JavaScript 数组。</p>

<p id="demo"></p>

<script>

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {

    if (this.readyState ==  && this.status == ) {

        myArr = JSON.parse(this.responseText);

        document.getElementById("demo").innerHTML = myArr[];

    }

};

xmlhttp.open("GET", "/try/ajax/json_demo_array.txt", true);

xmlhttp.send();

</script>

<p>查看服务端数据 <a href="json_demo_array.txt" target="_blank">json_demo_array.txt</a></p>

</body>

</html>

注： json_demo_array.txt 文件内容如下：

[ "Google", "Runoob", "Taobao" ]

实例代码 全部

实例代码全部

JSON.parse() 和 JSON.stringfy()

JSON 不能存储 Date 对象，若需存储 Date 对象，需要将其转换为字符串，之后在转换为 Date 对象。

var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';

var obj = JSON.parse(text);

obj.initDate = new Date(obj.initDate);  // 时间字符串 转为 Date 对象

document.getElementById("demo").innerHTML = obj.name + "创建日期: " + obj.initDate;

也可以启用 JSON.parse 的第二个参数 reviver，一个转换结果的函数，对象的每个成员调用此函数，如下：

var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';

var obj = JSON.parse(text, function (key, value) { 
   // 该 function 用于将initDate值 从 String 类型转为 Date 对象

    if (key == "initDate") {

        return new Date(value);

    } else {

        return value;

}});

document.getElementById("demo").innerHTML = obj.name + "创建日期：" + obj.initDate;

JSON 不允许包含函数，但你可以将函数作为字符串存储，之后再将字符串转换为函数。实例：

var text = '{ "name":"Runoob", "alexa":"function () {return 10000;}", "site":"www.runoob.com"}';

var obj = JSON.parse(text);

obj.alexa = eval("(" + obj.alexa + ")");   // 转换为函数

document.getElementById("demo").innerHTML = obj.name + " Alexa 排名：" + obj.alexa();

不建议在 JSON 中使用函数。

JSON.stringfy()：在向服务器发送数据时一般是字符串。我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。语法：

JSON.stringify(value[, replacer[, space]])

参数说明：

value: 必需， 一个有效的 JSON 字符串。

replacer: 可选。用于转换结果的函数或数组。

如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。

如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时，将忽略 replacer 数组。

space: 可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 有可以使用非数字，如：\t。

我们可以将字符串/数组发送到服务器：

var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"};
// or: = [ "Google", "Runoob", "Taobao", "Facebook"]

var myJSON = JSON.stringify(obj);  // 使用 JSON.stringfy() 方法处理以上数据，将其转换为字符串

document.getElementById("demo").innerHTML = myJSON;

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

    <h2>将 JavaScript 对象转换Wie JSON 字符串</h2>

    <p id="demo"></p>

<script>

    var obj = { "name":"runoob", "alexa":,     "site":"www.runoob.com"};

    var myJSON = JSON.stringify(obj);

    document.getElementById("demo").innerHTML = myJSON;

</script>

</body>

</html>

将 myJSON 发送到服务器

JSON.stringfy() 会将所有日期转换为字符串，如下：

var obj = { "name":"Runoob", "initDate":new Date(), "site":"www.runoob.com"};

var myJSON = JSON.stringify(obj);

document.getElementById("demo").innerHTML = myJSON;

JSON.stringify() 会删除 JavaScript 对象的函数，包括 key 和 value。因此，我们可以在执行 JSON.stringify() 函数前将函数转换为字符串来避免该问题的发生：

var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"};

obj.alexa = obj.alexa.toString();

var myJSON = JSON.stringify(obj);

document.getElementById("demo").innerHTML = myJSON;

JSON 使用（eval（））：JSON 最常见的用法之一，是从 web 服务器上读取 JSON 数据（作为文件或作为 HttpRequest），将 JSON 数据转换为 JavaScript 对象，然后在网页中使用该数据。

由于 JSON 语法是 JavaScript 语法的子集，JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。eval() 函数使用的是 JavaScript 编译器，可解析 JSON 文本，然后生成 JavaScript 对象。必须把文本包围在括号中，这样才能避免语法错误，如下：

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

在网页中使用 JavaScript 对象,实例：

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

'{ "name":"菜鸟教程" , "url":"www.runoob.com" },' +

'{ "name":"google" , "url":"www.google.com" },' +

'{ "name":"微博" , "url":"www.weibo.com" } ]}';

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

document.getElementById("name").innerHTML=obj.sites[].name; // 返回： 菜鸟教程

document.getElementById("url").innerHTML=obj.sites[].url;  //返回： www.runoob.com

JSON 解析器：
- 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

Web 浏览器支持	Web 软件支持
Firefox (Mozilla) 3.5 Internet Explorer 8 Chrome Opera 10 Safari 4	jQuery Yahoo UI Prototype Dojo ECMAScript 1.5

JSONP: (JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

为什么我们从不同的域（网站）访问数据需要一个特殊的技术(JSONP )呢？这是因为同源策略。

同源策略，它是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略

该节就记录到这里啦~

JavaScript 笔记(3) -- JSON的更多相关文章

读书笔记(01) - JSON - JavaScript高级程序设计
JSON与JavaScript对象 JSON是一种表示结构化数据的存储格式,语法格式上与JavasScript对象有些类似. TIPS: 与JavaScript对象的格式区别不支持变量.函数或对象实 ...
JavaScript高级程序设计读书笔记之JSON
JSON(JavaScript Object Notation)JavaScript对象表示法.JSON是JavaScript的一个严格的子集,利用了JavaScript中的一些模式来表示结构化数据. ...
[Effective JavaScript 笔记]第3章：使用函数--个人总结
前言这一章把平时会用到,但不会深究的知识点,分开细化地讲解了.里面很多内容在高3等基础内容里,也有很多讲到.但由于本身书籍的篇幅较大,很容易忽视对应的小知识点.这章里的许多小提示都很有帮助,特别是在 ...
第18天 ajax技术和javascript加强（json）
第18天 ajax技术和javascript加强(json) 复习: B/S架构实现文件上传的思路? 使用a标签实现文件下载功能,有什么问题? 使用Servlet实现文件下载的思路? 今日任务 ...
使用Javascript/jQuery将javascript对象转换为json格式数据 - 海涛的CSDN博客 - 博客频道 - CSDN.NET
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
Web开发——JavaScript基础（JSON教程）
参考: JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON 是存储和交换文本信息的语法.类似 XML. JSON 比 XML 更小.更快,更 ...
springmvc学习笔记(18)-json数据交互
springmvc学习笔记(18)-json数据交互标签: springmvc springmvc学习笔记18-json数据交互 springmvc进行json交互环境准备加入json转换的依赖 ...
在javascript中使用Json
jSON是JavaScript面向对象语法的一个子集.由于JSON是JavaScript的一个子集,因此它可清晰的运用于此语言中. 文本生成json对象,必须在外面加一对括号. js 代码 var m ...
廖雪峰js教程笔记9 json
JSON是JavaScript Object Notation的缩写,它是一种数据交换格式. 在JSON出现之前,大家一直用XML来传递数据.因为XML是一种纯文本格式,所以它适合在网络上交换数据.X ...

随机推荐

centos下安装mariadb
前言一直都是前端,比较少玩服务器,最近买了阿里云,开始尝试centos,不得不说linux还是很有魅力的. 正文 google了一圈,决定安装mariadb,其实mariadb和mysql差不多,使 ...
多种语言书写 “ HelloWorld ”
最基本的C: #include<stdio.h> int main(int argc, char const *argv[]) { printf("HelloWorld\n&qu ...
tp5 使用paginate分页获取数据对象之后如何对对象进行数据添加
tp5 使用paginate分页获取数据对象之后如何对对象进行数据添加大家都知道,在使用tp5的paginate获取分页数据之后,得到的是一个数据对象,但有时会碰到要对数据对象进行二次加工的情况, ...
php中foreach循环遍历二维数组
最近在用tp3.2框架,在查询的时候用到了select(),这条语句返回的是二维数组,所以在对返回的数据做处理时,遇到了些麻烦,百度了下foreach,终于用foreach解决了数据的筛选问题 (因为 ...
PHP 优化
来源:歪麦博客 https://www.awaimai.com/1050.html 1 字符串 1.1 少用正则表达式能用PHP内部字符串操作函数的情况下,尽量用他们,不要用正则表达式, 因为其效率 ...
[译]The Python Tutorial#3. An Informal Introduction to Python
3. An Informal Introduction to Python 在以下示例中,输入和输出以提示符(>>>和...)的出现和消失来标注:如果想要重现示例,提示符出现时,必须 ...
FLASH、SDRAM
1.flash: 闪存,掉电之后里面的存储数据不会丢失,在嵌入式系统中用作存储Bootloader以及操作系统或者程序代码或者直接当硬盘使用(U盘).一般主要使用的FLASH有NOR flash和NA ...
(转) Redis哨兵的详解
1 哨兵的作用哨兵是redis集群架构中非常重要的一个组件,主要功能如下: 1. 集群监控:负责监控redis master和slave进程是否正常工作 2. 消息通知:如果某个redis实例有故障 ...
SQL中的函数用法
一.coalesce COALESCE (expression_1, expression_2, ...,expression_n)依次参考各参数表达式,遇到非null值即停止并返回该值.如果所有的表 ...
vba中获取当前sheet页的名称，当前单元格所在位置
fname = ActiveSheet.Name-------获取当前sheet页的名称 Sname = "" & fname & "&qu ...

JavaScript 笔记(3) -- JSON

JavaScript 笔记(3) -- JSON的更多相关文章

随机推荐

热门专题