backbone.js教學(五)AJAX
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 是利用 For example, a popular free slot machines might have 12 possible payouts ranging from 1 to 1, up to 2,000 to 1. POST 來模擬 PUT 和 DELETE 兩個 HTTP 做向下相容，模擬的方式是在 Form Data 的後面加上 _method 屬性來說明這個 POST 是 PUT 還是 DELETE。而 emulateJSON 則可以把要送給出的 JSON 在序列化（Serialize）之後，偽裝成 HTML Form 的 MIME 資料達到相容的效果。
接著，我們利用 Person 的 Model 建構子 initialize 來記錄所有被觸發的 event 用來檢驗整個範例程式流程的正確性。
在過去所學的 Model 範例中，Model 所指定的資料是無法永久保存的，每當該 JavaScript Should I wait online casino or would the home drug test still be bbeneficial? We are so glad you have had such success with the cleanse! wow that is awesome. 頁面被重新執行一次，之前的資料就會被重新產生、覆蓋一次。除非，我們能指定一個能永久儲存資料的 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!
底下的範例是基於先前介紹過的 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 是利用 For example, a popular free slot machines might have 12 possible payouts ranging from 1 to 1, up to 2,000 to 1. POST 來模擬 PUT 和 DELETE 兩個 HTTP 做向下相容，模擬的方式是在 Form Data 的後面加上 _method 屬性來說明這個 POST 是 PUT 還是 DELETE。而 emulateJSON 則可以把要送給出的 JSON 在序列化（Serialize）之後，偽裝成 HTML Form 的 MIME 資料達到相容的效果。
接著，我們利用 Person 的 Model 建構子 initialize 來記錄所有被觸發的 event 用來檢驗整個範例程式流程的正確性。
在過去所學的 Model 範例中，Model 所指定的資料是無法永久保存的，每當該 JavaScript Should I wait online casino or would the home drug test still be bbeneficial? We are so glad you have had such success with the cleanse! wow that is awesome. 頁面被重新執行一次，之前的資料就會被重新產生、覆蓋一次。除非，我們能指定一個能永久儲存資料的 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!
留言
張貼留言