跨域 - JSONP

最新推荐文章于 2020-04-20 07:50:00 发布

学习笔记666

最新推荐文章于 2020-04-20 07:50:00 发布

阅读量551

点赞数

分类专栏： HTML5 文章标签： jsonp

本文链接：https://blog.csdn.net/github_26672553/article/details/51291120

版权

HTML5 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

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

学习笔记666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跨域 - JSONP

JSONP，简单说来这种方法就是让<h1>销售数据列表</h1><div id="sales"></div><script src="http://g
复制链接

扫一扫