Backbone.JS 支援 REST 的開發風格，可以讓你用比較正確的方式使用 Web 標準來寫 code。例如當遇到一些典型的資料操作 CRUD - Create, Read, Update, Delete 邏輯時，可以很容易地對應到 POST, GET, PUT, DELETE 等 HTTP 方法來達成任務，避免無謂的再造輪子。
底下的範例是基於先前介紹過的 Model 和 Collection 等基礎觀念，再加上讓前端 Model 在 CRUD 操作時能夠直接和後端的資源（URL）做到同步能力。
此範例的環境設定比較複雜，需要準備好一臺後端的 HTTP Server 和資料庫，如果您無法做出這樣的環境，歡迎到這裡來看看DEMO程式（記得開啟JavaScript主控台）。而對後端 API 有興趣的話也可以到這裡參考原始碼，但請注意這個後端程式純屬 DEMO 用， Update 和 Create 的功能都沒有實作出來，只是剛好做出示意的環境來說明原理，實際要用還是需做修改及調整。
非常強烈建議閱讀本章的同時要打開 JavaScript 的 Console （或是 FireBug 這類的工具），並且觀察網路的狀況，仔細看送給後端的 HTTP header 資料。
緊接著，讓我們來看看原始碼吧：
一開始的 Backbone.emulateHTTP 和 Backbone.emulateJSON 是為了和舊的 HTTP Server 相容所設的（畢竟我們無法確保所有的 Server 都能完整支援 HTTP 的各種方法）。，emulateHTTP 是利用 POST 來模擬 PUT 和 DELETE 兩個 HTTP 做向下相容，模擬的方式是在 Form Data 的後面加上 _method 屬性來說明這個 POST 是 PUT 還是 DELETE。而 emulateJSON 則可以把要送給出的 JSON 在序列化（Serialize）之後，偽裝成 HTML Form 的 MIME 資料達到相容的效果。
接著，我們利用 Person 的 Model 建構子 initialize 來記錄所有被觸發的 event 用來檢驗整個範例程式流程的正確性。
在過去所學的 Model 範例中，Model 所指定的資料是無法永久保存的，每當該 JavaScript 頁面被重新執行一次，之前的資料就會被重新產生、覆蓋一次。除非，我們能指定一個能永久儲存資料的 URL 給該 Model。在 Person 裡的 url 方法，就是用來指定這個儲存位置給 Model。而 urlRoot 顧名思義是用來定義或回傳 URL 的字根（prefix），因此，從我們定義的 url 方法可以看出，Person 這個 Model 的 url 樣式大概會長這樣：
/examples/backbonejs-ajax/backbone.php?id=3
url 這個的方法會在各種 event 被觸發的時候被使用到，像是 fetch, save, destroy 等，而 url 這方法必須根據 model 本身的狀態來回傳該方法所需的 URL。舉例來說，當 save 這個方法被呼叫的時候，可以透過 isNew 方法先檢查 model 是否已經存到 server 來決定是要回傳 Create（POST）用的 URL 還是 Update（PUT）。
呼叫 fetch() 時會對 server 做 GET 的請求，因此當資料是 {id:1} 的時候，GET 的 URL 將會是
/examples/backbonejs-ajax/backbone.php?id=1
呼叫 save() 將會對 server 做 POST，當 model 的 data 是 {name:"Joe Zim", age:23} 時，由於沒有指定 id，因此將會對後端發出 POST 請求，其 URL 會是
/examples/backbonejs-ajax/backbone.php
如果 model 包含 id ，則呼叫 save() 時相當於要對某筆指定 id 的資料做 Update，此時由於 Backbone.emulateHTTP 的關係，會對後端送出假的 PUT 請求，相當於是一個 POST 並且在 HTTP Form Data 加上 _method: PUT 以來說明這個 POST 是要模擬成 PUT 的行為：
舉一反三，我們不難猜測 destroy() 正是呼叫 DELETE 方法，一樣用 POST 來模擬 DELETE，URL 會像是
/examples/backbonejs-ajax/backbone.php?id=1
也會會自動送出一個 Form Data 內容是 _method: DELETE。
小結上述，由 fetch() 、 save() 或 destroy() 來決定要對後端發送請求的方法是 GET、POST 或 DELETE，而當 model 資料包含某筆 id 時，則表示要送 PUT。
Collection 相當於在 Model 外面再多包一層殼，collection 在 create 資料的時候相當於新建一筆 model（所以兩者的 add event 都會被觸動）並呼叫 model 的 save()，接下來的運作原則跟前面 Model 也非常相似，差別主要在於多一層 People event 的觸發，而主要的 CRUD 操作都還是取決於 Model 上的定義 。
希望以上的內容能幫助您多認識一點 Backbone.JS 無縫使用 AJAX 的小伎倆。
Happy Coding!
延伸閱讀
- 幫你的網頁加上Backbone(.js)（一）： Model
- 幫你的網頁加上Backbone(.js)（二）： View
- 幫你的網頁加上Backbone(.js)（三）： Router
- 幫你的網頁加上Backbone(.js)（四）： Collection
- 幫你的網頁加上Backbone(.js)（五）： AJAX
讚~
回覆刪除