1

So I'm a complete newb and am trying to figure out how to use json correctly. Basically I'm asking why the first button in the code below will retrieve and display the json while the second and third will not. When visited in a browser all of the links are displayed in the same format as far as I can tell so I don't see where the problem is.

http://jsfiddle.net/5QM82/4/

<html>
<head> 
    <script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>  
    <script>
        function doJSON1() {
            $.getJSON('http://time.jsontest.com/?alloworigin=true', function (data) {
                alert(JSON.stringify(data))
            });
        }
        function doJSON2() {
            $.getJSON('http://api.vircurex.com/api/get_info_for_1_currency.json?base=DOGE&alt=BTC', function (data) {
                alert(JSON.stringify(data))
            });
        }
        function doJSON3() {
            $.getJSON('http://pubapi.cryptsy.com/api.php?method=singleorderdata&marketid=132', function (data) {
                alert(JSON.stringify(data))
            });
        }
</script> 
</head>
<body>         
    <h3>Get JSON1</h3>
    <button onclick="doJSON1()">Get JSON</button>
    <h3>Get JSON2</h3>
    <button onclick="doJSON2()">Get JSON</button>
    <h3>Get JSON3</h3>
    <button onclick="doJSON3()">Get JSON</button>
</body>
</html>    
  • 3
    Do you get any errors in the console? – Barmar Feb 28 '14 at 02:26
  • Hm, I'm getting a 403 on the second one... – Atutouato Feb 28 '14 at 02:28
  • Second link gives me a 403 – rvighne Feb 28 '14 at 02:29
  • XMLHttpRequest cannot load http://pubapi.cryptsy.com/api.php?method=singleorderdata&marketid=132. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access. (index):1 – Cory Danielson Feb 28 '14 at 02:29
  • XMLHttpRequest cannot load http://api.vircurex.com/api/get_info_for_1_currency.json?base=DOGE&alt=BTC. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access. (index):1 – Cory Danielson Feb 28 '14 at 02:30
  • possible duplicate of [Retreive number via JSON and store in variable](http://stackoverflow.com/questions/22084319/retreive-number-via-json-and-store-in-variable) – Xotic750 Feb 28 '14 at 02:46
  • Why did you create a new question rather than rework the question that you had already posted? – Xotic750 Feb 28 '14 at 02:47
  • @Xotic750 I'm sorry for creating a new question but my previous one was poorly worded and I did not get my point across well. I didn't delete it because people answered with information that will help me in my next steps – Jamie Peregrym Feb 28 '14 at 04:39

3 Answers3

2

Check the console when javascript doesn't work (F12 in most browser), the second and third links are throwing errors respectively, as follows:

XMLHttpRequest cannot load http://api.vircurex.com/api/get_info_for_1_currency.json?base=DOGE&alt=BTC. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access.
XMLHttpRequest cannot load http://pubapi.cryptsy.com/api.php?method=singleorderdata&marketid=132. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access. 

as to what this means and how to solve it, another stackoverflow answer probably explains it better than me, as well as all the wonderful linked resources

No Access Controlled Origin

Ultimately if the server that hosts the resource (i.e. the file you are requesting) doesn't respond with adequate headers (Access-Control-Allow-Origin is one of them) then you will not be able to access a resource in another domain

Are you sure that the second and third ones are not JSONP APIs (i.e. you include them as a <script> tag not an Ajax get), as just by reading the URLs it looks as though they should be an api, but may not be CORS compliant, hence JSONP.

Community
  • 1
  • 1
OJay
  • 4,156
  • 2
  • 22
  • 40
1

This is a cross-domain issue. Most browsers don't allow cross domain requests to prevent XSS attacks and such. There are headers that allow permission for this.

This may be a useful resource: https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS

azurelogic
  • 781
  • 5
  • 11
0

I found out that the second link is messed up and do get the third link to work I did the following:

1- Changed the main code to this: http://jsfiddle.net/5QM82/6/

<html>
<head> 
    <script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>  
    <script>
        function doJSON1() {
            $.getJSON('http://time.jsontest.com/?alloworigin=true', function (data) {
                alert(JSON.stringify(data))
            });
        }
        function doJSON2() {
        $.ajax({          
            type:  'GET',
            url:   '/php.php',
            dataType: 'JSON',              
            success: function(data){
                alert(JSON.stringify(data));
            }
         });
        }
        function doJSON3() {
            $.getJSON('http://pubapi.cryptsy.com/api.php?method=singleorderdata&marketid=132', function (data) {
                alert(JSON.stringify(data))
            });
        }
</script> 
</head>
<body>         
    <h3>Get JSON1</h3>
    <button onclick="doJSON1()">Get JSON</button>
    <h3>Get JSON2</h3>
    <button onclick="doJSON2()">Get JSON</button>
    <h3>Get JSON3</h3>
    <button onclick="doJSON3()">Get JSON</button>
</body>
</html>    

2- Added this php file to bypass the "No Access Controlled Origin":

<?php
header('Content-type: application/xml');
echo file_get_contents("http://pubapi.cryptsy.com/api.php?method=singleorderdata&marketid=132");
?>