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函数 在控制台输出得到的数据
原文：https://www.cnblogs.com/asas/p/9665107.html