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 对象

  • 语法：

    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 的浏览器都会使用这个策略

该节就记录到这里啦~

时间： 2024-11-06 00:57:28

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

小谈一下JavaScript中的JSON

一.JSON的语法可以表示以下三种类型的值: 1.简单值:字符串,数值,布尔值,null 比如:5,"你好",false,null JSON中字符串必须用双引号,而JS中则没有强制规定. 2.对象 比如: 1 { 2 "name":"蔡斌", 3 "age":21, 4 "isRich":false, 5 "school":{ 6 "name":"广东工业大

springmvc学习笔记(18)-json数据交互

springmvc学习笔记(18)-json数据交互 springmvc学习笔记18-json数据交互 springmvc进行json交互 环境准备 添加json转换的依赖 配置json转换器 json交互测试 输入json串输出是json串 输入keyvalue输出是json串 本文主要介绍如何在springmvc中进行json数据的交互,先是环境准备和配置,然后分别展示了"输入json串,输出是json串"和"输入key/value,输出是json串"两种情况下

JavaScript笔记之Function

一.函数定义 (1)使用function declaration 格式:function functionName(parameters) { function body } 注:此种方式声明的函数作用域是全局的,即在声明之前可以调用 (2)使用function expression 格式:var name = function (parameters) { function body }; 注:与(1)不同,在声明之前不可以调用 (3)使用function constructor() 格式:v

在JavaScript中使用json.js：访问JSON编码的某个值

演示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/jav

JavaScript之Ajax-5 JSON(JSON概述、使用JSON)

一.JSON概述 JSON概述 - JSON: JavaScript Object Notation,JavaScript对象表示法,原本是JavaScript中创建对象的一种语法 - 现在,JSON已经从JavaScript中独立出来,作为一种独立的字符串数据表示法,被Java.C#.C++.PHP.OC等几乎所有主流语言所支持 - JSON作为一种轻量级的文本数据交换格式,已被广泛使用于存储和交换文本数据领域,作用与XML类似,但比XML更简洁.更快.更容易解析 JSON语法规则 - JSO

javascript笔记（二）

concat() 连接多个字符串,返回合并后的字符串. 1 var s1="a"; 2 var s2="b"; 3 var s3="c"; 4 5 console.log(s1.concat(s2,s3));//abc concat() 方法的结果等同于:result = s1 + s2 + ... + sN.如果有不是字符串的参数,则它们在连接之前将首先被转换为字符串. 数组中的concat():将参数添加为数组的元素,返回新的数组. 1 va

Java和JavaScript中使用Json方法大全

林炳文Evankaka原创作品. 转载请注明出处http://blog.csdn.net/evankaka   摘要:JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 它基于ECMAScript的一个子集. JSON採用全然独立于语言的文本格式,可是也使用了相似于C语言家族的习惯(包含C.C++.C#.Java.JavaScript.Perl.Python等).这些特性使JSON成为理想的数据交换语言. 易于人阅读和编写.同一时候也易于机器解析和生成

IOS下WEBVIEW 的javascript数组与json定义 及交互

最近在折腾IOS新闻浏览客户端,当中需要用到webview传递JSON数据到IOS上,然后在IOS上解析.刚入门IOS不久,看了不少的书,但都是囫囵吞枣.在开发过程中,遇到不少问题.开发环境mac mini (IOS端开发)thinkpad x200s(PHP开发)功能实现:在WEBVIEW创建DOM监听,判断用户按下WEBVIEW上链接,通过DOM获取相关链接信息,遍历数组,最终用$.toJSON(jsArray);//将JS数组转换成JSON格式下面记录一下1.JS数组定义最终在WEBVIE

【转】JavaScript eval处理JSON数据 为什么要加括号

由于Ajax的兴起,JSON这种轻量级的数据格式作为客户端与服务器之间的传输格式逐渐地流行起来,进而出现的问题是如何将服务器端构建好的JSON数据转化为可用的JavaScript对象.利用eval函数无疑是一种简单而直接的方法.在转化的时候需要将JSON字符串的外面包装一层圆括号:var jsonObject = eval("(" + jsonFormat + ")");为什么要加括号?加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号