JSONP 使用

我们都知道JSONP是解决跨域的一种解决方案。但他怎么使用、又怎么工作呢？

请先参考这篇文章：https://blog.csdn.net/u011897301/article/details/52679486

首先要理解函数定义在客户端，调用的话是跨域加载调用方法，并在调用的地方以参数的形式传递前端想要的数据。这句话比较抽象，我们举个例子：

前端代码定义一个function:

function jsonhandle(data){
    alert("age:" + data.age + "name:" + data.name);
}

后端返回的数据定义如下：

jsonhandle({
    "age" : 15,
    "name": "张三",
})

通过JSONP的方式加载，我这里用的是这个库：https://github.com/webmodules/jsonp，加载方法如下：

/**
 * 发起jsonp请求的promise形式
 * @param url 请求地址
 * @param ajaxData 附加ajax配置
 * @constructor
 */
function Jsonp = (url, ajaxData = {}) => {
  return new Promise((resolve, reject) => {
    jsonp(
      realUrl(url), {
        timeout: 60000,
        ...ajaxData
      },
      (err, data) => {
        if (err) {
          reject(err.message)
        } else {
          resolve(data)
        }
      }
    )
  })
}

function getUpgrade = () => {
  return Jsonp('https://yn-oa.oss-cn-shanghai.aliyuncs.com/static/js/upgrade.js', {
    name: 'upGradeData'
  })
}

 getUpgrade().then(res => {
       console.log('这里是后端以参数形式传来的数据:',res);
 })

注意：上面getUpgrade方法里的name（函数名）和后端返回的函数名要一致。为了扩展功能，您当然可以传递作何变量，在后端以如下形式收取：

<?php
$data = array(
    'age' => 20,
    'name' => '张三',
);

$callback = $_GET['callback'];

echo $callback."(".json_encode($data).")";
return;

这样后端就可以动态的返回函数名和数据。