WCF簡單教程(10) Ajax調用

發布時間：2020-06-13 19:30:19 來源：網絡閱讀：4125 作者：BoyTNT 欄目：編程語言

第十篇：Ajax調用WCF

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

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

1、服務端

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

using System; 
using System.ServiceModel; 
 
namespace WebServer 
{ 
    [ServiceContract] 
    public interface IDataService 
    { 
        [OperationContract] 
        User GetUser(); 
    } 
}

實現類也超級簡單，返回一個User對象。(DataService.svc.cs)

using System; 
using System.ServiceModel; 
 
namespace WebServer 
{ 
    public class DataService : IDataService 
    { 
        public User GetUser() 
        { 
            return new User { Name = "BoyTNT", Age = 30 }; 
        } 
    } 
}

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

using System; 
using System.Runtime.Serialization; 
 
namespace WebServer 
{ 
    [DataContract] 
    public class User 
    { 
        [DataMember] 
        public string Name { get; set; } 
        [DataMember] 
        public int Age { get; set; } 
    } 
}

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

<system.serviceModel> 
    <behaviors> 
        <serviceBehaviors> 
            <behavior name="WebServer.DataServiceBehavior"> 
                <serviceMetadata httpGetEnabled="true" /> 
            </behavior> 
        </serviceBehaviors> 
        <!--增加一個endpoint的Behavior，命名為AjaxBehavior，為其下加一個enableWebScript節點，表示允許使用腳本訪問--> 
        <endpointBehaviors> 
            <behavior name="AjaxBehavior"> 
                <enableWebScript/> 
            </behavior> 
        </endpointBehaviors> 
    </behaviors> 
    <services> 
        <service behaviorConfiguration="WebServer.DataServiceBehavior"  name="WebServer.DataService"> 
            <!--使用webHttpBinding，并且標明使用上面定義的AjaxBehavior--> 
            <endpoint address="" binding="webHttpBinding" contract="WebServer.IDataService" behaviorConfiguration="AjaxBehavior" /> 
        </service> 
    </services> 
</system.serviceModel>

2、客戶端

在工程里加一個Client.htm，注意ajax請求不能跨域，因此必須和服務端放到一塊兒。我這里使用了jquery來進行ajax訪問。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>接口測試程序</title> 
    <script language="javascript" src="jquery-1.4.2.js"></script> 
    <script language="javascript"> 
     function executeAjaxQuery() { 
         $.ajax({ 
            "url": "DataService.svc/GetUser",    //注意訪問的url的寫法，是服務名+方法名，這點和WebService是一致的 
            "cache": false, 
            "async": true, 
            "type": "POST", 
            "dataType": "json", 
            "contentType": "application/json; charset=utf-8", 
            "data": {},         //如果有參數，在這里傳遞 
            success: function (json) { 
                //結果被封裝到json.d屬性中，數據契約中定義的兩個成員都能取到 
                $("#result").val("Name=" + json.d.Name + ", Age=" + json.d.Age); 
            }, 
            error: function (x, e) { 
                $("#result").val(x.responseText); 
            } 
        }); 
     }  
    </script> 
</head> 
<body> 
 
<input type="button" value="獲取用戶" onclick="executeAjaxQuery()" /><br /> 
<textarea id="result" style="width:400px;height:200px"></textarea> 
</body> 
</html>

OK，運行一下，在結果窗口里應該能收到“Name=BoyTNT, Age=30”。如果抓一下包，能看到服務端返回的內容是：

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

這就是為什么要從json.d中取數據的原因。

向AI問一下細節

亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

WCF簡單教程(10) Ajax調用

猜你喜歡

亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

WCF簡單教程(10) Ajax調用

猜你喜歡

最新資訊

相關推薦

相關標簽