JavaScript 笔记 -- JSON

Posted 云雀sunshine

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript 笔记 -- 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 对象

  • 语法:
    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 == 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();

</script>

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

</body>
</html>


注:json_demo.txt 文件内容如下:
{
    "name":"网站",
    "num":3,
    "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 == 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();

</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":10000,     "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[0].name; // 返回: 菜鸟教程
    document.getElementById("url").innerHTML=obj.sites[0].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

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

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

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

  

   该节就记录到这里啦~

 















以上是关于JavaScript 笔记 -- JSON的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript高级程序设计读书笔记

JavaScript高级程序设计(第3版)| 学习笔记: 在HTML中使用JavaScript

JavaScript 笔记 -- JSON

JavaScript基础笔记JSON

前端学习笔记JavaScript JSON对象相关操作

javascript - 知识笔记