跨域 - JSONP

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();

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值