JSON 与 JSONP

2016-11-30

摘要：JSON 与 JSONP 的相关知识

JSON

JSON 是一种数据格式，不是一种编程语言
JSON 的语法可以表示三种类型的值：
1.简单值：使用与 JavaScript 相同的语法，表示字符串、数值、布尔值和 null，但不支持特殊值 undefined。JSON的字符串必须使用双引号
2.对象：对象作为一种复杂数据类型，表示的是一组无序的键值对。每个键值对中的值可以是简单值，也可以是复杂数据类型的值。JSON的对象没有声明变量，因为JSON没有变量的概念。还有JSON的末尾不需要分号，而且对象的属性必须加双引号
3.数组：数组也是一种复杂类型，表示一组有序的值的列表，可以通过数值索引来访问其中的值，数组的值也可以是简单值、数组或对象
JSON 对象或数组若有多个子项，则通过英文逗号，进行分隔
JSON.parse：该方法将 JSON 字符串解析为原生 JavaScript 值
JSON.stringify：该方法将 JavaScript 对象序列化为 JSON 字符串，默认不包含任何空格字符或缩进。序列化 JavaScript 对象时，所有函数及原型和值为 undefined 的任何属性被忽略。JSON.stringify 除了要序列化的对象外还可以接收两个参数，第一个参数是个过滤器，可以是一个数组或函数；第二个参数表示是否在 JSON 字符串中保留缩进。如果参数对象有自定义的 toJSON() 方法，那么 JSON.stringify() 会使用这个方法的返回值作为参数，而忽略原对象的其他属性。

var blog = {
  title: "hexo github",
  authors: [
    "niu xiao kui"
  ],
  age: 23,
  year: 2016
}
var jsonA = JSON.stringify(blog); 
// {"title":"hexo github","authors":["niuxiaokui"],"age":23,"year":2016}

var jsonB = JSON.stringify(blog,["title","age"]);
// {"title":"hexo github","age":23}

var jsonC = JSON.stringify(blog,function(key,value){
  switch(key){
    case "authors": return value.join(",");
    case "year": return 5000;
    case "age": return undefined;
    default: return value;
  }
})
// {"title":"hexo github","authors":"niuxiaokui","year":5000}

var jsonD = JSON.stringify(blog, null, 4); // 缩进为 4，最大缩进空格数为 10，大于 10 的值会自动转换为 10
// {\n    "title": "hexo github",\n    "authors": [\n        "niu xiao kui"\n    ],\n    "age": 23,\n    "year": 2016\n}
var jsonE = JSON.stringify(blog, null, "--"); // 缩进字符串即使多于 10 个，也只会显示前 10 个
// {\n--"title": "hexo github",\n--"authors": [\n----"niu xiao kui"\n--],\n--"age": 23,\n--"year": 2016\n}

blog.toJSON = function() { // 自定义 toJSON 方法
  return {
    info: this.authors + "在" + this.year + "年" + this.age + "岁"
  }
}
var jsonF = JSON.stringify(blog)
// {"info":"niu xiao kui在2016年23岁"}

JSON.stringify 转换的限制：
1、Date 对象会被转换成时间字符串
2、Error 实例对象、正则表达式转换后只剩空对象
3、函数、Symbol、undefined 的属性会被忽略，在数组中则会替换成 null
4、NaN、Infinity、-Infinity 会变成 null
5、自定义构造函数生成的对象在转换后会丢失 constructor，全部变成 Object
6、如果存在循环引用的情况会报错

JSONP

JSONP(JSON with Padding)是 JSON 的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。利用<script>标签的跨域能力实现跨域数据的访问，请求动态生成的 JavaScript 脚本的同时带一个 callback 函数名作为参数。callback 参数的名为本地文档定义好的 JavaScript 函数名，服务器端动态生成的脚本和生产数据，并在代码中以产生的数据为参数调用 callback 函数。当这段脚本加载到本地文档被执行时，callback 函数就被调用。ajax 的核心是通过 XmlHttpRequest 获取非本页内容，而 jsonp 的核心则是动态添加标签来调用服务器提供的 js 脚本，两者有本质不同
示例：

// 原生js
function jsonpCallback(data) {
  console.log(data) ；
}
var JSONP = document.createElement("script");
JSONP.type = "text/javascript";
JSONP.src = "http://xxx.php?callback=jsonpCallback";
document.getElementsByTagName("head")[0].appendChild(JSONP);

// jQuery
$.ajax({
  type: "get", // 只能是get
  url: url,
  dataType: "jsonp",
  jsonp: "callback", // 传递给请求处理程序或页面的，用以获得 jsonp 回调函数名的参数名，默认为 callback
  jsonpCallback: "jsonpCallback", // 自定义的回调函数名，默认为自动生成的随机函数名，也可以写“?”,返回的数据会自动供给 success 方法来调用
  success: function (data) {
    console.log(data);
  },
  error: function (e) {
    console.log(e);
  }
});

$.get('http://xxx.php?callback=?', function (data) {
  console.log(data)
}, 'jsonp');

$.getJSON("http://xxx.php?callback=?", function (data) {
  console.log(data);
});

《JavaScript高级程序设计》（第三版）第20章 JSON
JSON 对象
 说说JSON和JSONP，也许你会豁然开朗，含jQuery用例
 AJAX 跨域请求 - JSONP获取JSON数据