使用ajax每X秒更新一次html页面

Posted 2023-03-05

【中文标题】使用ajax每X秒更新一次html页面

【英文标题】：Update html page every X seconds using ajax

【发布时间】：2014-08-12 14:18:36

【问题描述】：

我看到了这篇关于这个问题的帖子： Auto Refresh a html table every x seconds

现在，我正在使用 Rails，我想做同样的事情，但我想告诉 Rails 我想要一个远程页面，我不希望它加载整个页面。 我想要的只是模拟 :remote => 使用 ajax 的真实动作。 我已经尝试过使用常规 ajax，并且 rails 会加载整个页面，而不仅仅是我想要的相关内容。

我该怎么做？

【参考方案1】：

/* with jQuery */
jQuery(documenta).ready(function() 
    setTimeout(function() 
        jQuery('.table').load(...);
    , 5000);
);

# with rails, determine if it is a ajax request
if request.xhr?
    # respond to Ajax request
else
    # respond to normal request
end

参见此处Rails detect if request was AJAX

【讨论】：

rails 会知道它是一个远程请求吗？这就是我在我发布的其他评论中看到的，它没有帮助，因为它加载了整个页面。

我不确定您的确切意思。为什么 rails 应该知道它是否是远程请求？每个请求都是远程请求，不是吗？你想知道，如果它是一个ajax请求，对吧？查看解决方案...

我的意思是我希望它的行为就像一个带有 :remote => true 的 rails 链接

看看这个：***.com/questions/13909354/…

【参考方案2】：

你的代码应该是这样的：

Your controller

def your_action
 # your code goes here
end

(your_action.js.erb)

$("#div_id").html("<%= escape_javascript reder :partial => "your_partial_for_table" %>")

your_action.html.erb

<div id="div_id">
 <%= render :partial => "your_partial_for_table" %>
</div>

_your_partial_for_table.html.erb

#your table goes here

<script>
  $(function() 
    $(document).ready(function() 
      setInterval(function() 
        jQuery.ajax(
          url: "<path to your_action>",
          type: "GET",
          dataType: "script"
        );
      , 30000); // In every 30 seconds
    );
  );
</script>

【讨论】：

@algorhythm：嘿，实际上它对我有用，试一试。我已将它用于每隔 30 秒的时间间隔自动显示通知。

【参考方案3】：

服务器发送事件

您不妨使用Server Sent Events (from HTML5):

服务器发送事件 (SSE) 是一种用于浏览器获取信息的技术 通过 HTTP 连接从服务器自动更新。服务器发送 事件 EventSource API 被 W3C 标准化为 HTML51 的一部分。

这基本上会启动一个名为ajax long-polling 的东西，您的 JS 将每秒或秒数“ping”一个特定的 URL。 然后，Ajax 轮询请求将从服务器返回特定响应，让您可以随意使用

--

布局

我会这样做：

#app/assets/javascripts/application.js
var source = new EventSource('path/to/your/endpoint');
source.addEventListener('message', function(e) 
      //do something here
, false);

#app/controllers/your_controller.rb
Class YourController < ApplicationController
   include ActionController::Live

   def your_action
       response.headers['Content-Type'] = 'text/event-stream'

       sse = Reloader::SSE.new(response.stream)
       begin
           sse.write(last_updated, event: 'results')
       rescue IOError
          # When the client disconnects, we'll get an IOError on write
       ensure
         sse.close
       end
   end
end

这里的诀窍是 SSE 使用他们自己的内容类型 - text/event-stream 来接收和解析所需的数据。这与管理典型 HTTP 协议的标准 mime 类型进行了比较

I used this url for reference - 然后您可以在文本从服务器返回时对其进行操作！