WCF简单教程(10)Ajax调用-创新互联

第十篇：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
using
namespace
publicinterface

实现类也超级简单，返回一个User对象。(DataService.svc.cs)

using
using
namespace
publicclass
public
returnnew"BoyTNT"

其中的User是数据契约，只有两个成员。(User.cs)

using
using
namespace
publicclass
publicstringgetset
publicintgetset

然后是重点的Web.config文件了，要启用Ajax访问，需要对endpoint进行一下特殊声明（绿色注释部分）。下面只节选了system.serviceModel节点。

2、客户端

在工程里加一个Client.htm，注意ajax请求不能跨域，因此必须和服务端放到一块儿。我这里使用了jquery来进行ajax访问。

"http://www.w3.org/1999/xhtml"
"javascript""jquery-1.4.2.js"
"javascript"
function
"url""DataService.svc/GetUser"//注意访问的url的写法，是服务名+方法名，这点和WebService是一致的
"cache"false
"async"true
"type""POST"
"dataType""json"
"contentType""application/json; charset=utf-8"
"data"//如果有参数，在这里传递
function
//结果被封装到json.d属性中，数据契约中定义的两个成员都能取到
"#result""Name="", Age="
function
"#result"
"button""获取用户""executeAjaxQuery()"
"result""width:400px;height:200px"

OK，运行一下，在结果窗口里应该能收到“Name=BoyTNT, Age=30”。如果抓一下包，能看到服务端返回的内容是：

{"d""__type""User:#WebServer""Age""Name""BoyTNT"

这就是为什么要从json.d中取数据的原因。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。