JSONP,简单说来这种方法就是让
<h1>销售数据列表</h1>
<div id="sales">
</div>
<!-- 我们的HTML中包括一个<script>元素,这个script的源实际上是一个Web服务的URL。这个Web服务将为我们提供数据的JSON对象。
浏览器遇到页面中的<script>元素时再向src URL发出一个HTTP请求。
-->
<script src="http://gumball.wickedlysmart.com/"></script>
</body>
Web服务器允许你指定一个回调函数,它的做法如下:
http://gumball.wickedlysmart.com/?callback=updateSales
服务器想你发回JSON对象之前,会用updateSales包装这个JSON格式化对象。一般地,Web服务将这个参数命名为callback,不过请查看你Web服务文档,明确Web服务实际使用的参数名。
赶紧来试一试你的JSONP代码:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
// 把请求返回来的数据展示到页面
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 + "==>" + sale.time + "==>" + sale.sales;
salesDiv.appendChild(div);
}
}
</script>
</head>
<body>
<h1>销售数据列表</h1>
<div id="sales">
</div>
<script src="http://gumball.wickedlysmart.com/?callback=updateSales"></script>
</body>
</html>
2.优化
比如我们需要每3秒更新销售数据
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
window.onload = function(){
// 每3秒调用一次handleRefresh处理程序
setInterval(handleRefresh,3000);
}
function handleRefresh(){
var url = "http://gumball.wickedlysmart.com/?callback=updateSales" + "&random=" + (new Date()).getTime();
var newScriptElement = document.createElement("script");
newScriptElement.setAttribute("src",url);
newScriptElement.setAttribute("id","jsonp");
var oldScriptElement = document.getElementById("jsonp");
var head = document.getElementsByTagName("head")[0];
if (oldScriptElement == null) {
head.appendChild(newScriptElement);
}else{
head.replaceChild(newScriptElement,oldScriptElement);
}
}
// 把请求返回来的数据展示到页面
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 + "==>" + sale.time + "==>" + sale.sales;
salesDiv.appendChild(div);
}
}
</script>
</head>
<body>
<h1>销售数据列表</h1>
<div id="sales">
</div>
</body>
</html>
测试上面代码,我们发现可以连续更新啦。嗯,但还有一个小问题,我们发现有重复数据。这里需要看Web服务的规范,比如我们当前Web服务的规范,你会看到请求URL中可以指定一个最近报告时间参数,如下:
http://gumball.wickedlysmart.com/?lastreporttime=1302212903099
这很好,但是我们怎么获取最后一个报告时间呢?再来看看销售报告的格式:
[
{"name":"ARTESIA","time":1309208126092,"sales":8},
{"name":"LOS","time":1309208128219,"sales":2},
{"name":"PASADENA","time":1309214414505,"sales":8}
]
所以,我们可以记录最后一个报告时间:
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 + "==>" + sale.time + "==>" + sale.sales;
salesDiv.appendChild(div);
}
if (sales.length >0) {
lastReportTime = sales[sales.length-1].time;
}
}
更新JSON URL 来包含lastreporttime:var url = "http://gumball.wickedlysmart.com/?callback=updateSales" +"&lastreporttime" +lastReportTime + "&random=" + (new Date()).getTime();