如何在 sinatra 中使用 AJAX 更快地加载页面答案

【问题标题】：How to load faster a page using AJAX in sinatra如何在 sinatra 中使用 AJAX 更快地加载页面
【发布时间】：2015-10-15 13:35:56
【问题描述】：

我正在开发一个项目（URL：示例），我有一个表单，它在表格的多行 (20) 中加载了许多选项（超过 6000 个）。

表格是这样的：

User    role    permission     machine

在机器栏里有这样一个表格：

<form action="/example" method="get">
 <select>
   <% session[:var].map(&:to_i).sort.each do |var| %>
     <option><%= var.to_s.force_encoding('UTF-8') %></option>
   <%end%>
 </select>
</form>

问题是在访问 URL 时，由于 var 变量会加载所有机器，因此需要大量加载机器列中的所有数据。（此调用的大小为 3.2 Mb）。

当用户选择一个选项时，页面会再次加载。但在这一点上，我可以使用 AJAX 来避免用户选择选项时的刷新。

我的问题是：

是否也可以使用 AJAX 在键入 URL（示例）时加快页面速度，或者有任何形式来加速这个加载过程。

【问题讨论】：

标签： jquery ajax sinatra

【解决方案1】：

我会预填充第一个可见页面的结果（例如，25 个结果），然后或者对结果进行分页，从而允许刷新但减少每个响应的数据，或在滚动/按下更新按钮时使用 AJAX 更新结果。大多数数据库 ORM 库都有一个可以使用的分页插件。

这里没有什么需要 AJAX。请记住，AJAX 只是调用站点 API，没有什么特别之处，它仍然只是一堆请求响应的 HTTP 调用。 AJAX 让您有机会通过将一些处理推到客户端来错开其中一些，这是主要的。

考虑将您的路线/应用分为提供页面的路线/应用程序和仅提供数据的路线/应用程序。您甚至可以通过using the request.xhr? object method 组合提供渲染和数据的路由，例如

erb :index, :layout => !request.xhr?

或

if request.xhr?
  json {my: data, goes: here}
else
  erb :index, :locals => {my: data, goes: here}
end

当用户选择一个选项时，页面会再次加载

您绝对可以在这里使用 AJAX 来避免页面刷新 - 他们已经拥有数据，为什么还要刷新？

【讨论】：