JS（$.ajax)调用WCF 遇到的各种坑

本文以一个生成、获取“客户列表”的demo来介绍如何用js调用wcf，以及遇到的各种问题。

1 创建WCF服务

1.1 定义接口

创建一个接口，指定用json的格式：

[ServiceContract]
    interface IQueue
    {
        [OperationContract]
        [WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.Wrapped, RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json)]
        void Add(string roomName);

        [OperationContract]
        [WebGet(ResponseFormat=WebMessageFormat.Json)]
        List<string> GetAll();
    }

.

1.2 接口实现

实现上面的接口，并加上AspNetCompatibilityRequirements 和 JavascriptCallbackBehavior ：

.


[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    [JavascriptCallbackBehavior(UrlParameterName = "callback")]
    public class Queue : IQueue
    {
        static readonly ObjManager<string, ClientQueue> m_Queues;

        static Queue()
        {
            m_Queues = new ObjManager<string, ClientQueue>();
        }

        public void Add(string roomName)
        {
            m_Queues.Add(roomName, new ClientQueue() { CreateTime = DateTime.Now });
        }

        public List<string> GetAll()
        {
            return m_Queues.GetAllQueues().OrderBy(q => q.Value.CreateTime).Select(q => q.Key).ToList();
        }
    }


.
这里使用了一个静态的构造函数，这样它就只会被调用一次，以免每次调用时都会初始化队列。

1.3 定义服务

添加一个wcf service, 就一行：

<%@ ServiceHost Language="C#" Debug="true" Service="Youda.WebUI.Service.Impl.Queue" CodeBehind="~/Service.Impl/Queue.cs" %>

整体结构如下：

.

2 调用WCF

客户端调用Add方法，创建一组对话：

.

 var data = { ‘roomName‘: clientID };

            $.ajax({
                type: "POST",
                url: "Service/Queue.svc/Add",
                data: JSON.stringify(data),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                processData: true,
                success: function (msg) {
                    ServiceSucceeded(msg);
                },
                error: ServiceFailed
            });

.
客服端取所有的客户：

.

$.ajax({
                type: "GET",
                url: "Service/Queue.svc/GetAll",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                processData: true,
                success: function (result) {
                    ServiceSucceeded(result);
                },
                error: ServiceFailed
            });

.

3 配置

webconfig配置如下：

.

<system.serviceModel>
    <serviceHostingEnvironment aspNetCompatibilityEnabled="true" multipleSiteBindingsEnabled="true" minFreeMemoryPercentageToActivateService="0" />
    <bindings>
      <webHttpBinding>
        <binding name="HttpBind" openTimeout="00:10:00" sendTimeout="00:10:00"
          maxBufferSize="5242880" maxBufferPoolSize="5242880" maxReceivedMessageSize="5242880"
          crossDomainScriptAccessEnabled="true" />
        <binding name="HttpsBind" sendTimeout="00:10:00" maxBufferSize="5242880"
          maxReceivedMessageSize="5242880" crossDomainScriptAccessEnabled="true">
          <security mode="Transport">
            <transport clientCredentialType="None" />
          </security>
        </binding>
      </webHttpBinding>
    </bindings>
    <behaviors>
      <endpointBehaviors>
        <behavior name="web">
          <webHttp helpEnabled="true" />
        </behavior>
      </endpointBehaviors>
      <serviceBehaviors>
        <behavior name="ServiceBehavior">
          <serviceMetadata httpGetEnabled="true" httpsGetEnabled="true" />
          <serviceDebug includeExceptionDetailInFaults="true" />
        </behavior>
        <behavior name="web">
          <serviceDebug includeExceptionDetailInFaults="true" />
          <serviceMetadata httpGetEnabled="true" httpsGetEnabled="true" />
        </behavior>
      </serviceBehaviors>
    </behaviors>
    <services>
      <service behaviorConfiguration="ServiceBehavior" name="Youda.WebUI.Service.Impl.Queue">
        <endpoint address="" behaviorConfiguration="web" binding="webHttpBinding"
          bindingConfiguration="HttpBind" name="HttpBind" contract="Youda.WebUI.Service.Interface.IQueue" />
        <endpoint behaviorConfiguration="web" binding="webHttpBinding"
          bindingConfiguration="HttpsBind" name="httpsBind" contract="Youda.WebUI.Service.Interface.IQueue" />
      </service>
      <service behaviorConfiguration="ServiceBehavior" name="Youda.WebUI.Service.Impl.Chat">
        <endpoint address="" behaviorConfiguration="web" binding="webHttpBinding"
          bindingConfiguration="HttpBind" name="HttpBind" contract="Youda.WebUI.Service.Interface.IChat" />
        <endpoint behaviorConfiguration="web" binding="webHttpBinding"
          bindingConfiguration="HttpsBind" name="HttpsBind" contract="Youda.WebUI.Service.Interface.IChat" />
      </service>
    </services>
  </system.serviceModel>

.

4 遇到的各种坑

4.1 Status 为 200， status text为 ok， 但报错

http STATUS 是200，但是回调的却是error方法

查了下资料，应该是dataType的原因，dataType为json，但是返回的data不是json格式

于是将ajax方法里把参数dataType："json"去掉就ok了

4.2 Json 数据请求报错（400 错误 ）

详细的错误信息如下：

Service call failed:

status: 400 ; status text: Bad Request ; response text: <?xml version="1.0" encoding="utf-8"?>

The server encountered an error processing the request. The exception message is ‘The formatter threw an exception while trying to deserialize the message: There was an error while trying to deserialize parameter http://tempuri.org/:content. The InnerException message was ‘There was an error deserializing the object of type System.String. Encountered invalid character…

解决方法是，要用JSON.stringify把data转一下，跟

data: ‘{"clientID":"‘ + clientID + ‘", "serviceID":"‘ + serviceID + ‘", "content":"‘ + content + ‘"}‘,

这样与拼是一样的效果，但明显简单多了

参考上面Add方法的调用。

4.3 参数没传进wcf方法里

调试进了这个方法，但参数全为空，发现用的是webget，改成post后就行了

[OperationContract]

[WebInvoke(Method = "POST", RequestFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Wrapped, ResponseFormat = WebMessageFormat.Json)]

List<string> GetMsg(string clientID, int count);

4.4 使用https时遇到了404 、 500的错误

先添加https的binding：

再设置下Service Behaviors：

详细的配置，可参考上面的完整文本配置

4.5 其它配置

时间设置长点， size设置大点：

<binding name="HttpBind" openTimeout="00:10:00" sendTimeout="00:10:00"
         maxBufferSize="5242880" maxBufferPoolSize="5242880" maxReceivedMessageSize="5242880"
         crossDomainScriptAccessEnabled="true" />

使用webHttpBinding 的binding；name和 contract 要写全：

<service behaviorConfiguration="ServiceBehavior" name="Youda.WebUI.Service.Impl.Queue">
       <endpoint address="" behaviorConfiguration="web" binding="webHttpBinding"
         bindingConfiguration="HttpBind" name="HttpBind" contract="Youda.WebUI.Service.Interface.IQueue" />

客服系统那些事

时间： 2024-10-04 18:48:42

JS（$.ajax)调用WCF 遇到的各种坑的相关文章

一步一步搭建客服系统 (4) 客户列表 - JS（$.ajax)调用WCF 遇到的各种坑

阅读目录 1 创建WCF服务 2 调用WCF 3 配置 4 遇到的各种坑 本文以一个生成.获取"客户列表"的demo来介绍如何用js调用wcf,以及遇到的各种问题. 回到顶部 1 创建WCF服务 1.1 定义接口 创建一个接口,指定用json的格式: [ServiceContract] interface IQueue { [OperationContract] [WebInvoke(Method = "POST", BodyStyle = WebMessageBo

用jQuery的Ajax调用WCF服务编程心得

这两天在写基于WCF服务的后台框架,过程中遇到了一些挫折,经过努力全部解决了,在此分享给大家,使用的工具是Visual Studio 2013. 该后台需要支持通过json来传递和接收数据. 首先,说说搭建过程. 第一步:创建WCF服务应用程序项目WCF. 第二步,创建服务使用的数据类 using System; using System.ComponentModel.DataAnnotations; using System.ComponentModel.DataAnnotations.Sch

MSCRM 通过Ajax调用WCF服务

Call WCF Service from Dynamics CRM using AJAX A couple of days back, I had one of my ex-colleagues call me regarding a problem he had been facing when making jQuery AJAX calls to JSON WCF Services from Dynamics CRM. I had encountered this same proble

JQuery Ajax调用WCF实例以及遇到的问题

1.遇到的最多的问题就是跨域问题,这个时间需要我们添加如下代码解决跨域的问题 第一步:在服务类加Attribute [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] 第二步:在构造函数中添加 if (WebOperationContext.Current != null) { WebOperationContext.Current.OutgoingRe

ajax内调用WCF服务

WCF可以当作WebService一样被调用,在html内通过ajax调用WCF服务的方法如下: 1.新建一个WCF服务的网站项目: 2.在项目内增加一个新项:启用了ajax的WCF服务: 3.在对应的XXService.svc.cs文件内增加方法.例: [OperationContract] [WebGet] public void DoWork() { // 在此处添加操作实现 return; } 4.调用方法上必须引用[OperationContract].[WebGet]特性,否则会调用

【原创经验分享】JQuery（Ajax）调用WCF服务

最近在学习这个WCF,由于刚开始学 不久,发现网上的一些WCF教程都比较简单,感觉功能跟WebService没什么特别大的区别,但是看网上的介绍,就说WCF比WebService牛逼多少多少,反正我刚开始入门,就没觉得多大区别啦,这次写的东西跟WebService一样,我们写了一个WCF,那当然就是要用的,要用的话,当然不能只能在.NET平台下用了,必须跨平台呀,所以,Ajax能调用,这个基本的要求就必须要实现的了,所以,本次经验分享就是写JQuery的Ajax调用WCF的服务了.   一.新建

实现jquery.ajax及原生的XMLHttpRequest调用WCF服务的方法

废话不多说,直接讲解实现步骤 一.首先我们需定义支持WEB HTTP方法调用的WCF服务契约及实现服务契约类(重点关注各attribute),代码如下: //IAddService.cs namespace WcfService1 { [ServiceContract] public interface IAddService { [OperationContract] [WebInvoke(Method="POST",RequestFormat=WebMessageFormat.Js

实现jquery.ajax及原生的XMLHttpRequest跨域调用WCF服务的方法

关于ajax跨域调用WCF服务的方法很多,经过我反复的代码测试,认为如下方法是最为简便的,当然也不能说别人的方法是错误的,下面就来上代码,WCF服务定义还是延用上次的,如: namespace WcfService1 { [ServiceContract] public interface IAddService { [OperationContract] [WebInvoke(Method="GET",RequestFormat=WebMessageFormat.Json, Resp

如何让WCF服务更好地支持Web Request和AJAX调用

WCF的确不错,它大大地简化和统一了服务的开发.但也有不少朋友问过我,说是在非.NET客户程序中,有何很好的方法直接调用服务吗?还有就是在AJAX的代码中(js)如何更好地调用WCF服务呢? 我首先比较推荐的是可以通过页面静态方法等方式来转接对WCF的服务.尤其是WCF是属于别的网站的一部分的时候. 但今天我要讲解一下,如果和WCF在一个网站内部,那么js脚本应该如何更好地调用WCF呢?或者说,为了支持js更好地访问,WCF服务在设计的时候应该注意什么呢? 1. 创建服务 2. 修改接口 为了做