溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

WCF簡(jiǎn)單教程(10) Ajax調(diào)用

發(fā)布時(shí)間：2020-06-13 19:30:19 來(lái)源：網(wǎng)絡(luò) 閱讀：4117 作者：BoyTNT 欄目：編程語(yǔ)言

第十篇：Ajax調(diào)用WCF

好久不更新了，今天寫一寫如何用Ajax調(diào)用WCF服務(wù)。在WebService時(shí)代，只需要加一行[System.Web.Script.Services.ScriptService]就可以使用Ajax調(diào)用了（要求.Net 3.5），到了WCF中，要稍微復(fù)雜一些。

寫個(gè)小DEMO，這回是基于IIS建一個(gè)WCF工程，服務(wù)端是一個(gè)DataService.svc文件，客戶端我們自己寫一個(gè)Client.htm。

1、服務(wù)端

定義服務(wù)契約，沒什么新鮮的，只有一個(gè)GetUser方法。(IDataService.cs)

  1. using System; 
  2. using System.ServiceModel; 
  3.  
  4. namespace WebServer 
  5. { 
  6.     [ServiceContract] 
  7.     public interface IDataService 
  8.     { 
  9.         [OperationContract] 
  10.         User GetUser(); 
  11.     } 
  12. } 

實(shí)現(xiàn)類也超級(jí)簡(jiǎn)單，返回一個(gè)User對(duì)象。(DataService.svc.cs)

  1. using System; 
  2. using System.ServiceModel; 
  3.  
  4. namespace WebServer 
  5. { 
  6.     public class DataService : IDataService 
  7.     { 
  8.         public User GetUser() 
  9.         { 
  10.             return new User { Name = "BoyTNT", Age = 30 }; 
  11.         } 
  12.     } 
  13. } 

其中的User是數(shù)據(jù)契約，只有兩個(gè)成員。(User.cs)

  1. using System; 
  2. using System.Runtime.Serialization; 
  3.  
  4. namespace WebServer 
  5. { 
  6.     [DataContract] 
  7.     public class User 
  8.     { 
  9.         [DataMember] 
  10.         public string Name { get; set; } 
  11.         [DataMember] 
  12.         public int Age { get; set; } 
  13.     } 
  14. } 

然后是重點(diǎn)的Web.config文件了，要啟用Ajax訪問，需要對(duì)endpoint進(jìn)行一下特殊聲明（綠色注釋部分）。下面只節(jié)選了system.serviceModel節(jié)點(diǎn)。

  1. <system.serviceModel> 
  2.     <behaviors> 
  3.         <serviceBehaviors> 
  4.             <behavior name="WebServer.DataServiceBehavior"> 
  5.                 <serviceMetadata httpGetEnabled="true" /> 
  6.             </behavior> 
  7.         </serviceBehaviors> 
  8.         <!--增加一個(gè)endpoint的Behavior，命名為AjaxBehavior，為其下加一個(gè)enableWebScript節(jié)點(diǎn)，表示允許使用腳本訪問--> 
  9.         <endpointBehaviors> 
  10.             <behavior name="AjaxBehavior"> 
  11.                 <enableWebScript/> 
  12.             </behavior> 
  13.         </endpointBehaviors> 
  14.     </behaviors> 
  15.     <services> 
  16.         <service behaviorConfiguration="WebServer.DataServiceBehavior"  name="WebServer.DataService"> 
  17.             <!--使用webHttpBinding，并且標(biāo)明使用上面定義的AjaxBehavior--> 
  18.             <endpoint address="" binding="webHttpBinding" contract="WebServer.IDataService" behaviorConfiguration="AjaxBehavior" /> 
  19.         </service> 
  20.     </services> 
  21. </system.serviceModel> 


2、客戶端

在工程里加一個(gè)Client.htm，注意ajax請(qǐng)求不能跨域，因此必須和服務(wù)端放到一塊兒。我這里使用了jquery來(lái)進(jìn)行ajax訪問。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4.     <title>接口測(cè)試程序</title> 
  5.     <script language="javascript" src="jquery-1.4.2.js"></script> 
  6.     <script language="javascript"> 
  7.      function executeAjaxQuery() { 
  8.          $.ajax({ 
  9.             "url": "DataService.svc/GetUser",    //注意訪問的url的寫法，是服務(wù)名+方法名，這點(diǎn)和WebService是一致的 
  10.             "cache": false, 
  11.             "async": true, 
  12.             "type": "POST", 
  13.             "dataType": "json", 
  14.             "contentType": "application/json; charset=utf-8", 
  15.             "data": {},         //如果有參數(shù)，在這里傳遞 
  16.             success: function (json) { 
  17.                 //結(jié)果被封裝到j(luò)son.d屬性中，數(shù)據(jù)契約中定義的兩個(gè)成員都能取到 
  18.                 $("#result").val("Name=" + json.d.Name + ", Age=" + json.d.Age); 
  19.             }, 
  20.             error: function (x, e) { 
  21.                 $("#result").val(x.responseText); 
  22.             } 
  23.         }); 
  24.      }  
  25.     </script> 
  26. </head> 
  27. <body> 
  28.  
  29. <input type="button" value="獲取用戶" onclick="executeAjaxQuery()" /><br /> 
  30. <textarea id="result" style="width:400px;height:200px"></textarea> 
  31. </body> 
  32. </html> 

OK，運(yùn)行一下，在結(jié)果窗口里應(yīng)該能收到“Name=BoyTNT, Age=30”。如果抓一下包，能看到服務(wù)端返回的內(nèi)容是：

  1. {"d":{"__type":"User:#WebServer","Age":30,"Name":"BoyTNT"}} 

這就是為什么要從json.d中取數(shù)據(jù)的原因。

 

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手