手动实现JSONP

JSONP是一种跨域数据传输的解决方案，通常用于通过script标签获取远程服务器上的数据。使用JSONP技术时，前端代码会生成一个动态的script标签，并在链接中附带需要获取的数据及回调函数名称等参数，然后将该script标签插入到页面中，以触发跨域请求并获取数据。

具体的实现流程如下：

1. 在前端代码中定义一个回调函数，用于接收服务端返回的数据。回调函数可以直接写在页面中，或者通过全局对象的方式定义。

2. 在前端代码中定义一个动态的script标签，设置其src属性为服务端接口的URL地址，并在链接中添加callback参数，值为第一步定义的回调函数名称。

3. 将该script标签插入到html页面中，等待服务端返回数据。

4. 服务端接受到请求后，将需要传递给前端的数据包装成JSON格式，然后将其作为字符串传递给callback参数指定的回调函数；前端代码接收到数据后，自动执行回调函数，从而获取到数据。

以下是手动实现JSONP的简单示例代码：

// 前端代码
function handleData(data) {
  console.log(data);
}

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

// 服务端代码（Node.js）
app.get('/data', function(req, res) {
  const data = { name: '张三', age: 20 };
  const jsonData = JSON.stringify(data);
  const callbackName = req.query.callback;
  const jsonpStr = `${callbackName}(${jsonData})`;
  res.send(jsonpStr);
});

在上述代码中，前端代码定义了一个名为handleData的回调函数，用于接收服务端返回的数据。然后，动态创建了一个script标签，其中src属性指向服务端接口地址，并将callback参数设置为handleData。当该script标签被插入到页面中后，会自动触发请求，并执行回调函数来获取数据。

服务端则根据查询参数callback的值，构造出类似handleData({…})格式的字符串作为响应内容，以实现JSONP跨域传输的目的。