rails敏捷发《2》.doc

9.2 迭代D2：创建基于Ajax的购物车 Iteration D2：Creating an Ajax-Based Cart Ajax允许我们通过编写在浏览器中运行的代码，来与服务器端的应用程序交互。在这里，我们希望让Add to Cart按钮在后台调用服务器端的add_to_card方法，随后服务器把关于购物车的HTML发回浏览器，我们只要把服务器更新的HTML片段替换到边框里就行了。 要实现这种效果，通常的做法是首先编写在浏览器中运行的JavaScript代码，然后编写服务器端代码与JavaScript交互(可能是通过JSON之类的技术)。好消息是，只要使用Rails，这些东西都将被隐藏起来：我们使用Ruby(再借助一些Rails辅助方法)就可以完成所有功能。 向应用程序中引入Ajax的技巧在于“小步前进”，所以我们先从最基本的开始：修改货品列表页，让它向服务器端应用程序发起Ajax请求；应用程序则应答一段HTML代码，其中展示了最新的购物车。 在索引页上，目前我们是用button_to()来创建“Add to Cart”链接的。揭开神秘的面纱，button_to()其实就生成了HTML的form标记。下列辅助方法 %= button_to Add to Cart , :action = :add_to_cart, :id = product % 会生成类似这样的HTML代码 form method=post action=/store/add_to_cart/1 class=button-to input type=submit value=Add to Cart / /form 这是一个标准的HTML表单，所以，当用户点击提交按钮时，就会生成一个POST请求。我们不希望这样，而是希望它发送一个Ajax请求。为此，必须更直接地编写表单代码——可以使用form_remote_tag这个Rails辅助方法。“form_..._tag”这样的名字代表它会生成HTML表单，“remote”则说明它会发起Ajax远程调用。现在，打开app/views/store目录下的index.html.erb文件，将button_to()调用替换为下列代码： depot_l/app/views/store/index.html.erb % form_remote_tag :url = { :action = add_to_cart, :id = product } do % %= submit_tag Add to Cart % % end % 用:url参数，你就可以告诉form_remote_tag()应该如何调用服务器端的应用程序。该参数接收一个hash，其中的值就跟传递给button_to()方法的参数一样。在表单内部(也就是do和end之间的代码块中)，我们编写了一个简单的提交按钮。在用户看来，这个页面就跟以前一模一样。 虽然现在处理的是视图，但我们还需要对应用程序做些调整，让它把Rails需要用到的JavaScript库发送到用户的浏览器上。在第24章“Web 2.0”(第521页)中，我们还会详细讨论这个话题；现在，我们只需在store布局的head部分里调用javascript_include_tag方法即可。 depot_l/app/views/layouts/store.html.erb html head titlePragprog Books Online Store/title %= stylesheet_link_tag depot , :media = all % → %= javascript_include_tag :defaults % /head 到目前为止，浏览器已经能够向我们的应用程序发送Ajax请求，下一步就是让应用程序做出应答。我们打算创建一段HTML代码来代表购物车，然后让浏览器把这段HTM插入当前页面的DOM 文档对象模型（Document Object Model)。这是文档结构和内容在浏览器中的内部表示，我们据此来改变显示给用户的东西。，替换掉当前显示的购物车。为此，我们要做的第一个修改就是不再让add_to_cart重定向到首页。(我们知道，我们刚刚才加上这个功能，现在又要把它拿掉了……我们很敏捷，对吧？) 我们调用respond_to()方法并告诉它我们要响应的是.js格式文件 文档对象模型（Document Object Model)。这是文档结构和内容在浏览器中的内部表示，我们据此来改变显示给用户的东西。 这条语句乍看起来有些奇怪，其实就是一个使用代码块作为参数的方法调用。代码块在第A.9节“代码块与迭代器”中有介绍。在第12.1节“分别应答”中有