I'm using jQuery.ajax to make a REST call and retrieve some JSON. It's working as expected. However, when I force an error condition, such as an invalid URL, the always method does not fire. If I set crossDomain=false or dataType='json', then always does fire. But, I can't do that in my production code. If you set url='http://ip.jsontest.com/' then always fires. I created a small example to illustrate the problem:
var jqXHR = jQuery.ajax({
type: 'GET',
async: false,
cache: false,
url: 'http://ip.jsontest.com.BADURL/',
contentType: 'application/json; charset=UTF-8',
crossDomain: true,
dataType: 'jsonp'
})
.done(function (data, textStatus, jqXHR) {
console.log('Your IP is ' + data.ip);
console.log('done was called');
})
.fail(function (jqXHR, textStatus, errorThrown) {
console.log('fail was called');
})
.always(function (dataOrjqXHR, textStatus, jqXHRorErrorThrown) { console.log('always was called'); });
You can run this in the console at jquery.com which is using jQuery 1.9.1. I have the same behavior using jQuery 1.11.1. I need always to fire to handle times when the url is unavailable. I get the same behavior in IE11, Chrome 38 and FF 33. Am I doing something wrong or is this a bug? Thanks.
The parameter is not being deprecated, the success method is. You can continue using success: function re-read it carefully.
contentType is the type of data you're sending, so application/json; charset=utf-8 is a common one, as is application/x-www-form-urlencoded; charset=UTF-8 , which is the default. dataType is what you're expecting back from the server: json , html , text , etc.
AJAX is still relevant and very popular, but how you write it may change based on what libraries or frameworks are in the project. I almost never use the "raw" JavaScript way of writing it because jQuery makes it easier and is almost always already loaded into a project I'm working on.
AJAX success is a global event. Global events are triggered on the document to call any handlers who may be listening. The ajaxSuccess event is only called if the request is successful. It is essentially a type function that's called when a request proceeds.
As of jQuery 1.5, the complete setting can accept an array of functions. Each function will be called in turn. This is an Ajax Event. An object of string/regular-expression pairs that determine how jQuery will parse the response, given its content type. (version added: 1.5)
Definition and Usage. The ajax() method is used to perform an AJAX (asynchronous HTTP) request. All jQuery AJAX methods use the ajax() method. This method is mostly used for requests where the other methods cannot be used.
See jQuery.ajax ( settings ) below for a complete list of all settings. A set of key/value pairs that configure the Ajax request. All settings are optional. A default can be set for any option with $.ajaxSetup (). A set of key/value pairs that map a given dataType to its MIME type, which gets sent in the Accept request header.
At its simplest, the $.ajax () function can be called with no arguments: Note: Default settings can be set globally by using the $.ajaxSetup () function. This example, using no options, loads the contents of the current page, but does nothing with the result.
This is something that is known for JSONP calls. According to the $.ajax reference for error
:
Note: This handler is not called for cross-domain script and cross-domain JSONP requests.
Also note that synchronous JSONP calls are not supported:
Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation.
Workarounds typically involve either 1) setting a timeout for the call or 2) using a plugin to add more typical error
functionality.
1) Setting a timeout (and async true)
var jqXHR = jQuery.ajax({
type: 'GET',
async: true,
cache: false,
url: 'http://ip.jsontest.com.BADURL/',
contentType: 'application/json; charset=UTF-8',
crossDomain: true,
dataType: 'jsonp',
timeout: 2000
})
.fail(function (jqXHR, textStatus, errorThrown) {
console.log('fail was called');
})
.done(function (data, textStatus, jqXHR) {
console.log('Your IP is ' + data.ip);
console.log('done was called');
})
.always(function (dataOrjqXHR, textStatus, jqXHRorErrorThrown) { console.log('always was called'); });
2) The jQuery JSONP plugin which adds error recovery features.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With