全局$ .ajaxSetup（）调用不影响单独函数中的$ .ajax（）调用吗？

Question

Is there a way to make the scope of $.ajaxSetup() extend to function bodies? I cannot get $.ajaxSetup() to affect the $.ajax() calls within functions. Here's an example:

With the following code, the ajax request sent by function foo() does not include the testHeader specified in ajaxSetup:

$.ajaxSetup({
    headers: {
        testHeader: testValue
    }
});
function foo(theData) {
    $.ajax({
        url: testUrl,
        data: theData,
        type: 'POST',
        contentType: 'application/json',
        dataType: 'json'
    });
}

However, with the following code, the testHeader does get included in the ajax request sent by foo().

function foo(theData) {
    $.ajaxSetup({
        headers: {
            testHeader: testValue
        }
    });
    $.ajax({
        url: testUrl,
        data: theData,
        type: 'POST',
        contentType: 'application/json',
        dataType: 'json'
    });
}

I thought ajaxSetup() is supposed to be global and its scope should extend to function bodies. What am I missing? Thanks.

Answer 1

"Global" may be a misnomer.

$.ajaxSetup will only affect the current jQuery object. If you load jQuery in another page, it will not be affected.

Answer 2

Well, I think the problem is that $.ajaxSetup() is a function call, not a variable. So when foo() is called, $.ajaxSetup() isn't called by anything yet. Here's how I made it work: put $.ajaxSetup() in a $(function(){}) call:

$(function () {
    $.ajaxSetup({
        headers: {
            testHeader: testValue
        }
    });
});

Then the ajax request in foo() will contain the testHeader as desired. Not sure if this is the best solution but it works for me.