Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

什么是跨域

跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。

例如：a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。注意：跨域限制访问，其实是浏览器的限制。理解这一点很重要！！！

同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域
Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准；

而在Web页面上调用js文件时则不受是否跨域的影响（不仅如此，凡是拥有"src"这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>。跨域访问数据就只有一种可能，那就是在远程服务器上设法把数据装进js格式的文件里，供客户端调用和进一步处理。

web客户端通过与调用脚本一模一样的方式，来调用跨域服务器上动态生成的js格式文件（一般以JSON为后缀）

为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

 jsonp 的核心则是动态添加 <script> 标签来调用服务器提供的 js 脚本，jsonp是一种方式或者说非强制性协议，如同ajax一样，它也不一定非要用json格式来传递数据，如果你愿意，字符串都行，只不过这样不利于用jsonp提供公开服务

前端代码：

<script>
 
        function callback_12server(response) {
            console.log('process 12-server msg');
            for(var i=0; i<response.length; i++){
                console.log("姓名："+response[i].uname);
                console.log("邮箱："+response[i].uemail);
            }
        }
 
        $(function () {
            $("#btnCross").click(function () {
                // 访问http://127.0.0.1:5000/12-cross
                // 请求http://0.0.0.0:5000/12-server
                var script = document.createElement("script"); // 创建script元素（标签）
                script.type = "text/javascript";
                script.src = "http://0.0.0.0:5000/12-server?callback=callback_12server";
                $("body").append(script);
            });
        });
 </script>

后端代码：
# python，flask框架
@app.route('/12-server')
def server12():
    # 接收前端传过来的callback()回调函数
    callback = request.args.get('callback')
    # 从数据库中查询数据
    users = User.query.all()
    list = []
    # 遍历users数据，添加到list列表中
    for u in users:
        list.append(u.to_dict()) # to_dict() 是将类属性转换成字典类型
    # 将列表转换成字符串
    # jsonStr数据格式是： "[{key01:value,key:value},{key:value}]"
    jsonStr = json.dumps(list)
    return callback+"("+jsonStr+");" # 返回给前端的回调函数： "callback(jsonStr)"

JSONP

1.概念 JSONP的名字是json + padding 主要的意思是将服务器端发送的数据填充html页面中 JSONP和AJAX没有一毛钱关系

2.原理 在html页面添加了一个script标签 通过src的标签的src请求一个地址 请求的这个地址返回的格式一定是一个函数名 函数名(JSON数据) 

3.缺点 src只能发送get请求 也就是说JSONP只能处理get请求方式 不能处理其他 

4.使用 **script标签**引入的内容和**文件类型没有关系** 只要是引入的文件都会被当成**JS代码**进行处理 所以 因为script的方式不会产生跨域 所以说没有跨域问题 

html <!DOCTYPE html> <html lang="en">

<head> <meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<button id="btn">点击我</button>

<h2>渲染结果</h2>

<div id="div"></div>

</body>

</html>

<script>

function render(res){

let div = document.getElementById('div');

div.innerHTML = res.name;

}

let btn = document.querySelector('#btn');

btn.onclick = function(){

let script = document.createElement("script");

// script.src = "./demo.txt";

script.src = "http://127.0.0.1:3000/login";

document.body.appendChild(script); }

</script>

以上就是Python+Jsonp 轻松实现跨域原理的详细内容，更多信息请关注OD云其它相关文章！

本文URL：http://www.odweb.cn/news_show.html?id=207