How to Catch Jquery $.Getjson (Or $.Ajax with Datatype Set to 'JSONp') Error When Using JSONp

How do I catch jQuery $.getJSON (or $.ajax with datatype set to 'jsonp') error when using JSONP?

It seems that JSONP requests that don't return a successful result never trigger any event, success or failure, and for better or worse that's apparently by design.

After searching their bug tracker, there's a patch which may be a possible solution using a timeout callback. See bug report #3442. If you can't capture the error, you can at least timeout after waiting a reasonable amount of time for success.

$.ajax returns data from external api but $.getJSON throws error

You cannot set http headers with getJSON, your API seems to require it to allows CORS. While you can use ajaxSetup to set the header, I wouldn't recommend it as all subsequent ajax calls will use those settings.

jQuery.ajaxSetup({headers: {'X-API-Key': apiKey }});
$.getJSON(requestURL, function(data){
    console.log(data);
});

How do I get a jQuery's $.getJson to work on a JSONP result?

Try using callback=? instead of callback=abcde. From the documentation:

If the URL includes the string "callback=?" (or similar, as defined by the server-side API), the request is treated as JSONP instead. See the discussion of the jsonp data type in $.ajax() for more details.

jQuery looks for this specific string, and then substitutes its internally-generated function name.

$.getJSON('data.jsonp?callback=?', function(data) {
    console.log(data);
})
    .fail(function(jqXHR, textStatus, errorThrown) {
        console.log("error " + textStatus);
        console.log("incoming Text " + jqXHR.responseText);
        console.log(errorThrown);
})

If you need to use your own callback function, I think you have to use $.ajax() rather than the $.getJSON() shortcut.

$.ajax({
    url: "data.jsonp",
    type: "get",
    dataType: 'jsonp',
    jsonp: "abcde"
})
    .done(function(data) {
        console.log(data);
})
    .fail(function(jqXHR, textStatus, errorThrown) {
        console.log("error " + textStatus);
        console.log("incoming Text " + jqXHR.responseText);
        console.log(errorThrown);
});

How do I handle jQuery $.getJSON error responses when using JSONP?

Answer (with help of @Felix Kling):

JSONP responses cannot bet received if JSONP server returns HTTP 400 status.

Explanation:

JSONP works by making the client include a remote (server-side) Javascript that produces the desired JSON response when being executed on the client side. In case of HTTP 400 the script never gets executed on client side.

Workarounds:

• Always return JSONP error messages/ exceptions with HTTP 200 OK, or
• Use Cross-Origin Resource Sharing (CORS). When using jQuery on the client, the simplest way to enable CORS is to set an additional Access-Control-Allow-Origin: * header on the server.

For further reading on CORS see http://docs.kendoui.com/howto/use-cors-with-all-modern-browsers and http://www.html5rocks.com/en/tutorials/cors/?redirect_from_locale=de#toc-cors-from-jquery

jQuery: handle errors in getJSON()?

The getJSON method does not natively return errors but you could dive into the xhr object that is returned as a parameter in the callback.

The getJSON method is a shorthand function for jQuery.ajax. Using jQuery.ajax you can easily achieve error handling:

  $.ajax({
    url: 'http://127.0.0.1/path/application.json',
    dataType: 'json',
    success: function( data ) {
      alert( "SUCCESS:  " + data );
    },
    error: function( data ) {
      alert( "ERROR:  " + data );
    }
  });

Can anyone explain what JSONP is, in layman terms?

Preface:

This answer is over six years old. While the concepts and application of JSONP haven't changed
(i.e. the details of the answer are still valid), you should
look to use CORS where possible
(i.e. your server or
API supports it, and the
browser support is adequate),
as JSONP has inherent security risks.

---

JSONP (JSON with Padding) is a method commonly used to
bypass the cross-domain policies in web browsers. (You are not allowed to make AJAX requests to a web page perceived to be on a different server by the browser.)

JSON and JSONP behave differently on the client and the server. JSONP requests are not dispatched using the XMLHTTPRequest and the associated browser methods. Instead a <script> tag is created, whose source is set to the target URL. This script tag is then added to the DOM (normally inside the <head> element).

JSON Request:

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
    // success
  };
};

xhr.open("GET", "somewhere.php", true);
xhr.send();

JSONP Request:

var tag = document.createElement("script");
tag.src = 'somewhere_else.php?callback=foo';

document.getElementsByTagName("head")[0].appendChild(tag);

---

The difference between a JSON response and a JSONP response is that the JSONP response object is passed as an argument to a callback function.

JSON:

{ "bar": "baz" }

JSONP:

foo( { "bar": "baz" } );

---

This is why you see JSONP requests containing the callback parameter, so that the server knows the name of the function to wrap the response.

This function must exist in the global scope at the time the <script> tag is evaluated by the browser (once the request has completed).

---

Another difference to be aware of between the handling of a JSON response and a JSONP response is that any parse errors in a JSON response could be caught by wrapping the attempt to evaluate the responseText
in a try/catch statement. Because of the nature of a JSONP response, parse errors in the response will cause an uncatchable JavaScript parse error.

Both formats can implement timeout errors by setting a timeout before initiating the request and clearing the timeout in the response handler.

---

Using jQuery

The usefulness of using jQuery to make JSONP requests, is that jQuery does all of the work for you in the background.

By default jQuery requires you to include &callback=? in the URL of your AJAX request. jQuery will take the success function you specify, assign it a unique name, and publish it in the global scope. It will then replace the question mark ? in &callback=? with the name it has assigned.

---

Comparable JSON/JSONP Implementations

The following assumes a response object { "bar" : "baz" }

JSON:

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
    document.getElementById("output").innerHTML = eval('(' + this.responseText + ')').bar;
  };
};

xhr.open("GET", "somewhere.php", true);
xhr.send();

JSONP:

function foo(response) {
  document.getElementById("output").innerHTML = response.bar;
};

var tag = document.createElement("script");
tag.src = 'somewhere_else.php?callback=foo';

document.getElementsByTagName("head")[0].appendChild(tag);

---

Related Topics