我是FE,也是Fe

          前端來源于不斷的點滴積累。我一直在努力。

          統計

          留言簿(15)

          閱讀排行榜

          評論排行榜

          RESTful Web Service(三):使用ajax創建客戶端

          上個文章中使用eclipse創建的web service。根據rest的思想,每一個資源都有唯一標識的URI。在REST Web service explorer 中可以看到每個資源的URI。

          這里放出一些調用的例子:

          1.get請求獲得Category xml 數據。

          $("#btncall").click(function (){
              $.ajax({
                  url:"/restblog/services/category",
                  type:"GET",
                  dataType:'xml',
                  success :function (data){
                      var tablehtml="<table class='tableresult' border='1' bordercolor='#ccc'><tr><th>編號</th><th>名稱</th></tr>";
                      $("category",data).each(function (i,category){
                          var id=$("id",category).text();
                          var name=$("name",category).text();
                          tablehtml+=("<tr><td>"+id+"</td><td>"+name+"</td></tr>");
                      });
                      tablehtml+="</table>";
                  $(tablehtml).appendTo("#result");
                  },error:function (){
                      alert("get category list failed!");
              }});
          });

          jquery的ajax調用有一個參數dataType是期望得到的數據格式,目前版本的可選值為xml,json,html,jsonp.默認的是html。指定了該屬性,jquery會自動解析數據格式。

          上面的例子接受到的數據形如:

          <?xml version="1.0" encoding="UTF-8"?>
             <Categories>
                 <category>
                     <id>1</id>
                     <name>第一個分類</name>
                 </category>
                 <category>
                     <id>2</id>
                     <name>第二個分類</name>
                 </category>
             </Categories>

          data是一個xml對象,在沒有jquery的情況下解析xml是一件很麻煩的事情。但是使用jquery,xml解析起來和html一樣。

          $("category",data)是查找標簽名(tagName)為category節點,返回jquery對象。注意獲得節點值用的是text()方法。

          還得注意的地方就是url 這里的路徑和請求jsp的規則是一樣。

          2.發送json的例子。

          $("#btnAddbyjson").click(function (){
              $.ajax({
                  url:"/restblog/services/category/add",
                  type:"PUT",
                  data:"{\"id\":1,\"name\":\"category1\"}",
                  contentType:'application/json',
                  success :function (result){
                      alert(result);
                  },error:function (){
                      alert("add category failed!");
              }});
          });

          注意type: 通常的ajax調用都只是GET POST 這里用的是PUT,要回過神來。

          contentType:與服務方法上的Consume 標注屬性一樣。在ajax調用的時候會在請求的Header添加{"contentType","application/json"}的鍵/值標明發送的數據格式是json。

          即便發送的數據格式是json,但是真正的數據是以字符串的形式在網絡傳輸的,所以data屬性只是json的字符串,由服務器端解析成Category對象。這里的json字符串格式比較嚴格,不能適用單引號' ,這里要注意。

          data屬性即可以是字符串又可以是json,jquery會根據contentType解析成需要發送的格式。

          下面的截圖是在FireBug下看到的數據發送情況:

          1 

          這張圖旨在說明發送的數據不是一個鍵/值類型。區別與下面的例子。

          3.POST的表單提交。

          $("#btnAdd").click(function (){
              $.ajax({
                  url:"/restblog/services/category/addbyname",
                  type:"POST",
                  data:{'categoryname':$("#txtName").val()},
                  success :function (result){
                      alert(result);
                  },error:function (){
                      alert("add category failed!");
              }});
          });

          addbyname方法的categoryname標識為@FormParam 所以用POST提交的數據被當做Form提交的數據。下面的截圖說明瀏覽器發送的是一個標準的鍵/值數據

          2

          4.調用帶@Context標識參數的方法

          $("#btncommonProcess").click(function (){
              $.ajax({
                  url:"/restblog/services/category/commonProcess",
                  type:"GET",
                  data:"a=b&a=e&c=d",
                  success :function (result){
                      alert(result);
                  },error:function (){
                      alert("commonProcess failed!");
              }});
          });

          服務端的代碼見上一篇文章。

          控制臺上打印:

          c : [d]
          a : [b, e]

          總結

          REST Web service 不但提供了標準的調用方法,同時擁有非常簡便的ajax調用。由于請求的純數據,所以他更適合于ajax調用。而且的客戶端可以跨平臺,跨應用。他的優勢是無可比擬的,我相信他的未來不可估量。

          posted on 2009-02-10 21:34 衡鋒 閱讀(3874) 評論(1)  編輯  收藏 所屬分類: restful webservice

          評論

          # re: RESTful Web Service(三):使用ajax創建客戶端 2009-11-07 12:34 王大力

          謝謝你的文章!  回復  更多評論   

          主站蜘蛛池模板: 永济市| 弥勒县| 长白| 安泽县| 海淀区| 金秀| 佛冈县| 盘山县| 盐亭县| 承德市| 焦作市| 奎屯市| 灌南县| 景德镇市| 永泰县| 武穴市| 澜沧| 孟连| 高雄市| 越西县| 德江县| 安多县| 伽师县| 贵南县| 静安区| 肇源县| 寿阳县| 定西市| 遂溪县| 泗水县| 呼和浩特市| 贺州市| 万年县| 英超| 工布江达县| 高青县| 江安县| 沽源县| 祁阳县| 吴旗县| 巴彦县|