宜宾网站建设公司

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)

  1. using
  2. using
  4. namespace
  7. publicinterface

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

  1. using
  2. using
  4. namespace
  6. publicclass
  8. public
  10. returnnew"BoyTNT"

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

  1. using
  2. using
  4. namespace
  7. publicclass
  10. publicstringgetset
  12. publicintgetset

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


2、客户端

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

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

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

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

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

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


网页名称：WCF简单教程(10)Ajax调用-创新互联
URL分享：http://ybzwz.com/article/dcjocs.html

其他资讯