global variable when using ajax()

Question

$.ajax({
        type: "POST",
url:"example.com",
        success: function (data) {
            myData = data;


        },
        error: function (response) {
        }
//here json = myData; 
    });

I have to do json = myData which is outside the callback function of ajax() to make it as a global variable, I wonder is this a good practice? How else can I use the data of my ajax callback?

@Katana314 well, if you uncomment `json = myData;` where it is - it will not be valid anymore — zerkms, May 27 '15 at 02:36
@zerksm Right, that's why he commented it out, and why he asked it as a question; because he knows that line is invalid and wanted to know how to make it valid (and Jamen's answer covers that) — Katana314, May 27 '15 at 02:39
@Katana314 well, I cannot agree. "I have to do json = myData which is outside the callback function of ajax() to make it as a global variable, I wonder is this a good practice?" --- OP did not state it does not work, OP asks if it's a good practice to do so. If one had something invalid they would tell it explicitly (at least that's what I expect when one asks a question). — zerkms, May 27 '15 at 02:41
Hm...Okay, taken with the "is this good practice" comment I suppose I see your point. — Katana314, May 27 '15 at 02:45

score 3 · Accepted Answer · 2015-05-27T02:47:41.290

Why do you want to break the asynchronous nature that Ajax was literally designed to have? "Problems" like these have been repeatedly asked on StackOverflow. But the one key thing they forget is that Ajax was designed to be asynchronous, and by trying to use the data outside of the function you're somewhat breaking that rule.

TL;DR: Ajax was designed to be asynchronous, lets keep it that way.

If you want to keep a neat structure, define a handler.

function handler(data) {
  // Handle data
  console.log(data)
}

$.ajax({
    url: "http://localhost",
    type: "POST",
    data: {'example':true},
    success:handler
});

I do not advise this method, read the above on why not.

If you truly need to perform a synchronous Ajax request (sjax? Lol, jQuery does provide a feature to "turn off the asynchronous nature", using the async: false in the object appears to solve that. Here is an example:

var outterData;

$.ajax({
    async: false,
    url: "/echo/json/",
    data: {testing:true},
    success: function(data){
      outterData = data;
    }
});

console.log(outterData);

As you can see, async: false was included in this. And it appears to work fine, based on this JSFiddle a built.

But remember, I don't advise you take away the asynchronous nature of Ajax (it's in the name, for crying out loud). But if you must.

ah this is a good practice! but it won't break also if I put the callback data as global variable, thought ajax is async. — Elton Jamie, May 27 '15 at 02:44
@EltonJamie, see the edit. If you **must** use a synchronous call, then do so (but I don't see any case that you would need to?). I still advise handling the data inside of the callback. — , May 27 '15 at 02:49
why outterData can be defined? I thought it will limited to the callback function scope? — Elton Jamie, May 27 '15 at 03:40
@EltonJamie Variables are only limited to their scope if you declare them with `var` or they're a function argument. As such, it's pretty easy to accidentally make a new global variable via assignment. You can avoid this in strict mode. — Katana314, May 27 '15 at 15:39

global variable when using ajax()

1 Answers1

I do not advise this method, read the above on why not.