下面就详细讲解一下关于“浅析json与jsonp区别及通过ajax获得json数据后格式的转换”的攻略。
一、JSON与JSONP的区别
1. JSON
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，这种文本格式很容易被人类阅读和编写，同时也很容易被机器解析和生成。在现代web应用中，JSON已经成为了一种非常流行的数据格式，用来代替XML格式来作为数据的传输方式。
JSON数据格式基本上由两种数据结构，对象和数组表示。对象是一个无序的键值对集合，用花括号 {} 表示，每个键值对之间使用冒号 : 分隔开来。例如：
{
"name": "John",
"age": 20,
"address": {
"city": "Beijing",
"street": "Xidan"
}
}
数组是值的一个有序集合，用方括号 [] 表示，在数组中的每个值之间使用逗号 , 分隔开来。例如：
[
"apple",
"banana",
"orange"
]
2. JSONP
JSONP (JSON with Padding) 是一种跨域数据请求方式，它允许在服务器端动态地生成JSON数据并将其在客户端调用指定的函数时作为参数传递。
JSONP主要是通过script标签的src属性来请求数据，服务器返回的是一段JavaScript代码，而这段代码的执行结果就是所需的JSON数据。例如：
/* HTML页面中的代码 */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSONP示例</title>
</head>
<body>
<div id="result"></div>
<script>
function handleJSONP(data) {
document.getElementById("result").innerHTML = JSON.stringify(data);
}
var script = document.createElement("script");
script.src = "http://example.com/data.php?callback=handleJSONP";
document.getElementsByTagName("head")[0].appendChild(script);
</script>
</body>
</html>
/* PHP服务器端的代码 */
<?php
$jsonData = array(
"name" => "John",
"age" => 20,
"address" => array(
"city" => "Beijing",
"street" => "Xidan"
)
);
$callback = $_GET["callback"];
echo $callback . "(" . json_encode($jsonData) . ")";
?>
上述代码中的handleJSONP函数就是客户端指定的回调函数，服务器端返回的数据将被作为回调函数调用时的第一个参数传入。
二、通过AJAX获得JSON数据后的格式转换
在前端开发中，我们常常通过AJAX来异步获取数据，这些数据可能是JSON格式的数据，因此需要进行一些格式的转换才能适用于我们的程序。
1. 获取JSON数据
我们可以通过下面的方式使用AJAX来获取JSON数据：
/* 建立AJAX对象 */
var xhr = new XMLHttpRequest();
/* 监听数据返回事件 */
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var jsonData = JSON.parse(xhr.responseText);
console.log(jsonData);
}
};
/* 发送AJAX请求 */
xhr.open("GET", "http://example.com/data.json", true);
xhr.send();
上述代码中，我们使用了XMLHttpRequest对象来发起一个异步请求，当返回的数据状态码为200时，可以获取到返回的数据，并使用JSON.parse方法将其转换为JSON对象。
2. JSON转对象/字符串
在JavaScript中，我们可以使用JSON对象提供的parse和stringify方法来完成JSON与JavaScript对象/字符串之间的相互转换。
2.1 JSON转对象
我们可以使用JSON.parse方法将JSON格式的字符串转换为JavaScript对象。例如：
var jsonString = '{"name":"John","age":20,"address":{"city":"Beijing","street":"Xidan"}}';
var jsonObject = JSON.parse(jsonString);
console.log(jsonObject);
上述代码中，我们将JSON格式的字符串存放到了变量jsonString中，并使用JSON.parse方法将其转换为JavaScript对象，并将其赋值给了变量jsonObject。
2.2 JSON转字符串
我们可以使用JSON.stringify方法将JavaScript对象/数组转换为JSON格式的字符串。例如：
var jsonObject = {
"name": "John",
"age": 20,
"address": {
"city": "Beijing",
"street": "Xidan"
}
};
var jsonString = JSON.stringify(jsonObject);
console.log(jsonString);
上述代码中，我们将JavaScript对象{…}存放到了变量jsonObject中，使用JSON.stringify方法将其转换为JSON格式的字符串，并将其赋值给了变量jsonString。
三、示例说明
下面通过两个示例来说明一下JSON和JSONP的使用：
1. 使用JSONP获取百度热榜
我们可以通过JSONP来获取百度热榜的数据，代码如下：
/* 首先定义一个叫做baiduHot的全局函数 */
function baiduHot(data) {
console.log(data);
}
/* 创建script标签来发起请求 */
var script = document.createElement("script");
script.src = "http://top.baidu.com/buzz?b=1&jsonp=baiduHot";
document.getElementsByTagName("head")[0].appendChild(script);
上述代码中，我们定义了一个全局函数baiduHot，用来处理返回的数据，调用时将数据作为参数传入。然后通过创建script标签，并将其添加到文档中来发起JSONP请求，将指定的回调函数名字jsonp=baiduHot传入。
2. 使用AJAX获取新浪微博数据
我们可以通过AJAX来获取新浪微博的数据，并将获取到的JSON数据转换为字符串格式。代码如下：
/* 建立AJAX对象 */
var xhr = new XMLHttpRequest();
/* 监听数据返回事件 */
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var jsonData = JSON.parse(xhr.responseText);
var jsonString = JSON.stringify(jsonData);
console.log(jsonString);
}
};
/* 发送AJAX请求 */
xhr.open("GET", "http://api.weibo.com/2/statuses/public_timeline.json?source=211160679", true);
xhr.send();
上述代码中，我们使用AJAX来获取新浪微博公共时间线的数据，并在响应中将其转换为JSON对象，然后使用JSON.stringify方法将其转换为字符串形式。最终将转换后的字符串打印出来。
以上便是关于“浅析JSON与JSONP区别及通过AJAX获得JSON数据后格式的转换”的攻略了。如果还有不清楚的地方，可以再联系我哦~
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：浅析json与jsonp区别及通过ajax获得json数据后格式的转换 - Python技术站
微信扫一扫 
支付宝扫一扫 