请说说json和jsonp的区别？

打野赵怀真

2025-02-03 1,505 阅读2分钟

JSON与JSONP的区别

1. 定义

JSON（JavaScript Object Notation）：一种轻量级的数据交换格式，易于人阅读和编写，同时也便于机器解析和生成。JSON以键值对的方式组织数据，通常用于前后端数据传输。
JSONP（JSON with Padding）：一种使用<script>标签来请求跨域数据的技术。通过动态创建<script>标签来实现跨域请求，服务器返回的内容是一个函数调用，其参数是JSON数据。

2. 用途

JSON：一般用于同源的请求和数据交互，适合在前后端通信中使用。
JSONP：用于解决浏览器的同源策略限制，使得网页能够请求不同域的资源，常用于跨域请求。

3. 请求方式

JSON：通过AJAX（异步JavaScript和XML）请求数据，通常使用XMLHttpRequest或fetch API。

// 使用fetch请求JSON数据
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

JSONP：通过动态创建<script>标签来实现，浏览器会自动加载该标签的src属性指向的URL。

// 使用JSONP请求数据
function handleResponse(data) {
  console.log(data);
}
const script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleResponse';
document.body.appendChild(script);

4. 数据格式

JSON：数据以标准的JSON格式返回，通常是对象或数组。

{
  "name": "Alice",
  "age": 30
}

JSONP：数据以JavaScript函数调用的形式返回，通常是一个函数名和JSON对象作为参数。

handleResponse({
  "name": "Alice",
  "age": 30
});

5. 安全性

JSON：由于使用AJAX请求，数据的返回和处理是在同一个域内进行，相对安全。
JSONP：由于使用<script>标签请求数据，存在一定的安全风险，比如被恶意脚本利用，因此对返回数据的来源需要特别小心。

6. 错误处理

JSON：可以通过Promise或try...catch来处理请求过程中的错误。

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('网络响应不正常');
    }
    return response.json();
  })
  .catch(error => console.error('请求失败:', error));

JSONP：错误处理相对复杂，通常需要在请求超时或失败时进行处理。

function handleResponse(data) {
  console.log(data);
}

const script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleResponse';
script.onerror = function() {
  console.error('请求失败');
};
document.body.appendChild(script);

7. 性能

JSON：由于使用XHR请求，服务器可以返回更大的数据量，且支持HTTP缓存。
JSONP：由于是通过<script>标签请求，通常只能获取少量数据，而且不支持HTTP缓存。

8. 支持浏览器

JSON：所有现代浏览器均支持AJAX请求，兼容性较好。
JSONP：因为依赖于<script>标签，所有支持JavaScript的浏览器都能使用，但在某些情况下可能存在兼容性问题。

9. 总结

JSON和JSONP都是常用的数据交换格式，但它们的使用场景、请求方式、安全性等方面存在明显区别。JSON适用于同源请求，提供了更好的安全性和错误处理机制，而JSONP则是用于解决跨域问题，但存在一定的安全隐患。在实际开发中，应根据具体需求选择适合的方式。