Jsonp 原理

Posted asas

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jsonp 原理相关的知识，希望对你有一定的参考价值。

JSONP

jsonp的原理很简单，就是动态的创造script标签，然后利用script的src 不受同源策略约束来跨域获取数据。

第一步 
动态创建

var script = document.createElement("script");
script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);

我们在这里借助了豆瓣api来实现数据的交互

第二步 
在页面中，返回的JSON作为参数传入回调函数中，我们通过回调函数来来操作数据。

function handleResponse(response){
　　console.log(response)// 对response数据进行操作代码

}

完整示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSONP实现跨域2</title>
</head>
<body>
    <div id="mydiv">
        <button id="btn">点击</button>
    </div>
</body>
<script type="text/javascript">
    function handleResponse(response){
            console.log(response);
    }
</script>
<script type="text/javascript">
    window.onload = function() {

    var oBtn = document.getElementById(‘btn‘);

    oBtn.onclick = function() {     

        var script = document.createElement("script");
        script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
        document.body.insertBefore(script, document.body.firstChild);   
    };
};
</script>
</html>

当点击按钮时  创建了script标签  并通过链接后边的callback来调用了事先声明好的handleResponse函数  在控制台输出得到的数据



以上是关于Jsonp 原理的主要内容，如果未能解决你的问题，请参考以下文章

JSONP原理

jsonp的工作原理，观后必然懂！！！

JSONP跨域的原理解析

前端跨域之Jsonp实现原理及.Net下Jsonp的实现

转JSONP跨域的原理解析

剖析JSONP原理的小例子