调用本地更新脚本的JQuery AJAX在Safari中失败，适用于Chrome和FF

Question

Making an AJAX call on a local script to update dbase using POST. Error reporting is not giving me much to go on. Works in IE, Chrome and FF, but not Safari 6. Other JQuery features are working in Safari, and Firebug DOM tab is showing JQuery has. Here is the AJAX code block.

$.ajax({
    type: "POST",
    url: "updatead3.php",
    data: {pos_data: dd_elm},   //index array created earlier
    contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
}).done (function(data) {
    if(console && console.log) {
       console.log("AJAX success: " + data);
    }
}).fail(function(obj,status,error) {
     alert("AJAX Error:" + obj.error);
});

alert("Changes were saved!");
location.reload();
)};
)}:

Under the Firebug Scripts tab > Inspect jquery-1.9.1.js menu option, "Access to restricted URI denied" is being displayed. But if this were a cross domain issue, I wouldn't expect any JQuery functionality. Thanks in Advance

Answer 1

When dealing with $.ajax (or any asynchronous code for that matter), one should always remember: 'below' doesn't mean 'after'.

To make some code executed right after $.ajax() call is resolved, successfully or not, it's not enough just to write it under $.ajax - actually, unless it introduces a waiting block (like alert does), its code will always be executed before any ajax callback has a chance to work.

Instead you should use methods provided by the Promise interface (and jqXHR object, returned by $.ajax):

• .done(), which is fired when AJAX call is resolved successfully
• .fail(), which is fired when AJAX call is resolved with an error
• .always(), which is fired when AJAX call is resolved anyway (and all the callbacks specified in .done/.fail methods have been completed too).

In this particular case you trigger the page's reload while the AJAX call is still processed. That's confusing for some browsers, first, and actually in most cases prevents you from correctly processing the results of AJAX.

What should be done instead is placing the code into $.ajax().always() callback:

$.ajax({ some: 'settings'})
 .done(function() { console.log('SUCCESS :)'); })
 .fail(function() { console.log('FAIL :('); })
 .always(function() { console.log('Doh, I\'m fired anyway'); });