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函数 在控制台输出得到的数据

posted @ 2018-09-17 21:42  WZ97  阅读(196)  评论(0编辑  收藏  举报