jQuery調用WCF開發(fā)實例經(jīng)驗分享

作者：陳玉國 2011-05-16 09:30:30

本文討論一下jQuery異步調用WCF服務的過程中需要注意的各種問題及經(jīng)驗分享。

我所使用的機器環(huán)境是：Windows7　VS2010　。

一、我們首先建好一個項目，在VS2010中，建立好一個Web項目，并添加一個“啟用了Ajax的WCF服務”。

二、添加完成后，會自動打開剛才添加的文件，我們進行一些簡的修改，便于一會客戶端去調用，修改代碼如下：

[ServiceContract(Namespace = "")]   
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]  
public class DataService  
     {   
         /// <summary>   
         /// 一、簡單調用服務端方法   
        /// </summary>   
         /// <returns></returns>  
         [OperationContract]  
         [WebGet()]  
         public string DoWork()  
         {            
             return string.Format("Today is {0}",DateTime.Now.ToString("yyyy年MM月dd日 HH:mm:ss:fff"));  
         }  
          
     }

三、客戶端代碼中如下：

<html xmlns="http://www.w3.org/1999/xhtml">   
  <head runat="server">   
     <title></title>  
      <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>   
      <script type="text/javascript">   
         $(document).ready(function () {   
             $("#btnGetServerDate").click(function () {   
                 $.ajax({   
                     url: "DataService.svc/DoWork",  
                     type: "get",  
                     success: function (data) {  
                         alert(data.d);  
                     }  
                 })  
             });  
         })  
     </script>  
 </head>  
 <body>  
     <form id="form1" runat="server">  
     <div>  
      
         <input id="btnGetServerDate" type="button" value="簡單調用" title="顯示服務器上的時間" /></div>  
     </form>  
 </body>  
 </html>

以上是最基本的調用沒有什么可說的.

下面，我們來進行一個稍微復雜點的例子演示，我們在實現(xiàn)的效果是：“客戶端提交一個注冊信息，然后在服務器端取出并解析成一個實體類對象，然后返回客戶端狀態(tài)。服務端代碼如下：

/// <summary>   
       /// 二、由客戶端傳入數(shù)據(jù)示例        
       /// </summary>   
       /// <param name="userInfo">Json格式的UserInfo數(shù)據(jù)</param>   
       /// <returns></returns>   
       [OperationContract]   
       [WebGet(ResponseFormat=WebMessageFormat.Json)] //必須是WebGet，客戶端對應著Get方式請求，如果是POST方式，服務端而是WebInvoke，不過很遺憾，暫時貌似好不支持，反正我是沒使用成功，有知道的請告訴我   
       public string Register(string userInfo)   
       {  
           UserInfo model = JsonConvert.DeserializeObject<UserInfo>(userInfo);//Newtonsoft.Json 使用第三方類庫將傳入的Json字符串反序列化成實體類。  
           return string.Format("hello {0} sir!", model.LoginName);  
       }

然后客戶端對應如下：

//示例二   
           $("#btnRegiter").click(function () {   
               var jsonString = "userinfo={\"loginName\":\"cheng\",\"password\":\"tomcat\"}"; //注意：我服務端只接收一個參數(shù)那就是String類型命稱為userInfo的變量，所以前面對應也叫userInfo   
               $.ajax({   
                   url: "DataService.svc/Register",   
                   type:"get", //注意是Get方式，服務端對應著WebGet（）   
                   data: jsonString,   
                   success: function (data) {   
                       alert(data.d);  
                   }  
               })  
           })

此例子主要演示，客戶端提交一個JSON字符串格式的數(shù)組到服務端，然后服務端通過反序列化方式將傳入的字符串序列化成自定義對象。NET3.5自已也支持反序列化，但用的不爽，我用的是“Newtonsoft.Json”這個，但也需要注意一個問題，那就是如果客戶端傳入的數(shù)據(jù)是數(shù)值類型的話，請不要加引號，否則會反序列化失敗。如“{"age":25}”,服務端對應“public int Age{get;set;}”。但具JSON.org上說的標準JSON格式，健/值好像都應該需要加上引號的，所以這里大家需要注意。

下面接著在演示一個客戶端獲取一個List類型數(shù)據(jù)并解析，同樣服務端代碼如下：

[OperationContract]   
         [WebGet(ResponseFormat = WebMessageFormat.Json)]   
         public List<UserInfo> GetAll()   
         {   
           List<UserInfo> lists = new List<UserInfo>()    
             {    
                 new UserInfo() { LoginName = "cheng", Password = "cheng" },   
                 new UserInfo() { LoginName = "tomcat", Password = "tomcat" }    
             };  
             return lists;  
         }  
   
 [DataContract]  
     public class UserInfo  
     {  
         private string _loginName;  
         private string _password;  
   
         [DataMember]  
         public string Password  
         {  
             get { return _password; }  
             set { _password = value; }  
         }  
         [DataMember]  
         public string LoginName  
         {  
             get { return _loginName; }  
             set { _loginName = value; }  
         }  
     }

客戶端代碼如下：

$("#btnGetAllUser").click(function () {   
                 $.ajax({   
                     url: "DataService.svc/GetAll",   
                     type: "get", //注意是Get方式，服務端對應著WebGet（）                
                     success: function (data) {   
                         for (var i = 0; i < data.d.length; i++) {   
                             $("#divContent").append("<a>用戶名：" + data.d[i].LoginName + "</a><a>密碼：" + data.d[i].Password + "</a><br />");                              
                         }   
                     },  
                     error: function (msg) {  
                         alert(msg.responseText);  
                     }  
                 })  
             })

好了，三種最常用的調用方式就這樣了，當然，你可以稍微修改一下連接上數(shù)據(jù)庫一起使用，***我總結一下，在調用過程常見的錯誤及解決方法。

一、推薦使用Firebug去調試，在Firebug中有一個“網(wǎng)絡”選項卡，在那里，你可以清楚的看到你是否成功調用WCF服務，而且可以看到返回的數(shù)據(jù)格工及詳細內容，而且如果調用出錯，也可以給出明確的出錯信息。

二、在調試階端，推薦使用“GET”方式請求服務，然后在error:funcation(msg){alert(msg.responseText);}這樣同樣也能看到大部份出錯提示。

三、配置文件，在添加時就自動配置好了，所以一般情況下沒有特殊要求無需更改。這是VS2010中的好處。

原文鏈接：http://www.cnblogs.com/bdqlaccp/archive/2011/05/08/2039415.html

【編輯推薦】

5月***超有趣的免費jQuery插件推薦
從零開始學習jQuery之管理jQuery包裝集
jQuery性能指標和調優(yōu)
手把手教你jQuery jqPlot畫圖插件
從零開始學習jQuery之***的選擇器

責任編輯：陳貽新來源：陳玉國的博客

jQuery WCF

自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

jQuery調用WCF開發(fā)實例經(jīng)驗分享