37、客户端与服务器通信及状态管理全解析

客户端与服务器通信及状态管理全解析

1. 客户端与服务器的通信基础

客户端应用与服务器的通信至关重要，服务器通常是数据的真实来源，客户端需要服务器的数据来更新界面。在Hotwire环境中，可利用Turbo Frames和Turbo Streams通过常规HTTP请求与服务器交互，服务器返回常规HTML响应。不过，有时也需在Stimulus和React代码中管理服务器通信。

2. 使用Stimulus管理表单

Turbo能让常规表单提交触发页面交互变化而无需重新加载整个页面，但有时需要更多客户端功能。以应用的日程页面搜索栏为例，期望实现以下功能：
- 输入框输入内容触发表单提交并返回搜索结果。
- 接收搜索结果后用Turbo Frames将结果置于覆盖页面的模态框中。
- 清空搜索字段清除模态框。
- 点击模态框外部清除模态框。

为实现这些功能，需要一个polyfill，因为Safari浏览器未实现正确处理表单提交所需的 requestSubmit 方法。可使用以下命令安装：

$ yarn add form-request-submit-polyfill

同时，需要实现服务器端搜索功能，以下是简单示例：

# chapter_08/01/app/models/concert.rb
def self.search(query)
  joins(:bands)
    .where("concerts.n