使用 C# 和 WFC 的跨域 jQuery Ajax

Posted

技术标签:

【中文标题】使用 C# 和 WFC 的跨域 jQuery Ajax【英文标题】:Cross Domain jQuery Ajax Using C# and WFC 【发布时间】:2012-05-15 13:18:53 【问题描述】:

我有一个用 C# 和 WCF 编写的小型 Web 服务。

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class Service1 : System.Web.Services.WebService

    [WebMethod]
    public string HelloWorld()
    
        return "Hello Worlds";
    

我有一点 jQuery 代码;

        $.support.cors = true;

        $.ajax(
            type: "POST",
            url: "http://localhost:61614/Service1.asmx/HelloWorld",
            data: '',
            dataType: "json",
            success: function (msg) 
                alert(0);
            , error: function (a, b, c)  alert("Err:" + c ); 
            
        );

这会调用网络服务。调用没有问题,但返回时出错。

网络服务在一个应用程序中,而网页本身就是一个 html 页面。最终,HTML 将在 PhoneGap 中使用。

我已经尝试了各种方法。

添加contentType: "application/json; charset=utf-8", 会导致整个调用失败。 使用dataType: 'jsonp" 会导致调用失败。

基本上,上面调用了 WS,但返回时出错,这很奇怪。

我的要求是我需要从 web 服务返回一个 JSON 对象,并且它必须在 Safari 中工作。

有人有完整的 JSONP 调用示例代码吗?

【问题讨论】:

不确定是否有帮助 codeproject.com/Articles/186235/… @griegs - 第一步,确保 localhost:61614/Service1.asmx/HelloWorld?callback=test 在您的浏览器中返回一个 javascript 函数,如下所示:test('say':'HelloWorld');。除非您这样做,否则 jsonp 请求将不会成功。您可以在地址栏中进行测试。希望这会有所帮助。 有一点需要澄清。您是否 100% 确定您在上线后会跨域发出请求?如果它是同一个域,那么你可以只返回没有填充/包装函数的 JSON。 【参考方案1】:

来自jQuery getJSON:

如果 URL 包含字符串“callback=?” (或类似的,由服务器端 API 定义),请求被视为 JSONP。有关详细信息,请参阅 $.ajax() 中对 jsonp 数据类型的讨论。

为了让您的请求被视为 JSONP 请求,您需要在 URL 中包含 callback=?。这告诉 jQuery 创建一个回调函数并将该函数的名称作为回调参数传递给您的服务器。

在服务器端代码中,您的方法必须返回包装或填充的 JSON 代码,其中 JavaScript 函数的名称作为查询字符串中的回调参数传入。

本质上,您所做的是将 JavaScript 返回到客户端浏览器,该浏览器会立即运行,并调用已在页面上下文中定义的函数。

JavaScript:

$.getJSON("http://localhost:61614/Service1.asmx/HelloWorld?callback=?",
    function(data) 

        // alert raw JSON data
        alert(JSON.stringify(data));

        // access the "say" property and alert it
        alert(data.say);
    
);

服务器端:

这是您需要在服务器端执行的粗略版本:

// get the callback parameter value and assign to the String callback
...
return callback + "(  'say' : 'HelloWorld'  );";

对幕后发生的事情的进一步技术解释:

虽然这不是您今天需要了解的内容,但这可能会帮助您更多地了解 jQuery 如何实现 JSONP。

计算结果可能如下所示:

return "jquery43214321432143242('say':'HelloWorld');"

其中jquery43214321432143242 是为您的成功回调函数指定的随机名称。同样,由于返回的文本是使用 text/javascript 返回的,因此它会立即运行,并将 'say':'HelloWorld' 对象作为参数传递给函数。

生成的输出应该是表示原始 JSON 的警报消息,以及从 .say 属性中提取的单词“HelloWorld”。

【讨论】:

jmort253,由于某种原因,它仍然没有调用 Web 服务。 localhost:61614/Service1.asmx/HelloWorld?callback=test 在您的浏览器中是否返回test('say':'HelloWorld');?如果没有,那是第一步。它基本上是动态生成的文本/javascript。请先尝试。 这是一个更复杂的 JSONP 示例,但它应该让您了解在浏览器中点击 URL 时需要查看的内容。请注意 JSON 对象是如何包装在名为“test”的函数中的:search.twitter.com/… 这就是我返回的内容 return "('data' : 'Hello Worlds' )"; 这些是 .NET 和 JSON 请求的明显怪癖。见这篇文章。我还将更新我的答案以反映解决方法。但是,了解您是需要跨域 JSONP(我从 example.com 向 domain.com 的服务器发出请求)还是只需要常规 JSON(我从 example.com 页面发出请求)非常重要。 com 到 example.com 上的同一域上的服务器。)encosia.com/using-jquery-to-consume-aspnet-json-web-services

以上是关于使用 C# 和 WFC 的跨域 jQuery Ajax的主要内容,如果未能解决你的问题,请参考以下文章

使用 jQuery 和 AJAX 的跨域 PHP 调用

Jquery:使用 laravel 的跨域 ajax 'POST'

Phonegap Windows Phone 7 动态 HTML 加载和使用 jQuery 的跨域调用

chrome下如何实现ajax的跨域访问

如何避免 jquery ajax 中使用 wcf 服务的跨域策略?

jquery的跨域请求