JSONP原理及简单实现

[Rashomon511]

同源策略

同源协议指的是页面若域名，端口，协议都相同，便具有相同的源。 目的是为了保证用户信息的安全，防止恶意的网站窃取数据。 解决这种同源策略的方法便成为跨域。

JSONP

JSONP是JSON with Padding的略称。允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问。

原理

利用script标签的src属性调用资源不跨域的特性，向服务端请求同时传一个callback回调方法名作为参数，服务端接受函数名生成返回json格式资源的代码。

实现

<script type="text/javascript">
    // 获取到跨域资源后的回调
    var handleFn = function(data){
        console.log(data)  // JSONP跨域成功返回的资源
    };
    var url = "resource-url?callback=handleFn";
    var script = document.createElement('script');
    script.setAttribute('src', url);
    document.getElementsByTagName('head')[0].appendChild(script); 
</script>
// 服务端
handleFn({
    "date": "2019-6-18",
    "slogan": "夕夕姐真好看",
    "content": "稳坐沙发" 
});
同源策略

同源协议指的是页面若域名，端口，协议都相同，便具有相同的源。
目的是为了保证用户信息的安全，防止恶意的网站窃取数据。
解决这种同源策略的方法便成为跨域。

JSONP

JSONP是JSON with Padding的略称。允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问。

原理

利用script标签的src属性调用资源不跨域的特性，向服务端请求同时传一个callback回调方法名作为参数，服务端接受函数名生成返回json格式资源的代码。

实现

<script type="text/javascript">
    // 获取到跨域资源后的回调
    var handleFn = function(data){
        console.log(data)  // JSONP跨域成功返回的资源
    };
    var url = "resource-url?callback=handleFn";
    var script = document.createElement('script');
    script.setAttribute('src', url);
    document.getElementsByTagName('head')[0].appendChild(script); 
</script>
// 服务端
handleFn({
    "date": "2019-6-18",
    "slogan": "夕夕姐真好看",
    "content": "稳坐沙发" 
})
同源策略

同源协议指的是页面若域名，端口，协议都相同，便具有相同的源。
目的是为了保证用户信息的安全，防止恶意的网站窃取数据。
解决这种同源策略的方法便成为跨域。

JSONP

JSONP是JSON with Padding的略称。允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问。

原理

利用script标签的src属性调用资源不跨域的特性，向服务端请求同时传一个callback回调方法名作为参数，服务端接受函数名生成返回json格式资源的代码。

实现

<script type="text/javascript">
    // 获取到跨域资源后的回调
    var handleFn = function(data){
        console.log(data)  // JSONP跨域成功返回的资源
    };
    var url = "resource-url?callback=handleFn";
    var script = document.createElement('script');
    script.setAttribute('src', url);
    document.getElementsByTagName('head')[0].appendChild(script); 
</script>
// 服务端
handleFn({
    "date": "2019-6-18",
    "slogan": "夕夕姐真好看",
    "content": "稳坐沙发" 
});