说说JSON和JSONP 也许你会豁然开朗-前端开发

那我来给您详细讲解一下如何理解JSON和JSONP。

那我来给您详细讲解一下如何理解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。希望能对您有所帮助！