Ajax + jQuery - getting successful response?

Question

Trying to practice pulling data via an API with jQuery. I watched some YouTube tutorial and I'm basically just trying to get a successful response... but I can't for the life of me get it to work..

Apart from YouTube, I'm subscribed to Codeschool and they cover ajax and json, but they don't have a real life example unfortunately... or at least not yet.

The API I'm using is My API Films - http://www.myapifilms.com/imdb.do jsfiddle and code are below.

I guess it will be better if you get your own tokens? Many many thanks in advance.

https://jsfiddle.net/oddtbaq6/

var url = 'http://www.myapifilms.com/imdb/idIMDB?title=batman&' + token + '&format=json&language=en-us&aka=0&business=0&seasons=0&seasonYear=0&technical=0&filter=2&exactFilter=0&limit=1&forceYear=0&trailers=0&movieTrivia=0&awards=0&moviePhotos=0&movieVideos=0&actors=0&biography=0&uniqueName=0&filmography=0&bornAndDead=0&starSign=0&actorActress=0&actorTrivia=0&similarMovies=0&adultSearch=0&goofs=0&quotes=0&fullSize=0&companyCredits=0';

$.ajax(url, {
    success: function(data) {
    console.log(data);
  },
  error: function() {
    console.log('error');
  },
  dataType: 'json',
  type: 'GET'
});

console errors:

XMLHttpRequest cannot load.

No 'Access-Control-Allow-Origin' header is present on the requested resource.

Origin 'null' is therefore not allowed access.

See this question: http://stackoverflow.com/questions/2055186/cross-domain-json-request — rp., May 23 '16 at 00:29
You are probably getting a network error as that site doesn't send a CORS header allowing javascript ajax requests, it has to be done server side — Patrick Evans, May 23 '16 at 00:29
hi patrick, thanks for the reply. can you elaborate more? and codeschool doesnt have one yet. they have courses on ajax and json like i mentioned but they are not using real APIs. but it's one of the most member requested course and topics. — , May 23 '16 at 00:32

score 0 · Answer 1 · answered May 23 '16 at 02:29

0

When making an AJAX request from a browser, the browser will only allow the request to be made if the target API is CORS enabled. This is done for security reasons so that if a website has a private API, that API cannot be accessed in the browser via an AJAX request from a domain other than its own. For example, mywebsite.com cannot make an AJAX request to yourapi.com unless yourapi.com designates its routes as being accessible from other domains.

I suggest finding a popular, public API that will certainly be CORS enabled. You can also run your own server to serve both your client-side code and your own api.

answered May 23 '16 at 02:29

fvgs

21,412
9
33
48

thanks for the explanation. I'm curious though, I thought this API is public? do you have any recommendations on public APIs? I was thinking on playing around with Flickr for practice – May 23 '16 at 02:50
@giantqtipz An API can be public without supporting CORS. CORS is policy that browsers enforce, and APIs are expected to provide the necessary http header if they wish browsers to allow requests to be made to them. However, outside the context of a browser, CORS has nothing to do with whether an API is public or private. I expect you could access this particular API from a script or using `curl` just fine. – fvgs May 23 '16 at 07:38

score 0 · Answer 2 · answered May 23 '16 at 02:32

0

You have CORS issues:

However, you can use the https://crossorigin.me/ service.

Then, you should request: «https://crossorigin.me/http://www.myapifilms.com/imdb/idIMDB?title=batman&' + token + '&format=json&language=en-us&aka=0&business=0&seasons=0&seasonYear=0&technical=0&filter=2&exactFilter=0&limit=1&forceYear=0&trailers=0&movieTrivia=0&awards=0&moviePhotos=0&movieVideos=0&actors=0&biography=0&uniqueName=0&filmography=0&bornAndDead=0&starSign=0&actorActress=0&actorTrivia=0&similarMovies=0&adultSearch=0&goofs=0&quotes=0&fullSize=0&companyCredits=0».

var url = "https://crossorigin.me/http://www.myapifilms.com/imdb/idIMDB?title=batman&' + token + '&format=json&language=en-us&aka=0&business=0&seasons=0&seasonYear=0&technical=0&filter=2&exactFilter=0&limit=1&forceYear=0&trailers=0&movieTrivia=0&awards=0&moviePhotos=0&movieVideos=0&actors=0&biography=0&uniqueName=0&filmography=0&bornAndDead=0&starSign=0&actorActress=0&actorTrivia=0&similarMovies=0&adultSearch=0&goofs=0&quotes=0&fullSize=0&companyCredits=0";

answered May 23 '16 at 02:32

Danny Fardy Jhonston Bermúdez

5,500
5
25
37

1

whoa that works. quick question, why not use this for every single API out there? sorry if it's an obvious question – May 23 '16 at 02:52
It is not always necessary. Because there are APIs that do include in their responses the: `Access-Control-Allow-Origin: *` but there are other APIs that do not have established the `Access-Control-Allow-Origin: * ` in the response. You can find more about this in MDN. https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS – Danny Fardy Jhonston Bermúdez May 23 '16 at 03:04
@giantqtipz, _"why not use this for every single API out there"_ one reason is if you are requesting sensitive data that domain could be capturing it for its own uses. If the API doesn't have cors enabled and does not provide a jsonp response, I would suggest using a script on your own server instead of going through a 3rd party – Patrick Evans May 23 '16 at 14:41

score 0 · Answer 3 · answered May 23 '16 at 02:33

Please, try to change like this.

var url = 'http://www.myapifilms.com/imdb/idIMDB?title=batman&' + token + '&format=json&language=en-us&aka=0&business=0&seasons=0&seasonYear=0&technical=0&filter=2&exactFilter=0&limit=1&forceYear=0&trailers=0&movieTrivia=0&awards=0&moviePhotos=0&movieVideos=0&actors=0&biography=0&uniqueName=0&filmography=0&bornAndDead=0&starSign=0&actorActress=0&actorTrivia=0&similarMovies=0&adultSearch=0&goofs=0&quotes=0&fullSize=0&companyCredits=0';

$.ajax({
    url: 'url',
    success: function(data) {
            console.log(data);
         },
    error: function() {
        console.log('error');
    },
    dataType: 'json',
    type: 'GET'
});

Ajax + jQuery - getting successful response?

3 Answers3