关于JSON与JSONP简单总结
什么是JSON？
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。
JSON格式如下：
{
"name": "John",
"age": 30,
"country": "USA",
"hobbies": ["reading", "traveling"]
}
其中，每个键值对用冒号分隔，每个键值对之间用逗号分隔，整个结构用大括号括起来。
什么是JSONP？
JSONP（JSON with Padding）是一种跨域数据交互方式。由于浏览器的同源策略，JavaScript只能访问与本网页同源的资源，而JSONP通过动态创建DOM节点的方式引入一个外部脚本，再将JSON数据作为该脚本的参数传递过来，从而实现跨域数据交互。JSONP请求的响应数据需要是一段可执行的JavaScript代码，由于可以在前端执行，所以JSONP常用于跨域调用API。
JSONP的格式如下：
callback({
"name": "John",
"age": 30,
"country": "USA",
"hobbies": ["reading", "traveling"]
})
其中callback是前端定义的一个回调函数，服务端通过将JSON数据作为参数传递到callback函数中来构造响应。
JSON与JSONP示例
JSON示例
以下示例演示如何使用JavaScript解析JSON数据：
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var jsonText = '{ "name": "John", "age": 30, "country": "USA", "hobbies": ["reading", "traveling"] }';
var obj = JSON.parse(jsonText);
document.getElementById("demo").innerHTML = "Name: " + obj.name + ", Age: " + obj.age;
</script>
</body>
</html>
解析后输出结果为：Name: John, Age: 30。
JSONP示例
以下示例演示如何使用jQuery跨域调用API：
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<p id="demo"></p>
<script>
function getData(data) {
var name = data.name;
var age = data.age;
document.getElementById("demo").innerHTML = "Name: " + name + ", Age: " + age;
}
$.ajax({
url: "http://example.com/api?callback=getData",
dataType: "jsonp",
});
</script>
</body>
</html>
将getData函数作为callback参数传递给API，JSONP响应的数据将作为getData函数的参数，解析后输出结果同上。
总结
JSON是一种常用的数据交换格式，易于读写，常用于前后端数据交互。JSONP则是一种跨域数据交互方式，常用于跨域调用API。了解JSON与JSONP的格式以及相关应用场景，有助于提高前端开发的技术水平。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：关于JSON与JSONP简单总结 - Python技术站
微信扫一扫 
支付宝扫一扫 