function foo() {
 var httpRequest = new XMLHttpRequest();
 httpRequest.open('GET', "/echo/json");
 httpRequest.send();
 return httpRequest.responseText;
}
var result = foo(); // always ends up being 'undefined'

Felix Kling did a fine job writing an answer for people using jQuery for AJAX, I've decided to provide an alternative for people who aren't.

Here is a simple analogy

function getFive(){
 var a;
 setTimeout(function(){
 a=5;
 },10);
 return a;
}

function onComplete(a){ // When the code completes, do this
 alert(a);
}
function getFive(whenDone){
 var a;
 setTimeout(function(){
 a=5;
 whenDone(a);
 },10);
}

1. Make the AJAX call synchronous (lets call it SJAX).
2. Restructure your code to work properly with callbacks.

If you have to do it, you can pass a flag: Here is how:

var request = new XMLHttpRequest();
request.open('GET', 'yourURL', false); // `false` makes the request synchronous
request.send(null);

if (request.status === 200) {// That's HTTP for 'ok'
 console.log(request.responseText);
}

var result = foo();
// code that depends on `result` goes here

foo(function(result) {
 // code that depends on `result`
});

function myHandler(result) {
 // code that depends on `result`
}
foo(myHandler);

function foo(callback) {
 var httpRequest = new XMLHttpRequest();
 httpRequest.onload = function(){ // when the request is loaded
 callback(httpRequest.responseText);// we're calling our method
 };
 httpRequest.open('GET', "/echo/json");
 httpRequest.send();
}

We have now made our foo function accept an action to run when the AJAX completes successfully, we can extend this further by checking if the response status is not 200 and acting accordingly (create a fail handler and such). Effectively solving our issue.

If you're still having a hard time understanding this read the AJAX getting started guide at MDN.

function foo() {
 var httpRequest = new XMLHttpRequest();
 httpRequest.open('GET', "/echo/json");
 httpRequest.send();
 return httpRequest.responseText;
}
var result = foo(); // Always ends up being 'undefined'

Felix Kling did a fine job writing an answer for people using jQuery for AJAX, but I've decided to provide an alternative for people who aren't.

Here is a simple analogy:

function getFive(){
 var a;
 setTimeout(function(){
 a=5;
 },10);
 return a;
}

function onComplete(a){ // When the code completes, do this
 alert(a);
}
function getFive(whenDone){
 var a;
 setTimeout(function(){
 a=5;
 whenDone(a);
 },10);
}

1. Make the AJAX call synchronous (let’s call it SJAX).
2. Restructure your code to work properly with callbacks.

If you have to do it, you can pass a flag. Here is how :

var request = new XMLHttpRequest();
request.open('GET', 'yourURL', false); // `false` makes the request synchronous
request.send(null);
if (request.status === 200) {// That's HTTP for 'ok'
 console.log(request.responseText);
}

var result = foo();
// Code that depends on `result` goes here

foo(function(result) {
 // Code that depends on `result`
});

function myHandler(result) {
 // Code that depends on `result`
}
foo(myHandler);

function foo(callback) {
 var httpRequest = new XMLHttpRequest();
 httpRequest.onload = function(){ // When the request is loaded
 callback(httpRequest.responseText);// We're calling our method
 };
 httpRequest.open('GET', "/echo/json");
 httpRequest.send();
}

We have now made our foo function accept an action to run when the AJAX completes successfully. We can extend this further by checking if the response status is not 200 and acting accordingly (create a fail handler and such). Effectively it is solving our issue.

If you're still having a hard time understanding this, read the AJAX getting started guide at MDN.

#If you're not using jQuery in your code, this answer is for you

#What you're facing

XMLHttpRequest supports both synchronous and asynchronous communications. In general, however, asynchronous requests should be preferred to synchronous requests for performance reasons.

In short, synchronous requests block the execution of code... ...this can cause serious issues...

If you're not using jQuery in your code, this answer is for you

What you're facing

XMLHttpRequest supports both synchronous and asynchronous communications. In general, however, asynchronous requests should be preferred to synchronous requests for performance reasons.

In short, synchronous requests block the execution of code... ...this can cause serious issues...