Ajax, jquery request from api site

Question

I just want to make a simple request with jquery but it freaking won't work. I don't know why. Can you say me what i did wrong?

http://jsfiddle.net/k6uJn/

There is the code.

$(document).ready(function() {
$.ajax({
    type: "GET",
    url: "http://api.asdasdasdsdsad.com",
    timeout: 5000,
    dataType: "json",
    success: function(data) {
        $.each(json, function(i, item) {
            $('.galleryThreeColumnList photoSwipe').append('<li><a href="' + item.photo + '"><img src="' + item.thumbnail + '" alt="' + item.id + '" /></a></li>')
        });
    },
    error: function(data) {
        console.log(data);
    }
});

});

Greez Edocsyl

Check your error console. It's a CORS issue. You can't do AJAX calls between domains so easily. *Origin http://fiddle.jshell.net is not allowed by Access-Control-Allow-Origin.* — ahren, Nov 28 '12 at 19:49

score 2 · Answer 1 · answered Nov 28 '12 at 19:50

2

That is because the site you are trying to access is on a different domain than yours.

Javascript has a Same origin policy where you cannot make ajax request from a website on a different domain.

answered Nov 28 '12 at 19:50

Ibu

42,752
13
76
103

But i tryed it local with the Mozilla Firefox and it wont work too. – Edocsyl Nov 28 '12 at 19:52
your local `http://localhost/` and the api `http://api.elublu.com` are 2 different domains – Ibu Nov 28 '12 at 20:00

score 1 · Answer 2 · answered Nov 28 '12 at 19:51

Using AJAX for requesting remote pages is generally not possible. As the chrome developer console suggests,

XMLHttpRequest cannot load http://api.elublu.com/. Origin http://fiddle.jshell.net is not allowed by Access-Control-Allow-Origin.

Requesting remote pages would be theoretically possible with CORS, but if CORS had been enabled in this api, you would see

Access-Control-Allow-Origin:*

in the response headers.

score 0 · Answer 3 · answered Nov 28 '12 at 19:52

0

success: function(data) {

Should this actually be as follows? You are using variable called json further down which is not declared...

success: function(json) {

answered Nov 28 '12 at 19:52

beyond-code

1,423
1
12
20

Yes sadly the other answers are also valid! – beyond-code Nov 28 '12 at 20:00

score 0 · Answer 4 · answered Nov 28 '12 at 20:53

Like a lot of them have already mentioned it is a cross-domain call which could be causing that issue.

You can use JSONP which doesn't have same origin policy restrictions (not sure if this meets your requirements though)

Try this:

 $(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "http://api.asdasdasdsdsad.com",
        timeout: 5000,
        dataType: "jsonp",
        success: function(data){
            $.each(data, function(i, item){
                $('.galleryThreeColumnList photoSwipe').append('<li><a href="' + item.photo + '"><img src="' + item.thumbnail + '" alt="' + item.id + '" /></a></li>')
            });
        },
        error: function(data){
            console.log(data);
        }
    });
});

Ajax, jquery request from api site

4 Answers4