JavaScript AJAX Basics (retiring) AJAX and APIs Stage 4 Challenge Answer

Arthur Bardakov
Arthur Bardakov
5,636 Points

How to set a timeout setting for a server callback?

I have a question! In this example, if a user types in some non-existing request, the server respond neither with an answer, nor an error(if we use $.getJSON method here)! To see this, that there is no such a request, we have to use the $.ajax method, which gives us the 'timeout' setting! But if I start using this method, the following error occur - "XMLHttpRequest cannot load https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://website' is therefore not allowed access."...Could you answer why, please?

5 Answers

Christopher Debove
PRO
Christopher Debove
Pro Student 18,366 Points

Hi,

With which settings do you call $.ajax ? Do you specifying the dataType : "json" ? If not, it's what causes the jsoncallback param to not be set.

Arthur Bardakov
Arthur Bardakov
5,636 Points

Hi! I indicated the "json" format in the options for the second parameter of the $.ajax method! The code looks like this...

$().ready(()=>{ $('form').on('submit', (event)=> { event.preventDefault(); $('#search').prop('disabled', true); $('#submit').attr('disabled', true).val('searching....');

    var flickerAPI = 'https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?';
    var text = $('#search').val();

    const displayPhotoes = (data)=>{
        var photoHTML = '<ul>';
        $.each(data.items, (i, photo)=>{
            photoHTML += '<li class="grid-25 tablet-grid-50">';
            photoHTML += '<a href="' + photo.link + '" class="image">';
            photoHTML += '<img src="' + photo.media.m + '"</a></li>';

            $('#search').prop('disabled', false);
            $('#submit').attr('disabled', false).val('Search');
        });
        photoHTML += '</ul>';
        $('#photos').html(photoHTML);
    }

    var flickerOptions = {
        tags: text,
        type: "GET",
        format: "json",
        timeout: 4000
    };

    var request = $.ajax(flickerAPI, flickerOptions, displayPhotoes);
    request.fail(( jqXHR, textStatus )=> {
      alert( "Request failed: " + textStatus );
    });
 });

});

Christopher Debove
PRO
Christopher Debove
Pro Student 18,366 Points

Oh I see you're not using the $.ajax function the good way. The $.ajax function take one or 2 parameters :

$.ajax(url, ajaxSettings)
$.ajax(ajaxSettings);

// ajaxSettingFomat :
/*
{
  type: string,
  dataType: string,
  success: handler,
  error: handler,
  data: object,
  ...
}
*/

With your sample:

var flickerOptions = {
  tags: text,
  format: "json"
};

$.ajax(flickerAPI, {
  type: "get",
  dataType: "json",
  timeout: 4000,
  success: displayPhotoes,
  data: flickerOptions
});

Do you see the property "dataType". That's the property I was talking about. It's this property which makes jQuery replace the placeholder for jsoncallback in your url.

By the way I recommend you to look at jQuery documentation for AJAX if you want to dig a little more farther in this topic. =)

Arthur Bardakov
Arthur Bardakov
5,636 Points

Ah, I missed that there are supposed to be to one or two parameters for this method! Thanks a lot!!