考虑如下需求：
1. 用户输入一个用户名，当焦点跳出文本框时，检查该用户名是否有效
2. 动态更新检查的结果
我们使用ajax的方式来实现这个简单的功能，首先建立view:check.html.erb:
<%= javascript_include_tag "jquery" %>
<%= javascript_include_tag "rails" %>
<%= stylesheet_link_tag 'user' %>
<h1>check user name</h1>
<script>
var xml_http = null;
function set_xml_http()
{
if(!xml_http && typeof XMLHttpRequest != "undefined")
xml_http = new XMLHttpRequest();
}
function start_request()
{
//var name = $("#name").value;
var name = document.getElementById("name").value;
if(name != "")
{
set_xml_http();
var url = "/users/check_name?username="+name;
xml_http.open("GET",url,true);
xml_http.onreadystatechange = request_handle;
xml_http.send(null);
}
else
document.getElementById("info").innerHTML = "你还没有输入name哦！"
}
function request_handle()
{
if(xml_http.readyState < 4)
info.innerHTML = "正在检查name是否合法..."
else if(xml_http.readyState == 4)
{
if(xml_http.status == 200)
info.innerHTML = xml_http.responseText;
}
else
alert("错误：请求页面异常！")
}
</script>
<%= text_field_tag("name","",onchange:"start_request()")%>
<span id="info"></span>
不知道上述代码为毛不能使用jQuery！？暂且放一边吧...接着我们来写服务器对应的check_name方法：
def mk_color(color,txt)
"<span class=#{color}>#{txt}</span>"
end
def check_name
name = params[:username]
if name.size <= 6
render text:mk_color("red","#{name} 长度必须大于6个字节")
elsif name =~ /fk|fuck|shit/
render text:mk_color("red","#{name} 不能包含不和谐单词")
else
render text:mk_color("green","#{name} 可以使用")
end
end
如果name有效则返回绿色文字，否则返回红色文字；这个可以通过css来实现，对应的css如下：
.red {
color:red
}
.green {
color:green
}
别忘了还要加路由啊：
get 'users/check' => 'users#check' get 'users/check_name' => 'users#check_name'
代码流大致如下：首先用户访问localhost:3000/users/check页面，然后输入用户名，当焦点离开文本框时，调用start_request方法；该方法首先建立一个xml_html对象（不考虑浏览器为ie情况，否则还得加一坨代码），该方法在safari和firefox测试有效。接着通过xml_html向check_name Action发送请求，随后注册一个回调函数request_handle；当请求返回时就会执行回调函数，该函数将结果实时动态的插入info对象。
