一看就懂：jsonp详解

什么是JSONP

JSONP（JSON with Padding）是一种跨域的数据交互方式。它利用了script标签没有跨域限制的特点，通过动态创建script标签来请求服务器返回数据，并通过回调函数来处理返回的数据。

JSONP的原理

在客户端动态创建一个script标签，其中的src属性指向服务器端数据接口，并在接口地址中指定回调函数的名称，服务器接收到请求后，在处理完请求的数据后，再将数据作为参数传递给回调函数并返回给客户端。客户端通过全局函数来处理返回的数据。

JSONP的使用

在客户端中，需要定义一个全局函数接收从服务器返回的数据。然后动态创建一个script标签，将接口地址设置为其src属性，其中接口地址需要指定回调函数的名称，并将script标签添加到HTML文档中。

在服务器端，根据客户端传来的回调函数名称，将处理完数据后的结果直接返回给客户端，数据需要以指定回调函数的形式返回。

JSONP的示例

客户端代码示例

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

let script = document.createElement('script');
script.src = 'http://example.com/api/?callback=callback';
document.body.appendChild(script);

服务端代码示例

let data = {"name":"小明","age":18};
let callback = req.query.callback;
res.send(`${callback}(${JSON.stringify(data)})`);

以上是关于JSONP的完整攻略，通过此文你应该已经掌握了JSONP的原理和使用方法。