getting json from odata wcf service with jquery

Question

So, I have (in fact we all do) this cool WCF Odata service by Telerik Kendo UI, for example: (updated with working link) http://demos.telerik.com/kendo-ui/Service/Northwind.svc. Which is very handful for testing purposes.

I would like to invoke it from javascript and show the result as an alert. So, my code is:

<!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>

But still in Google Chrome console I get this "Origin null is not allowed by Access-Control-Allow-Origin". Why so?

UPD: The peculiar thing is, I've spotted this code here on stackoverflow somewhere, but with this call instead of mine:

$.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);
});

And this one works. Why Kendo's doesn't?

You can refer this link: http://stackoverflow.com/questions/8456538/origin-null-is-not-allowed-by-access-control-allow-origin — Farhan, Aug 20 '13 at 19:32
@prot, not sure but since this will be cross domain, shouldn't you be using jsonp somehow. — Alan Fisher, Aug 20 '13 at 20:31

VDP · Accepted Answer · 2013-08-21T07:36:14.307

You're making a cross origin call. For security reason those aren't directly allowed by the browser. A cross origin call means you are calling an url from another domain, protocol or other port. Meaning if your code was on http://demos.kendoui.com/yourpage you wouldn't get the error.

First off don't just run your code on the local filesystem. Put it on a webserver. Then you'll get a similar error ('not allowed by Access-Control-Allow-Origin'), but...

You have a couple of options:

if you have control over the server:

enable cors (= cross origin rescource sharing; send extra header information)
enable jsonP (=json with padding; wrap json with a callback method)

if you have no control over the server:

use a proxy script ( a script on your server getting the data and passing it along)

UPDATE:

Why does it work with the panoramio url? The server is jsonP enabled. By putting: callback=? jquery knows it should use jsonP and fill in the callback. Try it and check the network tab in your chrome developer tools. You'll see the callback param is filled in and the response starts with that function.

score 1 · Answer 2 · answered Aug 21 '13 at 12:34

Okay, thanks to VDP, I've managed to rig the code so it would work even with Kendo. And since I don't have access to their servers, it seems that they have actually implemented jsonp.

Here's the working code, as said, all what was needed - to add $callback=?:

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

getting json from odata wcf service with jquery

2 Answers2