轮询是一种通过在请求元素上包含 data-auto-submit 属性来推迟或重复 AJAX 更新的技术。此功能应谨慎使用,因为它在大规模使用时会增加服务器负载,为了缓解这种情况,该属性仅在用户浏览器窗口处于活动状态时触发。
轮询请求通常与 AJAX 部分 Twig 标签 结合使用,因为它允许您自动更新部分内容。考虑以下在加载某些结果的页面上定义的 AJAX 处理器。假设这是一个开销很大的查找,我们可能希望在页面加载完成后再请求它。
public function onFetchResults()
{
$this['results'] = [1, 2, 3];
}下一步是包含一个支持AJAX的分部视图,名为 posts.htm,在页面上的某个位置。
{% ajaxPartial 'posts' %}在 partial 内部,如果 results 变量存在,内容将输出结果。否则,它会显示一条加载消息,并带有一个 data-auto-submit 请求,以作为次要请求加载结果。
{% if results %}
<h3>Found results</h3>
{{ d(results) }}
{% else %}
<h3>Loading the results...</h3>
<div
data-request="onFetchResults"
data-request-update="{ _self: true }"
data-auto-submit>
</div>
{% endif %}对于重复的内容更新请求,你可以将 data-auto-submit 设置为一个值(以毫秒为单位),以在延迟后执行自动请求。例如,一个使用 {% ajaxPartial %} 渲染的部分,并包含以下标记。
<div>
{% set launchDate = carbon('2025-01-01') %}
{% set days = launchDate.diffInDays %}
{% set hours = launchDate.subDays(days).diffInHours %}
{% set minutes = launchDate.subHours(hours).diffInMinutes %}
{% set seconds = launchDate.subMinutes(minutes).diffInSeconds %}
<h2>
Launch in...
{{ days }} days,
{{ hours }} hours,
{{ minutes }} minutes,
{{ seconds }} seconds
</h2>
</div>
<div
data-request="onAjax"
data-request-update="{ _self: true }"
data-auto-submit="2000"></div>这个局部视图显示一个倒计时器,并包含一个 "div" 元素以自动更新自身。结果更新也包含该元素,因此请求每2秒连续重复一次。
轮询可以通过在后续请求中不包含该元素来停止,例如,如果 launchDone 变量设置为 true,以下情况将停止轮询。
{% if not launchDone %}
<div
data-request="onAjax"
data-request-update="{ _self: true }"
data-auto-submit="2000"></div>
{% endif %}该 data-auto-submit 标签由 {% ajaxPartial lazy %} Twig 标签用于懒加载局部视图。该标记在页面首次渲染时自动包含,用于动态加载局部内容。
{% ajaxPartial 'posts' lazy %}查看 AJAX 部分 Twig 标签 了解更多信息。