下面就详细讲解一下关于“浅析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技术站

浅析json与jsonp区别及通过ajax获得json数据后格式的转换