13、为购物车添加 Ajax 支持：优化用户体验的实践

为购物车添加 Ajax 支持：优化用户体验的实践

在现代 Web 应用开发中，为了提升用户体验，我们常常需要引入一些先进的技术。这里，我们将为一个商店应用添加 Ajax 支持，让购物车的交互更加流畅和高效。

1. 理解 Ajax

在过去（大约到 2005 年左右），浏览器被视为非常“笨”的设备。开发基于浏览器的应用时，向浏览器发送内容后，就不再关注该会话。用户填写表单字段或点击超链接时，应用会因传入请求被唤醒，然后向用户渲染一个完整的页面，整个过程非常繁琐。而现在我们知道，浏览器其实并不笨，它们可以运行代码，几乎所有浏览器都能运行 JavaScript。浏览器中的 JavaScript 可以在后台与服务器上的应用进行交互，从而更新用户看到的内容。Jesse James Garrett 将这种交互方式命名为 Ajax（最初代表 Asynchronous JavaScript and XML，现在只是为了让浏览器表现更好）。

2. 迭代 F1：移动购物车

目前，购物车由 CartController 中的 show 动作和相应的 .html.erb 模板渲染。我们的目标是将购物车渲染到侧边栏，而不是单独的页面，这可以通过部分模板来实现。

部分模板

部分模板可以看作是视图的一种方法。它是一个单独文件中的视图片段，可以从另一个模板或控制器中调用（渲染），并且可以像方法一样传递参数，从而使同一个部分模板渲染出不同的结果。

我们在这次迭代中会两次使用部分模板。首先，优化购物车显示：

# depot_i/app/views/cart