jquery ajax调用WCF，采用System.ServiceModel.WebHttpBinding

Jquery ajax调用WCF服务

例子效果如下：原界面

　　


点击按钮GetList get后，通过指定的Url获取数据添加到table



新建一个控制台项目，添加IContract.cs，DBService.cs（为了简单，契约和服务都建在一个项目里面）

一、服务的发布

1、定义 契约接口

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Data;

namespace IContract //注意：如果命名空间为WCFHost，则在采用配置文件寄宿服务的时候会不认配置文件，不知道为什么
{
[ServiceContract]
public interface IContract
{
[OperationContract]  //通过post方法调用
[WebInvoke( RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json)]
double Add(double x, double y);

[OperationContract]  //通过get方法调用
[WebGet( RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json)]
string Hello(string mes);

[OperationContract]  //通过get方法调用
[WebGet(RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json)]
IList<User> getlist();

}

public class User
{
public string Name{get;set;}
public int Age { get; set; }
}
}

　　2、服务的实现

using IContract;
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Reflection;
using System.ServiceModel.Activation;
using System.Text;

namespace DBService  //注意：如果命名空间为WCFHost，则在采用配置文件寄宿服务的时候会不认配置文件，不知道为什么
{
//注意此处一定要设置，为了支持ajax调用
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class DBService:IContract.IContract
{
public double Add(double x, double y)
{
return x+y;
}

public string Hello(string mes)
{
return "holle word:" + mes;
}

public IList<User> getlist()
{
DataTable dt = new DataTable();
dt.Columns.Add("Name");
dt.Columns.Add("Age",typeof(System.Int32));
dt.Rows.Add("joe", "20");
dt.Rows.Add("ethan", "25");
dt.Rows.Add("jane", "36");
IList<User> lst = dt.ToList<User>();
return lst;
}
}

public static class Extension
{
public static IList<T> ToList<T>(this DataTable dt)
{
var lst = new List<T>();
var plist = new List<System.Reflection.PropertyInfo>(typeof(T).GetProperties());
foreach (DataRow item in dt.Rows)
{
T t = System.Activator.CreateInstance<T>();
for (int i = 0; i < dt.Columns.Count; i++)
{
PropertyInfo info = plist.Find(p => p.Name == dt.Columns[i].ColumnName);
if (info != null)
{
if (!Convert.IsDBNull(item[i]))
{
info.SetValue(t, item[i], null);
}
}
}
lst.Add(t);
}
return lst;
///throw new NotImplementedException();
}

}

}

　　3、 启动服务

3.1、方式一：以代码方式发布服务（不使用配置文件），寄宿到控制台程序。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.ServiceModel.Description;

namespace WCFHost
{
class Program
{
static void Main(string[] args)
{
open();
}

static void host_Opened(object sender, EventArgs e)
{
Console.WriteLine("DBService opened successful");
}

//代码方式开启服务，此时要删除配置文件
static void open()
{
//Uri uri = new Uri("http://127.0.0.1:8883/DBServer"); //和下面一句等价
Uri uri = new Uri("http://localhost:8883/DBServer");

using (ServiceHost host = new ServiceHost(typeof(DBService.DBService), uri))
{
//定义元数据发布方式，此处  通过在服务所在的URL后加“?wsdl”的方式公布WSDL，可直接通过HTTP访问得到。
System.ServiceModel.Description.ServiceMetadataBehavior behavior = new System.ServiceModel.Description.ServiceMetadataBehavior();
//此处没有定义mex终结点，必须设置HttpGetEnabled为true，否则客户端无法访问服务
behavior.HttpGetEnabled = true;
host.Description.Behaviors.Add(behavior);

//添加终结点
ServiceEndpoint endpoint = host.AddServiceEndpoint(typeof(IContract.IContract), new WebHttpBinding(), string.Empty);

//设置wcf支持ajax调用,仅适用于WebHttpBinding

//System.ServiceModel.Description.WebScriptEnablingBehavior' is only intended for use with WebHttpBinding or similar bindings.

endpoint.Behaviors.Add(new WebScriptEnablingBehavior());

host.Opened += host_Opened;
host.Open();
Console.ReadLine();

}
}

}
}

　　

3.2、方式二：使用配置文件进行配置，启动服务，寄宿到控制台程序。

新建一个配置文件App.config

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
<system.serviceModel>
<!--可不配置-->
<!--同服务里面的设置[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]-->
<!--<serviceHostingEnvironment aspNetCompatibilityEnabled="true"></serviceHostingEnvironment>-->
<behaviors>
<serviceBehaviors>
<behavior name="metadataBehavior">
<serviceMetadata httpGetEnabled="true" />  <!--以wsdl方式发布，因为没有mex终结点，此处必须设置为true，-->
</behavior>
</serviceBehaviors>
<endpointBehaviors>
<behavior name="endpointbehavior">
<enableWebScript/>
</behavior>
</endpointBehaviors>
</behaviors>
<services>
<!--注意此处name必须与第三步服务的命名空间一致-->
<service behaviorConfiguration="metadataBehavior" name="DBService.DBService">
<endpoint address="" binding="webHttpBinding"  contract="IContract.IContract"
behaviorConfiguration="endpointbehavior"/>
<host>
<baseAddresses>
<add baseAddress="http://127.0.0.1:8883/DBServer"/>
</baseAddresses>
</host>
</service>
</services>
</system.serviceModel>
</configuration>

　　代码开启服务，寄宿到控制台程序。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.ServiceModel.Description;

namespace WCFHost
{
class Program
{
static void Main(string[] args)
{
StartService();
}

private static void StartService()
{
try
{
ServiceHost host1 = new ServiceHost(typeof(DBService.DBService));
host1.Opened += host_Opened;
host1.Open();
Console.ReadLine();
}
catch (Exception e)
{
throw e;
}
}

static void host_Opened(object sender, EventArgs e)
{
Console.WriteLine("DBService opened successful");
}

}
}

　　

二、验证服务是否发布成功

1、F5运行控制台程序，界面显示：DBService opened successful说明服务成功开启。

2、在浏览器中输入http://localhost:8883/DBServer，出现如下界面，服务寄宿成功。



3、服务中定义的get方法可以直接通过浏览器验证

3.1、验证不带参数的方法: service地址+方法名称

在浏览器输入http://localhost:8883/DBServer/getlist 回车，会出现下面类似的提示





打开后文件内容为：

{"d":[{"__type":"User:#IContract","Age":20,"Name":"joe"},{"__type":"User:#IContract","Age":25,"Name":"ethan"},{"__type":"User:#IContract","Age":36,"Name":"jane"}]}

是 IList<User>的json格式数据。

3.2 带参数的方法，service地址+方法名称 + ? 参数1名称=值 & 参数2名称=值

在浏览器输入http://127.0.0.1:8883/DBServer/hello?mes=nihao

或者：http://127.0.0.1:8883/DBServer/hello?mes=”nihao“

会弹出是否打开or保存json文件，打开后内容为：{"d":"holle word:nihao"}

如果Add也标记为get，那么可以用此地址调用：http://127.0.0.1:8883/DBServer/Add?x=1&y=2

三、jquery调用

1、ajax调用WCF的代码（新建一个empty web项目，添加一个webform，添加文件夹js，添加jquery-1.8.3.min.js文件）

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebAjax.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
//1、Hello
function Hello() {
var mes = "ninhao";
$.ajax({
type: "get",
//type: "POST",
url: "http://localhost:8883/DBServer/hello?mes=" + mes,
//url: "http://localhost:8883/DBServer/hello",  //post方式时的地址
dataType: "json",
//data: '{"mes":"nihao"}',  //post方式是传递的输入参数
contentType: 'text/json',
success: function (data) {
alert("successful to get data:" + data.d);
},
error: function (data) {
alert(data.statusText);
},
});
}

//2、Add
function Add() {
$.ajax({
type: "POST",
url: "http://localhost:8883/DBServer/Add",
dataType: "json",
contentType: 'text/json',
data: '{"x":1,"y":2}',
success: function (data) {
alert("successful:" + data.d);
},
error: function (data) {
alert(data.statusText);
},
});
}

//3、获取用户list，添加到table后面
function getlist() {
$.ajax({
type: "get",
url: "http://localhost:8883/DBServer/getlist",
dataType: "json",
contentType: 'text/json',
success: function (data) {
var html = "";
$.each(data.d, function (index, item) {
var name = item.Name;
var age = item.Age;
html += "<tr><td>" + name + "</td><td>" + age + "</td></tr>";
});
//三种形式等价
//$("#mytable").after(html);
//$("#mytable tr").eq(0).after(html);
$("table tr:eq(0)").after(html);

},
error: function (data) {
alert(data.statusText);
},
});
}

</script>
</head>
<body>
<%--<form id="form1" runat="server">--%>   <%--特别注意此处要注释掉，不然getlist看不到效果，table添加新行后立马就消失了--%>
<div>
<button onclick="Hello()">Hello get</button>
<button onclick="Add()">Add post</button>
<button onclick="getlist()">GetList get</button>
</div>
<table id="mytable">
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<tr>
<td>Name</td>
<td>Age</td>
</tr>
</table>
<%--</form>--%>
</body>
</html>

四　jQuery调用WCF的要点：

　　1. 契约方法加属性[WebInvoke(RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.WrappedRequest)]

　　2.服务类加属性 [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]

　　3. binding="webHttpBinding"

　　4. <enableWebScript/> 或者

//设置wcf支持ajax调用
endpoint.Behaviors.Add(new WebScriptEnablingBehavior());

　　5. contentType: 'text/json'

五、使用System.ServiceModel.WebHttpBinding协议注意点

1、采用System.ServiceModel.WebHttpBinding协议，客户端不需要配置终结点，只需要指定一个Url即可使用ajax方法调用服务。

2、而且采用在客户端添加服务的办法是行不通的，添加服务后不会自动生成终结点配置，用客户端代理调用服务一直提示服务内部错误。

3. host.Open();报错The communication object, System.ServiceModel.ServiceHost, cannot be used for communication because it is in the Faulted state.

必须以管理员身份打开解决方案。

六 源代码

七、参考：

jquery ajax调用WCF，采用System.ServiceModel.WSHttpBinding协议

webHttpBinding、basicHttpBinding和wsHttpBinding区别

jQuery调用WCF需要注意的一些问题

学习 WCF (6)--学习调用WCF服务的各种方法