Backbone.jsをRESTでない環境やJSONの使えない環境で使う

memo

最近はCoffeeScriptでBackbone.jsを書いてることが多いです。

MVCっぽいJavaScriptフレームワークはなれてくると、やっぱりいいものですね。

でも、WebアプリケーションフレームワークによってはRESTスタイルなやり取りできなかったり、JSONでデータのやり取りが困難な場合もあったりなかったり。
Backbone.jsをそんな環境下で使うと大変じゃないのかとか思っていたけど、ちゃんと準備されてました。

これ、ドキュメントにも書いてあるんですけどね。

ModelオブジェクトやCollectionオブジェクトがRESTなAPIで通信できないときは

[javascript]
Backbone.emulateHTTP = true;
[/javascript]

として設定を変えておけば、Put、Deleteに代わってPostで通信してくれます。ちなみに、Ajaxの通信はjQueryのajaxメソッドで行ってます。
通信時にheaderにX-HTTP-Override-Methodが追加されて送られます。
アプリケーションの側でX-HTTP-Override-MethodがあればRESTなHTTPメソッドと認識し、処理してやればいいということっぽいですね。

[text]
Request URL:http://jsfiddle.net/echo/json/
Request Method:OPTIONS
Status Code:200 OK
Request Headersview source
Accept:/
Accept-Charset:Shift_JIS,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:ja,en-US;q=0.8,en;q=0.6
Access-Control-Request-Headers:origin, x-http-method-override, content-type, accept
Access-Control-Request-Method:POST
Connection:keep-alive
[/text]

JSONでデータのやり取りをできないときは、

[javascript]
Backbone.emulateJSON = true;
[/javascript]

としておけばapplication/jsonの代わりにapplication/x-www-form-urlencodedで、
JSONデータはmodelという名前のパラメーターで送信されます。

[text]
Request URL:http://fiddle.jshell.net/echo/html/
Request Method:PUT
Status Code:200 OK
Request Headersview source
Accept:application/json, text/javascript, /; q=0.01
Accept-Charset:Shift_JIS,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:ja,en-US;q=0.8,en;q=0.6
Connection:keep-alive
Content-Length:194
Content-Type:application/x-www-form-urlencoded
Host:fiddle.jshell.net
Origin:http://fiddle.jshell.net
Referer:http://fiddle.jshell.net/_display/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.53 Safari/536.5
X-Requested-With:XMLHttpRequest
Form Dataview URL encoded
model:{"data":{"html":"<p>Text echoed back to request</p><script type=’text/javascript’>$(‘target’).highlight();</script>","delay":3}}
[/text]

両者の設定をtrueにしてると、_methodでPUT、DELETEを送ることができます。
アプリケーション側でheader情報見てやればCRUD (Create、Read、Update、Delete) なアクションに対応する処理ができます。

[text]
Request URL:http://fiddle.jshell.net/echo/html/
Request Method:POST
Status Code:200 OK
Request Headersview source
Accept:application/json, text/javascript, /; q=0.01
Accept-Charset:Shift_JIS,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:ja,en-US;q=0.8,en;q=0.6
Connection:keep-alive
Content-Length:206
Content-Type:application/x-www-form-urlencoded
Host:fiddle.jshell.net
Origin:http://fiddle.jshell.net
Referer:http://fiddle.jshell.net/_display/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.53 Safari/536.5
X-HTTP-Method-Override:PUT
X-Requested-With:XMLHttpRequest
Form Dataview URL encoded
model:{"data":{"html":"<p>Text echoed back to request</p><script type=’text/javascript’>$(‘target’).highlight();</script>","delay":3}}
_method:PUT
[/text]

ちなみに、BackboneのModelオブジェクトは最初に保存される場合(Modelオブジェクトにidが設定されてない場合)にはPOSTされ、Modelオブジェクトにidが追加されます。
idが設定されている場合にはPUTリクエストが使用されます。

使ってみて改めてRubyOnRailsなどのモダンなフレームワークとの親和性が高いですね。

Comments