JSONP解决跨域取数据的问题

前端之家收集整理的这篇文章主要介绍了JSONP解决跨域取数据的问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。


1.就是在html尾部添加script src标签,只不过src地址要加参数(或者叫包装函数),参数即js要使用的函数

如:<script src = "http://gumball.wickedlysmart.com/?callback = updateSales"></script>

2.例如callback这种参数,要看对方服务器的要求添加

3.这种方法,返回来的即已是js对象,无需像XMLHttpRequest使用JSON.Parse转换

4.XMLHttpRequest为了避免恶意的js访问你的服务器,所以不允许跨域,JSONP可以

5.如果需要调用第三方远程服务器数据,通常需要JSONP

6.JSON数据包装在JSONP中的函数调用称为回调,需要将回调函数制定为JSONP请求中的一个url参数,如updateSales

7.如果需要多次请求获取最新数据,就需要用setInterval定时器,定时运行函数,而不是简单的一个src,见下面例子


window.onload = init();

function init ()
{
setInterval(handleRefresh,3000); //3秒定时器
function handleRefresh()
{
var url = "http://gumball.wickedlysmart.com/?callback=updateSales" + "&lastreporttime=" +lastReportTime + "&random=" + (new date()).getTime(); //3个参数,最后一个用了一个获取时间的随机数,来避免浏览器缓存问题
var newScriptElement = document.createElement("script");
newScriptElement.setAttribute("src",url);
newScriptElement.setAttribute("id","jsonp");

var oldScriptElement = document.getElementById("jsonp");
var head = document.getElementsByTagName("head")[0]; //注意这种用法,gettagname取到的是标签数组
if (oldScriptElement == null)
{
head.appendChild(newScriptElement);
}
else
{
head.replaceChild(newScriptElement,oldScriptElement);
}
}


var lastReportTime = 0; function updateSales(sales) { var salesDiv = document.getElementById("sales"); for (var i = 0; i<sales.length; i++) { var sale = sales[i]; var div = document.createElement("div"); div.setAttribute("class","saleItem"); div.innerHTML = sale.name + " sold " + sale.sales + " gumballs"; salesDiv.appendChild(div); } if (sales.length > 0) { lastReportTime = sales[sales.length-1].time; } }

猜你在找的Json相关文章