关于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>
