Agile Web Development with Rails 3nd Edition学习笔记-创建一个基于Ajax的购物车

上篇笔记中，我们通过partial把购物车信息放到了index页面的Sidebar上。当我们点击“Add to Cart”按钮时，Sidebar上的商品和数目会改变。但是，我们同时会发现，刷新了的不仅仅是购物车信息，整个页面都刷新了。如果你的浏览器中显示的本来就是页面的最顶端，就不会有什么感觉。但是如果你选择的产品是在你浏览到了页面的中间或者更下面，当你点击了“Add to Cart”之后，页面又会回到最顶端。以至于你必须再去寻找你刚才看到了哪里。这样往复的动作，直到你感到很崩溃。
那么，我们这节来改善一下用户体验。让用户点击了“Add to Cart”之后，只是刷新购物车信息部分的内容，而不会刷新整个页面。
要做到这件事，就需要使用一些Ajax的技术了。幸运的是，Rails提供了很强的功能来帮助我们生成页面的JavaScript代码，节省了我们的时间，同时也让我们能够把更多的精力放在功能的开发上，而不是代码细节。
首先，我们要在layout中添加一些代码来引入一些必要的JavaScript定义。在depot/app/views/layouts/store.html.erb文件中导入CSS样式表的后面，添加下面的代码：

<%= javascript_include_tag :defaults %>

通过查看实际生成的页面代码，我们可以看到这行代码实际为页面添加了如下5个JavaScript库文件：

<script src="/javascripts/prototype.js?1272207119" type="text/javascript"></script> 
<script src="/javascripts/effects.js?1272207119" type="text/javascript"></script> 
<script src="/javascripts/dragdrop.js?1272207119" type="text/javascript"></script> 
<script src="/javascripts/controls.js?1272207119" type="text/javascript"></script> 
<script src="/javascripts/application.js?1271501647" type="text/javascript"></script>

接下来，我们要修改“Add to Cart”按钮的实现，把原先的POST请求变成一个Ajax的请求。我们要做的就是使用下面的代码来替换depot/app/views/store/index.html.erb文件中原先的button_to代码。

<% form_remote_tag :url => { :action => 'add_to_cart', :id => product } do %>
  <%= submit_tag "Add to Cart" %>
<% end %>

通过查看实际生成的页面代码，我们可以看到，原先的一个submit动作变成了如下的Ajax请求：

new Ajax.Request('/store/add_to_cart/2', {asynchronous:true, evalScripts:true, parameters:Form.serialize(this)}); return false;

然后，我们要修改一下add_to_cart方法来响应我们的Ajax请求。我们要做的就是把上节在这个方法中添加的redirect_to_index的调用使用下面的代码替换掉。

respond_to do |format|
  format.js
end

这样修改之后，当add_to_cart方法处理完Ajax的请求后，Rails将会寻找该方法的template来送给页面。之前我们使用的是add_to_cart.html.erb作为该方法的template的。其实Rails还支持以“.js.rjs”结尾的template。这种template中实际是定义要在浏览器端使用的JavaScript代码的。
那么，我们现在就定义一个新的add_to_cart.js.rjs文件来作为这个方法的template。

page.replace_html("cart" , :partial => "cart" , :object => @cart)

这段代码的作用实际上是新的数据结果替换掉index页面中id为“cart”的div部分。也就是我们显示购物车信息的地方。最终，浏览器端页面上关于购物车信息的代码将被新的所替代，这样实际上就刷新了那个小区域。

好了，我们可以在浏览器上欣赏一下Ajax给我们带来的良好体验了。

如果按照上面的步骤，你的页面没有表现出Ajax给我们带来的良好体验。下面是书中给的一些提示，也许有助于解决你的问题：
1、你是否删除了原来的add_to_cart.html.erb文件？（应该删除）
2、第一步中提到的javascript_include_tag你是否添加了？（它会为你添加Ajax需要的JavaScript库）
3、你的浏览器有没有什么特殊的设置之类的东西强制刷新页面上的所有东西？有是浏览器在本地保存的页面缓冲也会有影响。这时候最好强制刷现一下你的页面。
4、有没有什么错误信息被添加到了development.log文件中？
5、有没有在development.log中看到你的程序接收到了来自浏览器的add_to_cart请求？如果没有，那意味着页面没有生成Ajax请求。如果JavaScript的库确实被加载了，那么，可能你的浏览器禁用了JavaScript。
6、有人报告说他们必须停掉他们的服务，重新启动服务才能使得我们的修改生效。如果前面的方法没有解决你的问题，也许你也需要重新启动一下服务。
7、如果你使用的浏览器是IE，也许它正运行在"quirks"模式，请把它重新设置到“Standard”模式。