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 原理
原文地址：https://www.cnblogs.com/asas/p/9665107.html