熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> .NET編程 >> 正文

ajax調用WCF服務

2013-11-13 10:08:58  來源: .NET編程 

  關於AJAX調用WCF服務分為跨域和不跨域兩種方式今天咱們先介紹下不跨域下的調用方法DEMO是在VS寫的

  經過測試與研究發現AJAX調用WCF服務必須滿足以下條件

  wcf的通訊方式必須使用webHttpBinding

  必須設置<endpointBehaviors>節點的值

   服務的實現必須添加

      [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsModeAllowed)] 標記

  方法前面必須添加如下標記

  [WebInvoke(Method = POST BodyStyle = WebMessageBodyStyleBare ResponseFormat = WebMessageFormatJson)]

  ajax方法中傳遞的參數名稱必須和wcf服務中提供的參數方法名稱一致

  以下是本人寫的代碼標記顏色的是需要注意的地方

  服務器端配置文件代碼

  <systemserviceModel> <services> <service name=WcfServiceDemoOneService behaviorConfiguration=WcfServiceDemoOneServiceBehavior> <! Service Endpoints > <endpoint address= binding=webHttpBinding contract=WcfServiceDemoOneIService behaviorConfiguration=HttpBehavior></endpoint> <endpoint address=mex binding=mexHttpBinding contract=IMetadataExchange/> <host> <baseAddresses> <add baseAddress=/> </baseAddresses> </host> </service> </services> <behaviors> <serviceBehaviors> <behavior name=WcfServiceDemoOneServiceBehavior> <! 為避免洩漏元數據信息請在部署前將以下值設置為 false 並刪除上面的元數據終結點> <serviceMetadata httpGetEnabled=true/> <! 要接收故障異常詳細信息以進行調試請將以下值設置為 true在部署前設置為 false 以避免洩漏異常信息> <serviceDebug includeExceptionDetailInFaults=false/> </behavior> </serviceBehaviors> <endpointBehaviors> <behavior name=HttpBehavior> <webHttp/> </behavior> </endpointBehaviors> </behaviors> </systemserviceModel>

  服務器端代碼

  [ServiceContract] public interface IService { [OperationContract] string GetData(int value); [OperationContract] City GetDataUsingDataContract(City composite); [OperationContract] List<City> GetList(); [OperationContract] List<City> GetListData(List<City> list); } // 使用下面示例中說明的數據約定將復合類型添加到服務操作 [DataContract] public class City { int seq = ; string cityID; string ctiyName; [DataMember] public string CityID { get { return cityID; } set { cityID=value; } } [DataMember] public string CityName { get { return ctiyName; } set { ctiyName = value; } } [DataMember] public int Seq { get { return seq; } set { seq = value; } } }

  實現代碼

  

  [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsModeAllowed)] public class Service : IService { [WebInvoke(Method = POST BodyStyle = WebMessageBodyStyleWrappedRequest RequestFormat = WebMessageFormatJson ResponseFormat = WebMessageFormatJson)] public string GetData(int value) { return stringFormat(You entered: {} value); } #region IService 成員 [WebInvoke(Method = POST BodyStyle = WebMessageBodyStyleBare ResponseFormat = WebMessageFormatJson)] public City GetDataUsingDataContract(City composite) { City c = new City(); cCityID = compositeCityID; cCityName = compositeCityName; cSeq = compositeSeq; return c; } [WebInvoke(Method = POST BodyStyle = WebMessageBodyStyleBare ResponseFormat = WebMessageFormatJson)] public List<City> GetList() { List<City> list = new List<City>(); City cc = new City(); ccCityID = ; ccCityName=北京; ccSeq = ; listAdd(cc); City cc = new City(); ccCityID = ; ccCityName = 上海; ccSeq = ; listAdd(cc); return list; } [WebInvoke(Method = POST BodyStyle = WebMessageBodyStyleBare ResponseFormat = WebMessageFormatJson)] public List<City> GetListData(List<City> list) { return list; } #endregion }

  客戶端調用代碼

  

  <%@ Page Language=C# AutoEventWireup=true CodeBehind=WebFormaspxcs Inherits=WcfServiceDemoOneWebForm %> <!DOCTYPE html PUBLIC //WC//DTD XHTML Transitional//EN transitionaldtd> <html xmlns= > <head runat=server> <title></title> <script src=jqueryminjs type=text/javascript></script> <script type=text/javascript> //參數為整數的方法 function fn() { $ajax({ url: type: POST contentType: text/json data: {value:} dataType: json success: function(returnValue) { alert(returnValue); } error: function() { alert(error); } }); } //參數為實體類的方法 function fn() { $ajax({ url: type: POST contentType: application/json data: {CityID:CityName:北京Seq:} dataType: json success: function(returnValue) { alert(returnValueCityID + + returnValueCityName + + returnValueSeq); } error: function() { alert(error); } }); }

  //返回值為類集合的方法 function fn() { $ajax({ url: type: POST contentType: application/json dataType: json success: function(returnValue) { for (var i = ; i < returnValuelength; i++) { alert(returnValue[i]CityID + + returnValue[i]CityName++returnValue[i]Seq); } } error: function() { alert(error); } }); } function fn() { $ajax({ url: type: POST contentType: application/json data: [{CityID:CityName:北京Seq:}{CityID:CityName:上海Seq:}] dataType: json success: function(returnValue) { for (var i = ; i < returnValuelength; i++) { alert(returnValue[i]CityID + + returnValue[i]CityName + + returnValue[i]Seq); } } error: function() { alert(error); } }); } </script> </head> <body> <form id=form runat=server> <div> <input id=Button type=button value=調用 onclick=fn(); /></div> <input id=Button type=button value=調用 onclick=fn(); /> <br /> <input id=Button type=button value=調用 onclick=fn(); /></form> <br /> <input id=Button type=button value=調用 onclick=fn();/> </body> </html>


From:http://tw.wingwit.com/Article/program/net/201311/12704.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.