Question

所以，我（实际上我们都有）通过Telerik Kendo UI提供这个很酷的WCF Odata服务，例如:(使用工作链接更新）http://demos.telerik.com/kendo-ui/Service/Northwind.svc。这对于测试来说非常少。

我想从javascript调用它并将结果显示为警报。所以，我的代码是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        function button(src1) {
        $.getJSON('http://demos.kendoui.com/service/Northwind.svc/Tasks(4)/Start?$format=json', 
            function(json) {
            alert(json.d.Start);
        });
        }
    </script>
</head>
<body>
    <form id="form1">
    <div><input type="button" onclick="javascript:button();" value="Call WCF Service" /></div>
    </form>
</body>
</html>

但仍然在Google Chrome控制台中我得到了“Access-Control-Allow-Origin不允许使用Origin null”。为什么这样？

UPD：奇怪的是，我已经在stackoverflow上找到了这个代码，但是这个调用代替了我的代码：

$.getJSON('http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=?&minx=-30&miny=0&maxx=0&maxy=150', 
   function(json) {
   alert(json.photos[1].photoUrl);
});

这个有效。为什么剑道不是？

Answer 1

你正在进行跨越来源的通话。出于安全原因，浏览器不直接允许这些原因。跨源调用意味着您正在从另一个域，协议或其他端口调用URL。这意味着如果您的代码在http://demos.kendoui.com/yourpage上，则不会收到错误。

首先，不要只在本地文件系统上运行代码。把它放在网络服务器上。然后你会得到一个类似的错误（“Access-Control-Allow-Origin不允许”），但是......

您有几个选择：

如果您可以控制服务器：

enable cors（=跨域资源共享;发送额外的标头信息）
enable jsonP（= json with padding; wrap json with a callback method）

如果您无法控制服务器：

使用proxy script（服务器上的脚本获取数据并将其传递）

的更新： 的

为什么它与panoramio网址一起使用？服务器启用了jsonP。通过put：callback=? jquery知道它应该使用jsonP并填写回调。尝试并检查chrome开发人员工具中的网络选项卡。您将看到填充了回调参数，响应以该函数开始。

Answer 2

好的，感谢VDP，我已经设法安装了代码，因此它甚至可以与Kendo一起使用。由于我无法访问他们的服务器，似乎他们实际上已经实现了jsonp。

这是工作代码，如上所述，所有需要的东西 - 添加 $ callback =？：

$.getJSON('http://demos.kendoui.com/service/Northwind.svc/Tasks(4)/Start?$format=json&$callback=?',
    function(json) {
    alert(json.d.Start);
});

通过jquery从odata wcf服务获取json

2 个答案: