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