轮询是一种技术,通过在请求元素上包含 data-auto-submit 属性来延迟或重复 AJAX 更新。应谨慎使用此功能,因为它在大规模使用时会增加服务器负载,为缓解此问题,该属性仅在用户的浏览器窗口处于活动状态时触发。
轮询请求常与 AJAX Partial Twig 标签 一同使用,因为它允许您自更新部分内容。考虑以下定义在加载某些结果的页面上的 AJAX 处理器。假设它是一个开销大的查询,我们可能希望在页面加载完成后再请求它。
public function onFetchResults()
{
$this['results'] = [1, 2, 3];
}下一步是在页面上某个位置包含一个名为 posts.htm 的支持 AJAX 的局部文件。
{% ajaxPartial 'posts' %}在局部视图中,如果 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 标签 了解更多信息。