前端代码
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>JSONP</title></head><body></body><script type="text/javascript"> ???/* 封装一个 JSONP 的 交互类 */ ???var JSONP = (function () { ???????/** ????????* @param url => 访问的地址 ????????* @param cbKey => 回调函数的名称, 服务端接收的字段 ????????* @param json => 传给后台的数据, 一个单层的 json 对象 ????????* @param callBack => 回调函数 ????????*/ ???????var $ = {}; ???????$.GetJson = function (url, cbKey, json, callBack) { ???????????/* 获取一个不会重复的 JSONP 回调名称, 并将该名称注入到类中实现一个方法 */ ???????????var cbValue = "json" + Math.random().toString(16).substr(2); ???????????$[cbValue] = function (res, id) { ???????????????var domObj = document.getElementById(id.split(".")[1]).remove(0); ???????????????callBack(res); ???????????}; ???????????/* 拼接请求地址 */ ???????????url = url + "?" + cbKey + "=JsonP." + cbValue; ???????????for (var key in json) { ???????????????url += "&" + key + "=" + json[key]; ???????????} ???????????/* 拼接 script 标签 并写入文档对象 */ ???????????var script = ‘<script id="‘+ cbValue +‘" src="‘+ url +‘"><\/script>‘; ???????????document.write(script); ???????}; ???????return $; ???})(); ???/* 调用 JSONP 交互类的方法 */ ???JSONP.GetJson("http://localhost/JsonP/Index", "cb", {id: 1}, function (res) { ???????console.log(res); ???});</script></html>后端代码 => 基于 KOA 框架
// 引入外部依赖let Router = require("koa-router");// 实例化一个子路由let router = new Router();// 这里写业务逻辑router.get("/Index", async (ctx) => { ???// 接收前端传过来的回调方法 ???let callback = ctx.query.cb; ???// 一番业务逻辑之后的返回值 ???let result = { ???????id: ctx.query.id, ???}; ???ctx.type = "text/javascript"; // 设置输出为 JavaScript 文件 ???/** ????* 返回给前端的数据格式 ????* 前端传递的回调方法名( 返回给前端的数据格式, 前端传递的回调方法名 ) ????* 如: cb( {id: 1}, cb ) ????*/ ???ctx.body = `${callback}(${JSON.stringify(result)}, "${callback}")`;});// 对外暴露模块module.exports = router;
Node+H5 实现简单的 JSONP 封装
原文地址：http://www.cnblogs.com/lovling/p/7436114.html