六、JSON和JSONP基础笔记

JSON部分

什么是 JSON ？

• JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
• JSON 是轻量级的文本数据交换格式
• JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。
• JSON 具有自我描述性，更易理解

为什么使用 JSON？

XML 比 JSON 更难解析。
JSON 可以直接使用现有的 JavaScript 对象解析。
针对 AJAX 应用，JSON 比 XML 数据加载更快，而且更简单：

• 使用 XML：
  读取 XML 文档、使用 XML DOM 来循环遍历文档、读取值并存储在变量中
• 使用 JSON：
  读取 JSON 字符串、用 eval() 处理 JSON 字符串

JSON 语法

• JSON 语法是 JavaScript 对象表示语法的子集。
  数据在名称/值对中
  数据由逗号分隔
  大括号保存对象
  中括号保存数组
• JSON 数据的书写格式是：名称/值对。
  名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值："name" : "菜鸟教程"
• JSON 值可以是：
  数字（整数或浮点数）
  字符串（在双引号中）
  逻辑值（true 或 false）
  数组（在中括号中）
  对象（在大括号中）
  null

JSON与 XML

JSON 和 XML 都用于接收 web 服务端的数据。
JSON 实例

{
    "sites": [
    { "name":"菜鸟教程" , "url":"www.runoob.com" }, 
    { "name":"google" , "url":"www.google.com" }, 
    { "name":"微博" , "url":"www.weibo.com" }
    ]
}

XML 实例

<sites>
  <site>
    <name>菜鸟教程</name> <url>www.runoob.com</url>
  </site>
  <site>
    <name>google</name> <url>www.google.com</url>
  </site>
  <site>
    <name>微博</name> <url>www.weibo.com</url>
  </site>
</sites>

• JSON 与 XML 的相同之处：
  JSON 和 XML 数据都是 “自我描述” ，都易于理解。
  JSON 和 XML 数据都是有层次的结构
  JSON 和 XML 数据可以被大多数编程语言使用
• JSON 与 XML 的不同之处：
  JSON 不需要结束标签
  JSON 更加简短
  JSON 读写速度更快
  JSON 可以使用数组
  最大的不同是：XML 需要使用 XML 解析器来解析，JSON 可以使用标准的 JavaScript 函数来解析。
• JSON.parse(): 将一个 JSON 字符串转换为 JavaScript 对象。
• JSON.stringify(): 于将 JavaScript 值转换为 JSON 字符串。

JSON 对象

• 对象语法

  { "name":"runoob", "alexa":10000, "site":null }
  

• 访问对象值
  1、使用点号（.）来访问对象的值：

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

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

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

• 循环对象
  使用 for-in 来循环对象的属性：

  var myObj = { "name":"runoob", "alexa":10000, "site":null };
  for (x in myObj) {
      document.getElementById("demo").innerHTML += x + "<br>";
  }
  

• 修改对象的值
  1、使用点号(.)来修改 JSON 对象的值：

  myObj.sites.site1 = "www.google.com";
  

  2、使用中括号([])来修改 JSON 对象的值：

  myObj.sites["site1"] = "www.google.com";
  

• 删除对象属性
  1、使用 delete 关键字来删除 JSON 对象的属性：

  delete myObj.sites.site1;
  

  2、使用中括号([])来删除 JSON 对象的属性：

  delete myObj.sites["site1"]
  

JSON数组

• 数组的访问、修改、删除方法同对象

JSON.parse()

• JSON 通常用于与服务端交换数据，在接收服务器数据时一般是字符串。
  我们可以使用 JSON.parse()方法将 JSON 数据转换为 JavaScript 对象。
  语法

  JSON.parse(text[, reviver])
  

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

• JSON 解析实例
  例如我们从服务器接收了以下数据：

  { "name":"runoob", "alexa":10000, "site":"www.runoob.com" }
  

  我们使用 JSON.parse() 方法处理以上数据，将其转换为 JavaScript 对象：

  var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');
  

• 从服务端接收 JSON 数据
  我们可以使用 AJAX 从服务器请求 JSON 数据，并解析为 JavaScript 对象。

  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();
  

• 从服务端接收数组的 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();
  

• 解析Date数据
  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);
  

  还可以使用 JSON.parse 的第二个参数 reviver，解析Date数据

  var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';
  var obj = JSON.parse(text, function (key, value) {
      if (key == "initDate") {
          return new Date(value);
      } else {
          return value;
  }});
  

• 解析函数
  JSON 不允许包含函数，但你可以将函数作为字符串存储，之后再将字符串转换为函数。不建议在 JSON 中使用函数。

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

JSON.stringify()

JSON.stringify() 方法将 JavaScript 对象转换为 JSON 字符串。
语法

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

参数说明：
1、value:
必需， 要转换的 JavaScript 值（通常为对象或数组）。
2、replacer（过滤器）:
可选。用于转换结果的函数或数组。

• 如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。
• 如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时，将忽略 replacer 数组。

3、space:
可选，文本添加缩进、空格和换行符

• 如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格
• 如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。

eval() 函数

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

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

实例

var txt = '{ "sites" : [' +
'{ "name":"菜鸟教程" , "url":"www.runoob.com" },' +
'{ "name":"google" , "url":"www.google.com" },' +
'{ "name":"微博" , "url":"www.weibo.com" } ]}';
 
var obj = eval ("(" + txt + ")");

eval() 函数可编译并执行任何 JavaScript 代码。这隐藏了一个潜在的安全问题。
使用 JSON 解析器将 JSON 转换为 JavaScript 对象是更安全的做法。JSON 解析器只能识别 JSON 文本，而不会编译脚本。
在浏览器中，这提供了原生的 JSON 支持，而且 JSON 解析器的速度更快。

JSONP部分

什么是JSONP

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
为什么我们从不同的域（网站）访问数据需要一个特殊的技术( JSONP )呢？这是因为同源策略。
同源策略，它是由 Netscape 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。

JSONP原理

ajax 请求受同源策略影响，不允许进行跨域请求，而 script 标签 src 属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。