Ajax 应用程式
It’s not a bug - it’s an undocumented feature. - Unknown
什么是 Ajax?
Ajax 是 Asynchronous JavaScript and XML的缩写,是一种不需要重新整理页面,透过 JavaScript 来与服务器交换资料、更新网页内容的技术。目的在于改善使用者的操作接口,提昇流畅度。它主要是透过浏览器提供的XMLHttpRequestObject
来达成,不过因为要支援跨浏览器,大多数人们会选择使用 JavaScript Library 来处理 Ajax,例如最流行的 JQuery。
如果你对 jQuery 和 Ajax 完全陌生的话,推荐 CodeSchool: Try jQuery、Code School: jQuery Ajax 或 Udacity: Intro to AJAX
虽然Ajax的缩写中包括XML,但是实务上并不一定要用XML格式,事实上也已经很少人使用XML当作传输的格式了。总归来说,依照Ajax使用的格式分类,有三种方式:
- 向服务器请求 HTML 片段,然后客户端浏览器上的 JavaScript 再替换掉页面上的元素
- 向服务器请求 JavaScript 程式脚本,然后客户端浏览器执行它
- 向服务器请求 JSON 或 XML 资料格式,然后客户端浏览器的 JavaScript 解析后再动作。
第一种方式非常简单,但是限制是一次只能更新一小块内容。
Rails 默认使用第二种方式,一方面程式撰写较容易,另一方面也是贯彻 Rails 将 template 统一在 server-side rendering 的设计哲学。
第三种方式则将 JavaScript 程式都放在客户端浏览器上,相较于第二种则多了解析 JSON 或 XML 的部份。以Web API的设计角度来看,与表现层无关的JSON格式是比较干净的,可以获得比较好的重复使用性。如果团队中有专门的前端工程师,他们会比较喜欢这种方式。
Unobtrusive JavaScript
Rails 使用一种叫做 Unobtrusive JavaScript(UJS) 的方式来挂载内建的 JavaScript 功能,也就是你在 app/assets/javascripts/application.js
里面加载的 //= require jquery_ujs
,这些功能包括
- 让超连结可以用
:method
参数支援非 GET 方法 - 用超连结、按钮和表单可以用
:remote => true
支援 Ajax - 超连结、按钮和表单可以用
"data-confirm"
参数可以跳确认对话视窗 - 送出按钮可以用
data-disable-with
参数在送出表单时暂时关闭按钮避免重复送出
什么是Unobtrusive呢?用个范例来说吧,以下代码会将超连结改成用表单DELETE送出,并且用一个提示视窗来作确认:
link_to 'Remove', event_path(1), :method => :delete, :data => { :confirm => "Sure?" }
在Rails 3以前的版本,会输出:
<a onclick="if (confirm('Sure?')) { var 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;" href="/events/1">Remove</a>
在Rails 3之后,会输出:
<a rel="nofollow" data-confirm="Sure?" data-method="delete" class="delete" href="/events/1">Remove</a>
Unobtrusive也就是将JavaScript程式与HTML完全分开,除了可以让HTML码干净之外,也可以支援更换不同的JavaScript Library,例如把Rails内建的jQuery换成Protytype.js或angular.js等等。
在Layout中有输出一段
<%= csrf_meta_tag %>
的作用就是搭配给UJS使用的,让JavaScript可以拿到CSRF安全验证码,我们会在安全一章讨论到什么是CSRF。
第一种方式:替换 HTML 片段
编辑 app/views/events/index.html.erb 最下方加入:
<%= link_to 'Hello!', welcome_say_hello_path, :id => "ajax-load" %>
<div id="content">
</div>
<script>
$('#ajax-load').click( function(e){
e.preventDefault();
var url = $(this).attr("href");
$.ajax(url, {
success: function(response) {
$("#content").html(response);
}
});
</script>
如此点下超连结后,就会把回传的HTML置入到<div id="content">
里面。
第二种方式:使用 JavaScript 脚本
编辑 app/views/events/index.html.erb,在循环中间加入
<%= link_to 'ajax show', event_path(event), :remote => true %>
在循环外插入一个<div id="event_area"></div>
编辑 app/controllers/events_controller.rb,在 show action 中加入
respond_to do |format|
format.html
format.js
end
新增 app/views/events/_event.html.erb,内容与 show.html.erb 相同
新增 app/views/events/show.js.erb,内容如下
$('#event_area').html("<%= escape_javascript(render :partial => 'event') %>")
.css({ backgroundColor: '#ffff99' });
浏览 http://localhost:3000/events
escape_javascript()
可以缩写为j()
。
上述 :remote => true
背后的原理,如同以下的 jQuery 程式码:
$("#ajaxscript").click(function(e){
e.preventDefault();
var url = $(this).attr("href");
$.ajax(url, {
dataType: "script"
})
})
你会发现到这段程式码其实非常一般化,这也是为什么 Rails 可以将它变成 :remote => true
的原因。
Ajax 按钮
除了超连结 link_to
之外,按钮 button_to 加上:remote => true
参数也会变成 Ajax。
button_to "Remove",event_path(@event)
除了已经看过的 :data => { :confirm => "Are you Sure?" }
之外,disable_with
可以避免使用者连续按下送出:
button_to "Remove", event_path(@event), :data => { :disable_with => 'Removing' }
Ajax 表单
除了超连结 link_to 加上 :remote 可以变成 Ajax 之外,表单 form_for 也可以加上:remote
变成 Ajax。
form_for @event, :remote => true
第三种方式:使用 JSON 资料格式
JavaScript Object Notation(JSON)是一种源自JavaScript的资料格式,是目前Web应用程式之间的准标准资料交换格式,在Rails之中,每个物件都有to_json
方法可以很方便的转换资料格式。
<%= link_to 'ajax show', event_path(event), :remote => true, :data => { :type => :json }, :class => "ajax_update" %>
点击ajax show就会送出Ajax request了,但接下来要怎么撰写处理JSON的程式呢?以下是一个范例:
<script>
$(document).ready(function() {
$('.ajax_update').on("ajax:success", function(event, data) {
var event_area = $('#event_area');
event_area.html( data.name );
});
});
</script>
使用 JSON 通常还会搭配 client-side template 机制,将回传的资料搭配 template 后,再插入到 HTML 之中。
另一种变形的用法则是将HTML片段当做JSON的资料来传递。
另一种JSON的变形是JSONP(JSON with Padding),将JSON资料包在一个JavaScript function里,这个做的用处是让这个API可以跨网域被呼叫。要回传JSONP格式,需要用render :js
并多一个参数是:callback
。例如以下的程式可以搭配 jQuery 的 jsonp 格式:
respond_to do |format|
format.js { render :json => @user.to_json, :callback => params[:callback] }
end
Example code
- 三种用法示范
- https://github.com/ihower/rails-exercise-ac5/blob/master/app/views/welcome/ajax.html.erb (ac5)
- https://github.com/ihower/rails-exercise-ac6/blob/master/app/views/welcome/ajax.html.erb (ac6)
- https://github.com/ihower/rails-exercise-ac7/blob/master/app/views/welcome/ajax.html.erb (ac7)
- https://github.com/ihower/rails-exercise-ac8/blob/master/app/views/welcome/ajax.html.erb (ac8)
- Ajax 按钮删除: 删除资料,并在 HTML 上移除该元素
- Ajax 按赞: 针对主题按赞或取消赞、订阅或反订阅等等
- Ajax 表单新增: 使用 Ajax 新增,在页面上新增该笔
- Ajax 编辑: 也就是 In-place form editing (点选文字原地编辑)
- Ajax 开关 (Toggle Attributes): 设计一个 checkbox 接口的开关
- Ajax 无限捲轴 (Endless Page)
- Ajax 档案上传: HTML 表单没办法用 Ajax 上传档案,需要额外装 gem 做 workaround:
Turbolinks
事实上,Rails默认让每个换页都用上了Ajax技巧,这一招叫做Turbolinks,在默认的Gemfile中可以看到gem "turbolinks"
,以及Layout中的data-turbolinks-track
。
它的作用是让每一个超连结都只用Ajax的方式将整个body
内容替换掉,这样换页时就不需要重新加载head
部份的标籤,包括JavaScript和CSS等等,只重新入加载 boby 的部分,目的是可以改善换页时的速度。
也因为它没有整页重新加载,所以如果有放在application.js里面的 jQuery ready 事件处理,会变成只有第一次加载页面才执行到,换页时就失效了,所以必须改成 Turbolinks 的 turbolinks:load
事件,也就是:
$(document).ready(function(){
//...
}
都要改写成
$(document).on("turbolinks:load", function(){
//...
})
Rails 4 用的旧版turbolinks-classic 是用
page:change
事件
另外,它的快取也会影响页面内的 JavaScript,你放在 body 内的 javascript,在浏览回来时会执行两遍,并且官方认为这是 feature 不是 bug,有些 Javascript 重复执行两遍没关系,但是有些就有问题。如果想关掉这个快取功能:放个 <meta name="turbolinks-cache-control" content="no-cache">
在 layout 的 head 之中可以关掉 Turbolinks 快取功能。
如果要针对特定的超连结关闭 Turbolinks,可以加上 data-turbolinks="false"
的属性来:
<div id="some-div" data-turbolinks="false">
<a href="/">Home (without Turbolinks)</a>
</div>
例如 Facebook Share 的 Javascript code 就被 turbolinks 影响,请参考 turbolinks + facebook share button
因为 Turbolinks 影响了JavaScript的Event Bindings行为,所以在搭配一些JavaScript比较吃重的应用程式,搭配使用JavaScript 前端框架时,就会尽量移除不要使用,以免互相影响。
⚠ 总之,如果你碰到 js 灵异现象(贴上来的js code 换页回来后不执行,但是重新整理就没问题。或是跳页回来重复执行了两次等等,可以试试看拆掉 Turbolinks:把 Gemfile、applicatio.js 和 layout head 里面相关的 Turbolink 代码拿掉即可,就可以直接绕过这个大坑。
浏览器同源政策和 CORS
跨网域(cross-domain) 的 AJAX 会被 Same-origin policy 浏览器安全政策所限制:
- 浏览器同源政策及其规避方法
- 跨域资源共享CORS 详解
- 实作 Cross-Origin Resource Sharing (CORS) 解决 Ajax 发送跨网域存取 Request
- 同源政策 (Same-origin policy)
解决的方式可以用 CORS 或JSON-P,这要看 server-side 服务器端支援哪一种。CORS 是一个新的网络标准,而 JSON-P 一种向后相同的 hack 方式。
JSON-P
JSONP算是一种 workaround 解,在 jQuery 中可以用以下语法:
$.ajax({
url:,
dataType: "jsonp",
success: function(data) {
//...
clearTimeout(wikiRequestTimeout);
}
})
JSONP 缺点: 1. 只能送 HTTP GET 2. 没有办法 error handling,只能等 timeout,例如设定一个 timeout 显示错误讯息,然后在上述成功时再clearTimeout
。
var wikiRequestTimeout = setTimeout(function(){
....append error text
}, 8000);
CORS
CORS 则是目前的新标准解决方案:
Rails 范例 Code: https://github.com/ihower/rails-exercise-ac5/pull/2