昨天晚上花了一點點時間寫了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，這點要注意一下 ….