那我来给您详细讲解一下如何理解JSON和JSONP。
什么是JSON？
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。它使用易于人们阅读和编写的文本格式来传输和存储数据。JSON可以使用JavaScript函数eval()进行解析。
JSON格式由键值对构成，最外层是一个大括号（{}）形成的对象，键值对之间使用逗号（,）进行分隔。键必须是字符串，而值可以是任何JSON类型，包括数组、对象、字符串、数字、布尔值和null。例如：
{
"name": "张三",
"age": 22,
"hobbies": ["篮球", "游泳", "编程"],
"address": {
"province": "广东",
"city": "深圳",
"district": "宝安"
},
"isNull": null,
"isTrue": true,
"isFalse": false
}
什么是JSONP？
JSONP（JSON with Padding）是一种使用过时但仍然常用的跨域数据交互方式。它的原理是利用script标签没有跨域限制这一特性，实现从其他域名（网站）获取JSON数据，解决了AJAX不能跨域访问的问题。
使用JSONP需要在页面上引入一个外部的JavaScript文件，该文件通过动态创建script标签，并通过src属性指向API地址，将JSON数据作为参数传递给一个用户定义的回调函数。后端需要对请求做特殊处理，将JSON数据作为函数的参数返回。例如：
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSONP Demo</title>
</head>
<body>
<script type="text/javascript" src="http://api.example.com/jsonp?callback=handleData"></script>
<script type="text/javascript">
function handleData(data) {
console.log(data);
}
</script>
</body>
</html>
// API返回的JSONP格式数据示例
handleData({
"name": "张三",
"age": 22,
"hobbies": ["篮球", "游泳", "编程"],
"address": {
"province": "广东",
"city": "深圳",
"district": "宝安"
},
"isNull": null,
"isTrue": true,
"isFalse": false
});
在URL上添加callback参数，该参数的值是一个回调函数的名称，后端将返回数据作为该回调函数的参数进行返回。
示例说明
首先，我们可以使用XMLHttpRequest对象（简称xhr）与服务端进行交互，返回JSON格式的数据。
// 发送AJAX请求，获取JSON数据
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 解析JSON数据
var data = JSON.parse(xhr.responseText);
console.log(data);
}
};
xhr.open('GET', 'http://api.example.com/data.json');
xhr.send();
接下来，我们可以使用JSONP方式获取与该域名下不同的域名（数据源）的JSON数据。
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSONP Demo</title>
</head>
<body>
<script type="text/javascript" src="http://api.example.com/jsonp?callback=handleData"></script>
<script type="text/javascript">
function handleData(data) {
console.log(data);
}
</script>
</body>
</html>
// API返回的JSONP格式数据示例
handleData({
"name": "张三",
"age": 22,
"hobbies": ["篮球", "游泳", "编程"],
"address": {
"province": "广东",
"city": "深圳",
"district": "宝安"
},
"isNull": null,
"isTrue": true,
"isFalse": false
});
以上两个示例可以帮助您更好地理解JSON和JSONP。希望能对您有所帮助！
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：说说JSON和JSONP 也许你会豁然开朗 - Python技术站
微信扫一扫 
支付宝扫一扫 