Restlet 2.0 邊學邊寫（八）使用jQuery和ajax實作對Restlet資源的CRUD操作

上一次實踐實作了各方法傳回xml和json格式的資料，并在頁面、程式進行讀取和展示。本次實踐将使jQuery腳本庫，通過javascript+ajax來通路Restlet資源的各個方法，實作網際網路中的CRUD操作。

[b]1.Customer[/b]

為了友善頁面調用Restlet，需要在Customer類中加入id屬性作為唯一辨別，。

修改com.sunny.restlet.order.Customer類，代碼如下：

類中添加了id屬性和getter/setter方法，修改了toString()方法。

[b]2.OrderDaoImpl[/b]

因為Customer類中加入了id屬性，是以要在add和update Customer前setId(custId)。

修改com.sunny.restlet.order.OrderDaoImpl類中的方法，代碼如下：

代碼中對addCustomer和updateCustomerById方法進行了修改。

[b]3.Resource[/b]

我們需要修改下資源的各個方法，使得方法傳回的資料符合json格式。

修改com.sunny.restlet.order.CustomersResource類中的方法，代碼如下：

代碼中修改了get方法，使傳回資料為new JsonRepresentation(new JSONObject(customers, false))，因為new JsonRepresentation(customers)不能很好的解析map中的對象。

post方法也進行了修改，當customer為空時傳回new JsonRepresentation("{}")，否則json解析器會報錯。

修改com.sunny.restlet.order.CustomerResource類中的方法，代碼如下：

代碼中修改了get和put方法，當customer為空時傳回new JsonRepresentation("{}")，否則json解析器會報錯。

delete方法也進行了修改，傳回符合json格式的提示資訊new JsonRepresentation("{\"message\":\"success\"}")。

[b]4.jQuery[/b]

本次實踐要在頁面上使用javascript+ajax通路Restlet資源，最友善的當然是用jQuery庫了，這裡我使用的是1.2.6版本的jquery.pack.js，其他新版本也可以使用。

在WebRoot/目錄下建立lib檔案夾，将jquery.pack.js拷貝至該檔案夾中。

[b]5.頁面[/b]

因為使用javascript來通路資源和頁面展示，完全不需要服務端代碼實作，是以這次使用html檔案就行了。

在WebRoot/目錄下建立list.html，代碼如下：

[list]

[*]頁面加載時通路/customers的get方法讀取現有Customers并展示，實作list。

[*]點選create連結時調用create_show()彈出新增Customer界面，送出後調用create()通路/customers的post方法，并将傳回結果添加在表格最下方，實作create。

[*]點選update連結時調用read(id)查詢Customer并展示在修改Customer界面，送出後調用update()通路/customer的put方法，并将傳回結果修改至原來所在行，實作read和update。

[*]點選delete連結時調用deleteCustomer(id)删除Customer，并将原來所在行删除，實作delete。

[/list]

[b]6.測試[/b]

部署程式後，使用浏覽器通路[url]http://localhost:8080/firstSteps/list.jsp[/url]，可以看到空的表格和create連結。

依次進行create>read>update>delete操作，可以看到增删改查沒有問題，說明使用javascript和ajax對Restlet資源的通路成功。

新開一個頁面并将某個Customer删除後，在原來的頁面中嘗試read、update和delete操作，可以看到提示"no customer 0"資訊，說明Restlet傳回的new JsonRepresentation("{}")被成功解析為json資料。

[b]7.Application[/b]

在本次實踐中我們并沒有使用html form配合method參數來通路資源的put和delete方法，而是使用jQuery提供的$.ajax方法中的參數type: 'PUT'和type: 'DELETE'來實作，是以第六章中對Application的配置就不是必須的了。

修改src/目錄下的applicationContext.xml，代碼如下：

代碼中僅注釋掉application配置，并将component的defaultTarget引用指向restRouter，其他配置保持不變。這樣spring就回到了第五章時的相同配置。

重新部署程式後進行測試，提示資訊和效果保持不變，說明Application的配置删除成功。

應支援我的朋友要求，上傳源碼工程。