JSONP 入门：轻松实现跨域数据共享

JSONP（JSON with Padding）是一种跨域请求数据的技术，它允许浏览器从其他域名的服务器请求数据，并通过回调函数来处理响应数据。与传统的 Ajax 技术相比，JSONP 更加简单易用，不需要复杂的配置和处理跨域错误，因此非常适合用于构建跨域应用。

JSONP 的工作原理如下：

1. 客户端向服务器发送一个请求，请求中包含一个回调函数名。
2. 服务器收到请求后，将数据封装在一个 JSON 对象中，然后将这个 JSON 对象作为回调函数的参数，并将其发送给客户端。
3. 客户端收到响应后，调用回调函数，并将 JSON 对象作为参数传入。
4. 回调函数处理 JSON 对象中的数据，并将其展示给用户。

下面是一个演示 JSONP 的代码示例：

HTML 代码：

<script class="lazy" data-src="https://example.com/jsonp.js"></script>

<script>
  function callback(data) {
    // 处理数据并将其展示给用户
  }
</script>

JSONP 代码：

var data = {
  name: "John Doe",
  age: 30
};

// 将数据封装在一个 JSON 对象中
var json = JSON.stringify(data);

// 将 JSON 对象作为回调函数的参数，并将其发送给客户端
document.write("<script>callback(" + json + ");</script>");

在上面的示例中，客户端向服务器发送了一个请求，请求中包含了一个回调函数名 callback。服务器收到请求后，将数据封装在一个 JSON 对象中，然后将这个 JSON 对象作为 callback 函数的参数，并将其发送给客户端。客户端收到响应后，调用 callback 函数，并将 JSON 对象作为参数传入。callback 函数处理 JSON 对象中的数据，并将其展示给用户。

JSONP 是实现跨域数据共享的一种简单有效的方法，它不需要复杂的配置和处理跨域错误，因此非常适合用于构建跨域应用。