1

To start off, this is a cross-domain request I am trying to complete. Here is a link to the Strava API whitepaper that I am using as a reference. Strava Wiki

Please see the code I am using below. If it is not possible to perform the request with jQuery, can you give me an example of another way to do it? (ex. AJAX) I've done my research but I admit that I do not know enough to understand why the request is not working. Do I need to insert an argument that waits for the response before displaying the alert, or is that implied? Thanks in advance!

 <html lang="en">
 <head>
   <meta charset="utf-8">
   <title>jQuery demo</title>
 </head>
 <body>
   <a href="http://jquery.com/">jQuery</a>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
   <script>
        $(document).ready(function(){
            $("a").click(function(event){
                $.getJSON('http://www.strava.com/api/v1/segments/637215', function(data) {
                    alert(data);
                });
            });
         });
   </script>
 </body>
 </html>
Chase
  • 29,019
  • 1
  • 49
  • 48
Arya T
  • 13
  • 3
  • open this up in chrome: http://jsfiddle.net/YzPkD/1/ and open dev tools and navigate to the network bar and then click on the link and see the request to strava.com is getting cancelled I am not sure why – Baz1nga Sep 14 '12 at 18:51
  • 2
    `XMLHttpRequest cannot load http://www.strava.com/api/v1/segments/637215?_=1347648469684. Origin someotherhost is not allowed by Access-Control-Allow-Origin.` you can't make this request because it doesn't support [CORS](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing). – Musa Sep 14 '12 at 18:51

1 Answers1

3

For more information as to why your solution will not work as intended, please refer to: Access-Control-Allow-Origin Multiple Origin Domains?

Try using the .ajax method instead with dataType: "jsonp": 

$.ajax({
   url: "http://www.strava.com/api/v1/segments/637215",
    dataType: 'jsonp',
    success: function(data){
        console.log(data);
     }
 });

running this gets the following:

{"segment":{"id":637215,"name":"Highway 33 Climb - Matilija Lake to Rose Valley","distance":16779.2,"elevationGain":1101.1,"elevationHigh":1070.9,"elevationLow":289.54,"averageGrade":4.64087,"climbCategory":"1"}}

EXAMPLE

Note that there does seem to be an error with the returned data, but I am able to see it. (Please see Musa's comment below).

EDIT

or you can change: 

$.getJSON('http://www.strava.com/api/v1/segments/637215', function(data) {
                    console.log(data);
                });

to:

$.getJSON('http://www.strava.com/api/v1/segments/637215?callback=?', function(data) {
                    console.log(data);
                });

This will cause .getJSON() to use jsonp instead.

If the URL includes the string "callback=?" (or similar, as defined by the server-side API), the request is treated as JSONP instead.

EXAMPLE

Community
  • 1
  • 1
Chase
  • 29,019
  • 1
  • 49
  • 48
  • Using jsonp as the dataType does circumvent same oringin policy but since the actual data is plain json it causes a syntax error when trying to run the script. – Musa Sep 14 '12 at 18:58
  • Gotcha, I wasn't sure if I had missed something somewhere and I didn't have a whole lot of time to look up all the details currently (at work). Thanks @Musa – Chase Sep 14 '12 at 18:59
  • You didn't put a parameter in the success function, see http://jsfiddle.net/Eeywk/2/ check the console and you'll see an error – Musa Sep 14 '12 at 19:03
  • The url with the callback included did the trick, but I'm still confused about the error it is throwing. How can I avoid the error: "Uncaught SyntaxError: Unexpected token :"? – Arya T Sep 14 '12 at 19:26
  • I was actually looking into that a bit as well. Here are a few posts that might help: http://stackoverflow.com/questions/6046008/jsonp-request-returning-error-uncaught-syntaxerror-unexpected-token; http://stackoverflow.com/questions/3143698/uncaught-syntaxerror-unexpected-token – Chase Sep 14 '12 at 19:30
  • So a friend of mine pointed me to the YQL console. The console generated a link for me that I could then use to perform the getJSON function and receive the correct data. [YQL Console: select * from json where url="http://www.strava.com/api/v1/segments/637215"](http://developer.yahoo.com/yql/console/?q=select%20*%20from%20json%20where%20url%3D%22http%3A%2F%2Fwww.strava.com%2Fapi%2Fv1%2Fsegments%2F637215%22#h=select%20*%20from%20json%20where%20url%3D%22http%3A//www.strava.com/api/v1/segments/637215%22) – Arya T Sep 14 '12 at 23:51
  • Very nice! I'll have to look more into that when I get a chance. Thank you for posting it back here. – Chase Sep 15 '12 at 15:19