3

I'm no developer but am pretty good at copy/paste.

I'm trying to parse the Google Latitude JSON (https://latitude.google.com/latitude/apps/badge/api?user=xxxxxxxxxxxxxxxxx&type=json) in a webpage (JavaScript). Is that possible without PHP? and if so, could you show me some example code?

I've been looking but all the examples I found use PHP.

I used the following code:

<!DOCTYPE html>
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"         type="text/javascript"></script>
<script type="text/javascript">
$(function() {
// script goes here

$.getJSON('https://latitude.google.com/latitude/apps/badge/api?&user=xxxxxxxxxxxxxxxxxxx', function(data) {
alert(data.type);
});
});
</script>
</body>
</html>

This code I have tried gave an error:

    3 requests  ❘  21.38KB transferred  ❘  470ms (onload: 448ms, DOMContentLoaded: 448ms)
104ms157ms209ms261ms313ms366ms418ms470ms
    OPTIONS https://latitude.google.com/latitude/apps/badge/api?&user=xxxxxxxxxxxxxxxx 405         (Method Not Allowed) jquery.min.js:19
    o.extend.ajax jquery.min.js:19
    o.extend.get jquery.min.js:19
    o.extend.getJSON jquery.min.js:19
    (anonymous function) json.html:12
    o.extend.ready.o.readyList jquery.min.js:19
    o.extend.each jquery.min.js:12
    o.extend.ready jquery.min.js:19
    (anonymous function) jquery.min.js:19
    XMLHttpRequest cannot load https://latitude.google.com/latitude/apps/badge/api?&user=xxxxxxxxxxxxxxxxxxxxxx. Origin h ttp://dl.dropbox.com is not allowed by Access-Control-Allow-Origin.
jonsca
  • 10,218
  • 26
  • 54
  • 62

4 Answers4

2

In order to make a cross-domain AJAX request, you need to use either CORS or JSONP. This is something the server must support. It doesn't seem that Google Latitude supports this, so you need to use a server-side language (such as PHP) to get the data.

EDIT: If you don't want to use PHP, and you only want to use JavaScript, you can use Yahoo's YQL (you might need an API key).

var googleURL = 'https://latitude.google.com/latitude/apps/badge/api?user=xxxxxxxxxxxxxxxxx&type=json';
$.getJSON('http://query.yahooapis.com/v1/public/yql?callback=?', {
    q: 'select * from json where url="'+googleURL+'"',
    format: 'json'
}, function(data) {
    if(data.query.count){
        var gData = data.query.results.json;
        alert(gData.type);
    }
});
gen_Eric
  • 223,194
  • 41
  • 299
  • 337
0

Seems like you are using wrong url. Remove "&" before "user", and add "type" parameter: https://latitude.google.com/latitude/apps/badge/api?user=xxxxxxxxxxxxxxxxxxx&type=json

Plese note that user id can start with "-" sign.

Also, seems like you tried to use dropbox as the hosting, thats prevent you to make ajax request. Try to load your html page from your local drive or from regular web server.

Snark NN
  • 71
  • 7
0

You have a Cross-site request.

See this last line of error: XMLHttpRequest cannot load https://latitude.google.com/latitude/apps/badge/api?&user=xxxxxxxxxxxxxxxxxxxxxx. Origin h ttp://dl.dropbox.com is not allowed by Access-Control-Allow-Origin?

Your original script is hosted at one server, say your server. It can only ask for data from that same domain. Even if you use different ports (http/https), it will not work.

You could possibly make it work with this.

Another possible solution would be to create a php script or similar on your server that will fetch the data from YAHOO and just dump the output in the result. Then your jQuery ajax call would call your own script (on your server, hence no Cross-Site HTTP request is happening) and it would work this way. Not a good architecture, I suppose, especially if you expect alot of load, but it would work.

Zlatko
  • 18,936
  • 14
  • 70
  • 123
0

You don't need to parse the JSON, $.getJSON will do that for you, and give you back a JavaScript object. Your error is unrelated to the JSON itself - you're attempting to do a cross-site request which is being prevented by browser security policies. I'd suggest reading up on JSONP

http://json-p.org/

Cheers

Madbreaks
  • 19,094
  • 7
  • 58
  • 72