Question

我开发了一个Web应用程序，它从Web服务（在另一个域中）获取用户更新我希望每10秒获取一次更新。为了第一次调用服务，我在页面中动态插入一个脚本。该服务是JSONP。然后我想定义一个触发器，插入一个10到10秒的脚本来获取更新。它是否正确？我可以在不影响网站用户体验的情况下这样做吗？我的意思是网站性能......如果我可以进行异步调用，那将会很棒。当我得到结果时，我会更新状态。是否有更好的解决方案来访问远程服务。有没有一种使用触发器动态重用相同脚本的有效方法？我是javascript的新手。您能给我一个简短的示例如何定义调用远程Web服务的触发器？ ......或者如果有更好的解决方案。

非常感谢， Radu D

Answer 1

我建议在你的AJAX回调中，当你得到结果时，你会安排一个计时器（window.setTimeout(ex, t)），以便再次调用你的更新脚本。

在AJAX回调中设置时间的原因是您不确切知道完成AJAX调用需要多长时间。通过这种方式，您可以确保连续更新之间平稳延迟10秒。

关于表现，你必须检查一下。这取决于数据量和处理方式（以及页面的其余部分）...但您可以尝试并检查处理器使用情况......

Answer 2

我会使用JavaScript的setInterval方法

function getUpdate () {
    //AJAX goes here
}

var myInterval = setInterval(getUpdate,10000);

这样你只需要注入一次脚本标记。

Answer 3

以下将动态创建脚本标记，并在完成给定调用后删除它们（以及它所需的全局）。

您也可以使用CORS来允许除GET之外的请求，但您可能知道，旧版浏览器不支持这种请求。

为了避免在慢速网络中遇到竞争条件或性能问题，您可以允许JSONP回调递归调用该函数，从而只有在返回回调时才进行新的调用，尽管可选择setTimeout调用确保至少有一个最小延迟。

以下使用Wikipedia的API来获取特定页面修订版及其用户。

<script>
var JSONP = function(global){
    // (C) WebReflection Essential - Mit Style ( http://webreflection.blogspot.com/2011/02/all-you-need-for-jsonp.html )
    // 202 bytes minified + gzipped via Google Closure Compiler
    function JSONP(uri, callback) {
        function JSONPResponse() {
            try { delete global[src] } catch(e) { global[src] = null }
            documentElement.removeChild(script);
            callback.apply(this, arguments);
        }
        var
            src = prefix + id++,
            script = document.createElement("script")
        ;
        global[src] = JSONPResponse;
        documentElement.insertBefore(
            script,
            documentElement.lastChild
        ).src = uri + "=" + src;
    }
    var
        id = 0,
        prefix = "__JSONP__",
        document = global.document,
        documentElement = document.documentElement
    ;
    return JSONP;
}(this);

// Be sure to include the callback parameter at the end

function startAPI (start) {
    start = start || new Date();
    var url = 'http://en.wikipedia.org/w/api.php?action=query&prop=revisions&titles=Main%20Page&rvprop=timestamp|user|comment|content&format=json&callback';
    var minimum = 10000;
    function execute (str) {
        alert(str);
    }
    JSONP(url, function (obj) {
        for (var pageNo in obj.query.pages) {
            var page = obj.query.pages[pageNo];
            var str = 'The user ' + page.revisions[0]['user'] + ' left the page with this code ' + page.revisions[0]['*'];
            execute(str);
            var elapsed = (new Date().getTime()) - start;
            setTimeout(startAPI, (elapsed < minimum) ? (minimum - elapsed) : 0);
            break;
        }
    });
}
startAPI(); 
</script>

javascript从服务获取状态

3 个答案: