AJAX error handling with jQuery

by whitesiroi

HTML

<h1>Instagram test</h1>

<div>
    <button id="myBtnAjax">send request</button>
</div>

<div id="result">
</div>

JavaScript

$(document).ready(function() {

    $('#myBtnAjax').click(function() {

        /**
         * http://api.jquery.com/jQuery.ajax/
         */
        $.ajax({
            url: "https://api.instagram.com/oembed/?url=https%3A%2F%2Fwww.instagram.com%2Fp%2Flgg4N5Q5rh&format=json&maxwidth=500&embed=widget&width=1",

            type: "GET",

            dataType: "jsonp",

            /**
             * A function to be called if the request fails. 
             */
            error: function(jqXHR, textStatus, errorThrown) {
                alert('An error occurred... Look at the console (F12 or Ctrl+Shift+I, Console tab) for more information!');

                $('#result').html('<p>status code: '+jqXHR.status+'</p><p>errorThrown: ' + errorThrown + '</p><p>jqXHR.responseText:</p><div>'+jqXHR.responseText + '</div>');
                console.log('jqXHR:');
                console.log(jqXHR);
                console.log('textStatus:');
                console.log(textStatus);
                console.log('errorThrown:');
                console.log(errorThrown);
            },

            /**
             * A function to be called if the request succeeds.
             */
            success: function(data, textStatus, jqXHR) {
                $('#result').html(data);
                alert('Load was performed. Look at the console (F12 or Ctrl+Shift+I, Console tab) for more information! ');
                console.log('jqXHR:');
                console.log(jqXHR);
                console.log('textStatus:');
                console.log(textStatus);
                console.log('data:');
                console.log(data);
            }
        });

    });

});

///////////////////////////////////////////////////////////