考虑如下需求：
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);}elsedocument.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;}elsealert("错误：请求页面异常！")}</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对象。
