jQuery-ujs

Rails 預設是配合 prototype 來做到一些 Ajax 的功能的,不過他其實也可以配合 jQuery ,只要配合 jQuery-ujs 這個 Gem 就可以,前陣子從頭開始學 Rails 3 的時候開始接觸到這個 plugin,後來花了些時間看他的原始碼,發現他的設計其實很棒,一如 Rails 的風格,非常的 Best Practice 的設計,因此事實上,不需要是 Rails Application 也很容易就可以利用它。

jQuery-ujs 全名 Unobtrusive scripting adapter for jQuery ,是由 Rails Team 的人開發,所以也是個官方支援,用了 custom eventdata-* 屬性 這兩種東西所建立出來的,不亂入的 JavaScript adapter ,jQuery-ujs 的基本設計是用 data-* 屬性來記錄連結或是表單的一些行為,是不是要用XHR 送 request ,HTTP request 是 POST、GET 還是 DELETE 等等,而這些 XHR request 的事件就用 ajax:beforeSend、ajax:success 等自定事件來處理,所以假設你要做一個連結,點下去會去遠端抓一個 JSON 資料回來,那你的 HTML 會要這樣寫:

<a href="/getme.json" data-remote="true" data-type="json">Click Me !</a>

然後 JavaScript 這邊這樣寫:

$('a').bind('ajax:success', function (data, status, xhr) {
    //data is parsed JSON object
    //do something with data here
});

這樣就可以讓 Click Me ! 這個連結被點到時,用 XHR Request 取代換頁到那個網址,然後回來的資料就會自動進 callback function ,而除了 ajax:success 外,還有 ajax:error 可以做錯誤處理,另外還有兩個事件,詳細的資料在官方 文件 有,另外還有一份文件則是關於 支援的 data-* 屬性 ,這兩份看一下就可以正確的使用 jQuery-ujs 了。

而除了文件上寫到的,還有兩個特色是直接沿用 Rails 的 Best Practice ,第一個是 _method 參數,雖然 HTTP 有設計了四種 request method:POST、GET、PUT、DELETE,但是 HTML 表單卻只有 POST 和 GET 兩種可以用,但是 Rails 的 RESTful API 定義的七種動作中,把四種 request method 都用到了,所以為了讓 PUT 和 DELETE 也可以動作, jQuery-ujs 會在必要的時候,多送一個 _method 參數,告訴 server 端,現在實際上是哪種 request 。

另一個就是 CSRF 了,Rails 對付 CSRF 的方法就是很常見的,用 token,只不過它是寫在<meta name='csrf-token'>裡面,然後 jQuery-ujs 會去把它的值抓出來,也當成參數一起送出,如果是 XHR 的話,則會寫在 HTTP header 裡面,因為使用的方法都很簡單好懂,如果是自己寫的 server 架構,也可以依照這個原則來配合 jQuery-ujs 來檔 CSRF 的攻擊。

這篇簡單介紹了幾個 jQuery-ujs 的特色,而我最後還有一個覺得可以使用它的理由,就是它現在是 Rails 官方維護,有持續更新,而且品質還算可靠(最近 jQuery 1.5 改了 ajax 結果就...)。