3.1. Setting the Stage
这章中使用的示例，会延续上一章创建的Rails应用chapter2，但是我们会创建一个新的controller。在终端下执行：
script/generate controller chapter3 index get_time repeat reverse
这行命令生成了一个controller chapter3，4个action：index， get_time, repeat和reverse。
在上一章中，我们给出的示例页面都是平淡无奇的，这次我们用一个HTML layout和一个CSS文件把页面打扮一番。首先创建一个新的layout文件，app/view/layouts/application.rhtml，里面写一个基本的XHTML模板：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns ="http://www.w3.org/1999/xhtml" xml:lang ="en" >
< head >
< title >Ajax on Rails </title>
< %= javascript_include_tag :defaults % >
< %= stylesheet_link_tag "application" % >
</head>
< body >
< h1 >Ajax on Rails </h1>
< %= yield % >
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns ="http://www.w3.org/1999/xhtml" xml:lang ="en" >
< head >
< title >Ajax on Rails </title>
< %= javascript_include_tag :defaults % >
< %= stylesheet_link_tag "application" % >
</head>
< body >
< h1 >Ajax on Rails </h1>
< %= yield % >
</body>
</html>
在这个模板中我们实现了两个重要的目标，首先是通过javascript_include_tag :defaults这条语句包含了Prototype和script.aculo.us(具体包括prototype.js, effects.js, dragdrop.js和controls.js)，也有application.js, 第二个就是yield，这是插入action模板的地方。为了模板能更好看些，让我们来做一个简单的css文件，位于public/stylesheets/application.css:
body {
background-color: #eee;
color: #222;
font-family: trebuchet;
padding: 0;
margin: 25px;
}
h1 {
margin: -25px -25px 20px -25px;
padding: 50px 0 8px 25px;
border-bottom: 3px solid #666;
background-color: #777;
color: #fff;
font: normal 28pt georgia;
text-shadow: black 0px 0px 5px;
}
a { color: #229; }
.box {
border: 1px solid;
width: 100px; height: 100px;
padding: 5px;
font-size: .6em;
letter-spacing: .1em;
text-transform: uppercase;
margin-bottom: 20px;
}
.pink {
border-color: #f00;
background-color: #fcc;
}
.green {
border-color: #090;
background-color: #cfc;
}
.hover {
border-width: 5px;
padding: 1px;
}
ul {
background-color: #ccc;
padding: 5px 0 5px 30px;
}
background-color: #eee;
color: #222;
font-family: trebuchet;
padding: 0;
margin: 25px;
}
h1 {
margin: -25px -25px 20px -25px;
padding: 50px 0 8px 25px;
border-bottom: 3px solid #666;
background-color: #777;
color: #fff;
font: normal 28pt georgia;
text-shadow: black 0px 0px 5px;
}
a { color: #229; }
.box {
border: 1px solid;
width: 100px; height: 100px;
padding: 5px;
font-size: .6em;
letter-spacing: .1em;
text-transform: uppercase;
margin-bottom: 20px;
}
.pink {
border-color: #f00;
background-color: #fcc;
}
.green {
border-color: #090;
background-color: #cfc;
}
.hover {
border-width: 5px;
padding: 1px;
}
ul {
background-color: #ccc;
padding: 5px 0 5px 30px;
}
接着，我们来充实一下controller中的内容，编辑app/controllers/chapter3_controller.rb定义一些一会儿会用到的action：
class Chapter3Controller < ApplicationController
def get_time
sleep 1.second
render :text => Time.now.to_s
end
def repeat
render :text => params.inspect
end
def reverse
@reversed_text = params[:text_to_reverse].reverse
end
end
def get_time
sleep 1.second
render :text => Time.now.to_s
end
def repeat
render :text => params.inspect
end
def reverse
@reversed_text = params[:text_to_reverse].reverse
end
end
下一步就是添加视图模板中的内容
app/views/chapter3/index.rhtml 就一行代码：
<%= link_to "Check Time", :action => 'get_time' %>
这里应用了like_to这个helper，上章介绍过了，它相当于下面的html代码：
< a href ="/chapter3/get_time" >Check Time </a>
在浏览器中打开这个页面，就会看到下图所示的画面，点击链接，get_time这个action会呈递一个当前时间的文本。
link_to有几个注意的选项，首先， :confirm允许添加一个javascript的确认对话框，用户可以在执行之前选择取消，假设你有一个链接引发一个潜在的危险动作：
<%= link_to "Fire missile", { :action => 'fire' },
:confirm => "Are you quite sure?" %>
:confirm => "Are you quite sure?" %>
这里可以加一个适当的控制，用户可以选择终止这个动作。
其次，:method选项允许指明HTTP方法是:get, :post, :put, 还是:delete. 也许这些选项显得有点奇怪，因为一般链接只使用HTTP的GET方法，表单只能使用GET或者POST。那么为什么Rails这么做呢？其实这里有个小骗局，看看我为什么这么说：建立一个链接，并指定:method：
<%= link_to "Delete", "/people/1", :method => :delete %>
如果你查询一下helper产生的源代码，你会看到：
<a href="/people/1"
f = document.createElement('form');
f.style.display = 'none';
this.parentNode.appendChild(f);
f.method = 'POST';
f.action = this.href;
var m = document.createElement('input');
m.setAttribute('type', 'hidden');
m.setAttribute('name', '_method');
m.setAttribute('value', 'delete');
f.appendChild(m);
f.submit( );
return false;">Delete </a>
f = document.createElement('form');
f.style.display = 'none';
this.parentNode.appendChild(f);
f.method = 'POST';
f.action = this.href;
var m = document.createElement('input');
m.setAttribute('type', 'hidden');
m.setAttribute('name', '_method');
m.setAttribute('value', 'delete');
f.appendChild(m);
f.submit( );
return false;">Delete </a>
这段代码截获了link的动作，所以当点击链接之后，幕后创建并且提交了一个表单。对于链接本身来说，这个:method只允许链接发起POST请求。那么PUT和DELETE呢？为了让他们工作，Rails使用POST方法来实现，你可以看到上面代码中生成的Javascript的那句，一个名为_method的字段添加到了隐藏的表单中。当Rails的服务器端收到这个参数，就会以这个参数提供的方法来解释执行这个请求。
对于正确使用HTTP 方法在第六章会深入讨论。