从 JQuery Ajax 使用 wcf 服务应用程序

Posted 2023-03-03

【中文标题】从 JQuery Ajax 使用 wcf 服务应用程序

【英文标题】：consuming wcf service application from JQuery Ajax

【发布时间】：2012-07-25 22:39:45

【问题描述】：

我已经构建了一个 WCF Web 应用程序，将它的方法暴露在 get enabled 方法中

[OperationContract]
[WebGet]
string getStatistics();


[OperationContract]
[WebGet]
string getVenues(string BrandName, int limit);

并编辑了配置文件：

<endpoint address="json" binding="webHttpBinding"  contract="foursquare2RDF.IVenue2rdf" behaviorConfiguration="restBehavior"/>

在服务行为中：

 <endpointBehaviors>
<behavior name="restBehavior">
          <enableWebScript/>
        </behavior>
      </endpointBehaviors>

我在 IIS 上托管该服务，它在浏览器上运行良好，所以当你点击时：

http://localhost:83/venue2rdf.svc/json/getStatistics

效果不错

问题是如果显示这些错误，我就无法使用这个宁静的服务：

OPTIONS http://localhost:83/venue2rdf.svc/json/getStatistics?'venues':'100' 405 (Method Not Allowed) 

XMLHttpRequest cannot load [http://localhost:83/venue2rdf.svc/json/getStatistics][1]. Origin null is not allowed by Access-Control-Allow-Origin.

我正在使用该代码来调用服务：

$.ajax(
    type: "get",
    url: statisticsURL,
    data: "",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (msg) 
        eval("var x = " + msg.d);

        console.log(x);
    
);

到目前为止我达到了什么：

我尝试将 $.ajax 替换为 $.getjson，如类似问题中所述 并且错误 405 被删除，第二个错误刚刚出现 我找到了一个名为 Ajax 的 WCF 服务项目，但我仍然不想迁移到新项目中 我知道有类似的问题，但都不适合，显示我的不同错误

【问题讨论】：

如果您调用的项目与您的 WCF 服务在同一个域中，那么来自 JQuery 的调用是可能的。如果域不同，那么您需要使用 @the_ajp 所说的 JSONP，并且您需要通过将结果写回响应流来确保您的 WCF 处理 JSONP 请求。

【参考方案1】：

您可能应该将其设为JSONP 请求，因为您要跨域，遇到same origin policy：

$.getJSON(stastatisticsURL + "?callback=?", success: function (msg) 
    eval("var x = " + msg.d);

    console.log(x);
);

?callback=? 部分调用 jquery 使其成为 JSONP。我建议您阅读 JSONP 是什么，因为它不是灵丹妙药。要在 WCF 服务上启用 JSONP，请阅读：

C# WCF Web API + JSONP

【讨论】：

好的，这确实有效，只是我猜 Jquery 在解析结果时有问题。它返回意外的令牌，我应该修改服务还是接受 jsonp 的东西？我猜 wcf 4.0 原生支持 jsonp

【参考方案2】：

为了让您使用 jQuery 使用跨域 WCF REST 服务，请在下面找到一个示例：

我的服务如下所示：

    [ServiceContract]
    public interface IJSONPService
    
        [OperationContract]
        [WebGet]
        string GetDate();

        [OperationContract]
        [WebInvoke]
        string PostData(string name);
    

现在我对上述服务的配置条目如下所示：

<services>
    <service name="Service.JSONPService">
        <endpoint address="" binding="webHttpBinding" behaviorConfiguration="json" bindingConfiguration="defaultRestJsonp" contract="Service.IJSONPService">
        </endpoint>
    </service>
</services>
<behaviors>
      <endpointBehaviors>
         <behavior name="json">
             <enableWebScript />
         </behavior>
   </behaviors>
</endpointBehaviors>
<webHttpBinding>
        <binding name="defaultRestJsonp" crossDomainScriptAccessEnabled="true">
          <readerQuotas maxStringContentLength="2147483647" maxArrayLength="2147483647" maxBytesPerRead="2147483647" maxDepth="64" maxNameTableCharCount="2147483647" />
          <security mode="None" />
        </binding>
</webHttpBinding>

您需要注意绑定元素“defaultRestJsonp”中的 crossDomainScriptAccessEnabled 属性，该属性负责确定针对 JSONP 的请求，并适当地将响应转换为来自作为查询的 URL 的回调方法字符串

现在从您的页面执行以下调用上述 WCF REST 服务的 javascript，如下所示：

function TestingWCFRestWithJsonp() 
                $.ajax(
                    url: "http://domain.com/Service/JSONPService.svc/GetDate",
                    dataType: "jsonp",
                    type: "GET",
                    timeout: 10000,
                    jsonpCallback: "MyCallback",
                    success: function (data, textStatus, jqXHR) 
                        alert(data);
                    ,
                    error: function (jqXHR, textStatus, errorThrown) alert('error');

                    ,
                    complete: function (jqXHR, textStatus) alert('complete');
                    
                );
            
            function MyCallback(data) 
                alert(data);
            

查看 $.ajax 方法调用中的 jsonpCallback 属性。

对 Web 服务调用的原始请求如下所示：

GET http://localhost/Service/JSONPService.svc/GetDate?callback=MyCallback&_=1343391683779 HTTP/1.1
Host: localhost
Connection: keep-alive

来自 WCF REST 服务的原始响应如下所示：

HTTP/1.1 200 OK
Cache-Control: private
Content-Type: application/x-javascript
Date: Fri, 27 Jul 2012 12:21:23 GMT
Content-Length: 27

MyCallback("27\/07\/2012");

注意：当您执行 JSONP 请求时，您的 $.ajax 方法错误/完成/成功不会被调用。