javascript从服务中获取状态

问题描述：

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

非常感谢，拉杜d

尽管没有得到广泛的支持，WebSocket可以在服务器和客户端之间建立一个'实时'连接，从而使您能够立即向服务器发送数据。而且带宽较少，因为您没有每10秒触发一次请求。 – pimvdb 2011-05-17 07:25:21

答

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

您也可以使用CORS来允许除GET之外的请求，尽管您可能已经知道这在旧版浏览器中不受支持。

为了避免竞争条件或慢速网络期间的性能问题，您可以允许JSONP回调以递归方式调用该函数，从而仅在返回回调时才发出新的呼叫，尽管可选的setTimeout调用可确保存在至少有一个最小的延迟。

以下使用维基百科的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的setInterval方法

function getUpdate() { 
    //AJAX goes here 
} 

var myInterval = setInterval(getUpdate,10000);

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

答

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

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

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

javascript从服务中获取状态

相关推荐