JSON解析格式化

json.asia 搭建了一个在线解析json的网站
目前可以做这些功能
json美化工具
json对比
编码/解码
代码美化工具
代码压缩工具
时间(戳)转换
二维码生成
图片转Base64

跨域请求
在开发 Web 应用程序时，向存在于其他域上的 API（应用程序可编程接口）发送和接收数据是司空见惯的。这种跨域通信通常直接在浏览器中执行，在客户端使用 JavaScript。跨域通信可以使用 Python、Nodejs、PHP 等服务器端语言来完成，但是对于跨域请求响应在浏览器中使用的情况，JavaScript 可以节省时间并简化开发。此外，JavaScript 请求是异步的——这意味着它们可以与其他进程并行运行。例如，可以在页面仍在加载时异步处理对其他域的 JavaScript 请求。

同源策略
同源策略是客户端编程语言（包括 JavaScript）中的一个重要安全概念。所有 Web 浏览器都遵守此策略，并将站点上运行的脚本限制为仅向同一站点发送请求。浏览器使用端口号（例如 80）和主机名（例如 my.domain.com）的组合来确定“站点”的范围。然而，同源策略也有例外，包括使用 HTML

带填充的 JSON (JSONP)
JSONP 使用

典型的 JSONP 请求可能如下所示：

动态生成的 JavaScript 文件可能如下所示：

jsonpcallback({
“id”: “123”,
“comments”: “6”,
“name”: “sample”
});
JSONP 中的“填充”是指包装格式化 JSON 对象的函数调用。这种填充并不总是一个函数调用。虽然不常见，填充也可以是变量赋值：

var data = {
“id”: “123”,
“comments”: “6”,
“name”: “sample”
};
填充的目的是允许在应用程序中使用格式化数据。

用于 JSONP 的 jQuery
jQuery JavaScript 库具有使使用 JSONP 变得轻而易举的功能。jQuery 的 $.ajax()函数将自动处理

$.ajax({
//JSONP API
url: “http://remote.domain.com/data/?callback=jsonpcallback&id=123”,
//the name of the callback function
jsonp: “jsonpcallback”,
//tell jQuery to expect JSONP
dataType: “jsonp”,
//tell YQL what we want and that we want JSON
data: {
id: “123”
},
//work with the response
success: function(data) {
console.log(data); //formatted JSON data
}
});
console.log(data);
{ “id”: “123”, “comments”: “6”, “name”: “sample” }
或者，如果 jQuery 不可用（开发可嵌入小部件时经常出现这种情况），则可以使用原始 JavaScript。以下是最小的 JSONP 实现：

//callback function
function jsonpcallback(data) {
//do stuff with JSON
console.log(data);
}

//create HTML script tag
var script = document.createElement(‘script’);
script.src = “http://remote.domain.com/data/?callback=jsonpcallback&id=123”

//inject script tag into head
document.getElementsByTagName(‘head’)[0].appendChild(script);
将数据引导到页面
2013 年 12 月 11 日
“自举”究竟是什么意思？使用同步服务器端模板将数据硬编码到页面。

大多数开发人员面临着将数据从服务器端发送到客户端以使用 JavaScript 的挑战。对此有几种解决方案。其中最常见的是创建一个可以使用异步 javascript 使用的 REST 端点，通常使用 jQuery Ajax函数。

异步加载数据时页面加载时间如何影响？用户的体验是否直接取决于这些数据？
创建 REST 端点是否存在不必要的开销？
REST 端点是否需要安全？认证？CSRF 代币化？
根据对这些问题的回答，引导可能是一种优雅的解决方案，可以将数据快速且最少的开发到客户端。

它在服务器端通常看起来像这样：

它在客户端呈现时看起来像这样：

当浏览器呈现对象时，现在可以立即使用 JavaScript 调用这个 boostrapped JSON 对象：

console.log(bootstrap)
// { “app_id”: “a1b2c3”, … }

console.log(bootstrap.title)
// My Cool App
注意：最好将引导对象放在页面顶部附近，以便它可以立即使用，甚至在剩余的 html/css/javascript 加载之前。

引导对象的主要优势在于无需使用异步 JavaScript 从 REST 端点调用数据时节省的时间。如果您通常使用 jQuery Ajax 来执行此操作，则将添加 100-500 毫秒的先决条件加载时间以访问该jQuery.ajax()函数。任何从 REST 端点检索数据的 ajax 请求都会带来额外的加载时间开销。

如果您的应用程序依赖于这些数据，那么同步加载（又名“引导式”）JSON 数据将使您的应用程序变得活泼且用户满意。更不用说，由于服务器端模板，REST 端点安全考虑因素被取消。

释放嵌套的力量
2013 年 12 月 10 日
嵌套 JSON 对象的使用通常允许开发人员打破 MySQL 和 MSSQL 等数据库中使用的常见关系模式。当不限于基于行和列的浅层数据模式时，数据可以采用新的结构以更好地满足开发需求。在持久层中使用 JSON 时，嵌套对象通常可用于替换可能存在于关系数据模式中的简单关系。

嵌套的 JSON 对象
以 JSON 格式存储的“员工”对象示例。

{
“id” : “1”,
“f_name” : “Adam”,
“l_name” : “Smith”,
“skills” : [
“web development”,
“ux design”,
“data science”
],
“team”: “engineering”
}
像这样的嵌套可以大大简化数据存储，并使数据更容易被应用程序消化和遍历。与存储在行和列中的数据不同，JSON 可以构造为无限深。对象可以嵌套在对象内部、嵌套在对象内部等。

关系数据库结构
与上述类似的数据集在关系数据模式中可能如下所示：

员工 [表格]
| id | f_name | l_name | team |

| 1 | Adam | Smith | engineering |
技能 [表格]
| id | name |

| 1 | web development |
| 2 | ux design |
| 3 | data science |
员工技能 [表]
| id | employee_id (fk) | skill_id (fk) |

| 1 | 1 | 1 |
| 2 | 1 | 2 |
| 3 | 1 | 3 |
在这种情况下，为了定义技能和员工之间的关系，我们不得不使用三个表，每个表都具有严格的结构。JSON 的成本效益是显而易见的，尤其是在数据存储需求不断变化的情况下。想象一下维护 3 个表与一个灵活的 JSON 对象的成本。并非所有数据都适合 JSON。对于那些重视可维护性和灵活性而不是刚性模式的人来说，这是一个极好的替代方案 - 越来越受欢迎。

存储分析数据
2013 年 12 月 9 日
JSON 是设置自定义分析数据存储的一个有吸引力的选项。JSON 的灵活性允许网站所有者灵活地存储数据并在更改跟踪数据方面发挥创意——所有这些都无需担心更改数据库架构。

下面是一个包含分析数据的对象的示例：

{
“_id”:“0e494339-c94e-4834-93e6-8f0896c5346c”,
“_timestamp”:“1386697259630”,
“_uid”:“843f8e4f888de5b9”,
“_url”:“http://www.mysite.com”,
“_referrer”:"",
“_category”:“campaign”,
“_action”:“share”,
“_browser”:{
“pdf”:“1”,
“qt”:“1”,
“realp”:“0”,
“wma”:“0”,
“dir”:“0”,
“fla”:“1”,
“gears”:“0”,
“ag”:“0”,
“java”:“1”,
“res”:“1440x900”,
“cd”:“24”,
“cookie”:“1”
},
“medium”:“twitter”,
“campaign_id”:“1”,
“product_id”:“2”,
“other_field”: “anything”
}
请注意，某些字段带有下划线前缀——这些表示“默认”字段，而没有下划线的字段被视为“自定义”字段。这允许创建扩展我们的 JSON 对象，同时仍然提供将在分析应用程序中使用的最低限度的默认值。例如，在实施分析跟踪的一个月内，业务需求发生变化，现在跟踪新字段“widget_type”很重要。无需更改数据库架构（常见于关系数据库），我们可以将“widget_type”字段添加到分析对象并保存。

随着时间的推移，随着跟踪需求的扩大，您的分析对象中的大小（和字段数量）会无限扩展以满足。当这些对象与像 a(href=”http://cloudant.com”) 这样的优秀 DBAAS（数据库即服务）一起存储时，cloudant.com 数据可以很容易地挖掘出有趣的模式，并返回到仪表板进行进一步的可视化。许多基于 Web 的数据可视化库本身就使用 JSON，因此以这种格式开始将额外节省时间。