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; } }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!