用jsonp来解决跨域问题的三种简单的方法

jsonp实现跨域的方法

使用ajax方法获取数据不能跨域,为了解决这个问题,普遍使用jsonp来实现跨域,下面是对jsonp方法的简单总结:

例子:假如想获取京东的评论的数据,可以在京东的评论面板打开network找到和ajax请求相关的有回调函数callback的请求url, 
如找到一个url, 如:


在响应里可以找到回调函数对应的方法:


这是在服务器上写入的方法用来传输数据。

例如获取到的url为 
https://club.jd.com/comment/productPageComments.action?callback=fetchJSON_comment98vv68218&productId=4586850&score=0&sortType=5&page=0&pageSize=10&isShadowSku=0&fold=1
此请求对应的函数方法为fetchJSON_comment98vv68218()

  • 方法1:先写一个简单的页面用来跨域获取京东的数据:
<div id="box"></div>
var box = document.getElementById("box");
function fetchJSON_comment98vv68218(data){
var array = data.comments;
for(var i=0;i<array.length;i++){
box.innerHTML += array[i].content+"<br>";
}
}

<script src="https://club.jd.com/comment/productPageComments.action?callback=fetchJSON_comment98vv68218&productId=4586850&score=0&sortType=5&page=0&pageSize=10&isShadowSku=0&fold=1"></script>

在服务器上运行这个文件就能获取数据了。

  • 方法2:上面一种方法的升级,可以动态创建script标签并将获取数据的请求方法进行封装:
<h3 id="box"></h3>
<input type="button" value="click" id = "btn">
var btn = document.getElementById("btn");
var h = document.getElementById("box");
function request(url,callback){
window.fetchJSON_comment98vv118 = callback;
var oscript = document.createElement("script");
oscript.src = url;
document.body.appendChild(oscript);
document.body.removeChild(oscript);
}

btn.onclick = function(){
request("https://club.jd.com/comment/productPageComments.action?callback=fetchJSON_comment98vv118&productId=11488717440&score=0&sortType=5&page=0&pageSize=10&isShadowSku=0&fold=1",function(data){
for(var i=0;i<data.comments.length;i++){
h.innerHTML += data.comments[i].content + "<br>";
}
});
}
  • 方法3:最后一种最简单的方法是使用jquery封装好的callback方法来跨域:注意此时的dataType为jsonp,不要忘记写jsonpCallback函数
 $.ajax({
"url":"https://club.jd.com/comment/productPageComments.action?callback=fetchJSON_comment98vv118&productId=11488717440&score=0&sortType=5&page=0&pageSize=10&isShadowSku=0&fold=1",
"dataType":"jsonp",
"jsonpCallback":"fetchJSON_comment98vv118",
"success":function(data){
console.log(data);
}
})
posted @ 2017-07-03 20:25  circe  阅读(...)  评论(...编辑  收藏