關於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
