Rails 3與Ajax的邂逅

昨天晚上花了一點點時間寫了Murmur Coder,後來加上了Ajax的功能讓發出表單內容後可以不需要重新整理頁面就能夠根據response去顯示畫面。

其實Ajax這種話題應該是已經被講到爛了才對,不過我還是做一下註記好了,畢竟這種方式很Cool ... Rails 把這些東西包在rails.js內了,所以我們可以很簡單的就去實作Ajax的功能。

最近這幾年比較流行的JavaScript寫法似乎是Obtrusive JavaScript,所以我在這邊會簡單的聊一下。

在以往常見的JavaScript寫法,是把一些Event會發生的事件直接寫在HTML Tag上,例如:

<p onclick="alert('Hello, world');">Click me</p>

直接把onclick寫在p標籤內,這種inline的寫法就有點像是直接把CSS寫在style屬性內一樣噁心。之後好像Prototype、jQuery之類的JavaScript framework出來了,因為能夠透過CSS Selector的方式去抓DOM,所以就能夠變成是:

    <p>Click me</p>
    <script>$('p').click(function(){alert("Hello, world");})</script>

這種把HTML與JavaScript分離的作法就叫做Obtrusive JavaScript,讓JavaScript隱藏在某個角落內,使HTML、JavaScript能夠各司其職。

回到我們的主題,就因為Obtrusive JavaScript的概念,所以Rails在整合Ajax的時候十分容易。

我們來看看如何修改form_for吧 ... 假設原本是 form_for @murmur do |form| 的話,就變成是: form_for(@murmur, remote: true) do |form| ... 剩下的Rails已經幫你搞定了

不過開始測試時會發現:「那我要怎樣處理Callback?」、「錯誤咧?怎麼辦啊?」

嘖嘖,這個時候就是交給rails.js來處理囉 ... rails.js 中提供了四個Callback function:

  • ajax:beforeSend: 用於在送出之前的狀態
  • ajax:success: 用在執行成功的狀態,基本上Response status code為200, 201等都會進來這邊
  • ajax:complete:不論結果,只要Request執行結束就會跑來這邊,適合重設表單等工作
  • ajax:error:當遇到錯誤的時候會顯示這邊,像是Status code為4xx, 5xx時就會跑來這邊了

因為我是直接寫CoffeeScript的,所以我就直接貼CoffeeScript code

簡單的說,就是bind住那四個callbacks就好。只不過在Controller中要記住的就是,如果response content type不是HTML的話,可能會進不了success,這點要注意一下 ....

Comments

comments powered by Disqus