Como ya se ha dicho, las peticiones Ajax son asíncronas. Si tú quieres usar lo que devuelve la petición fuera de su contexto, debes pasar la variable a otra función que hace las veces de lo que se conoce como callback
.
Ya @alanfcm ha mostrado una manera de hacerlo. Pero conviene que revises las recomendaciones que ofrece jQuery en su Learning center.
Allí, en el apartado The jqXHR Object ellos dicen que desde jQuery 1.5, las peticiones Ajax retornan un objeto que implementa la interfaz Promise
. Para aprovechar las ventajas de esto, ellos recomiendan encarecidamente que se use el código asignando una variable a la petición, y luego asignándole las diferentes funciones de retorno tales como done, fail, always, complete
. Algunas de estas funciones son opcionales. Pero conviene que al menos implementes done
y fail
. Por ejemplo, complete
es útil para saber cuando se terminó totalmente la petición, always
se muestra cada vez que una petición ha terminado todo el ciclo (pensemos en peticiones que se pueden enviar más de una vez.).
En este código, tú puedes manejar el resultado de la petición dentro del mismo done
o lo puedes pasar desde done
a una función que haría de callback
. Y usamos always
para mostrar el estado de la variable status
.
/*
Siguiendo las recomendaciones de jQuery LC
creamos una referencia a la petición
para más tarde asignarle las funciones que vayamos
a necesitar: done, fail, always, complet ....
*/
var myAjax = $.getJSON('https://api.github.com/users/padrecedano');
var status = "";
myAjax.done(function(data) {
status = "Todo OK";
/*Aquí puedes usar data*/
//console.log( data );
/*O lo puedes pasar a otra función*/
myCallBack(data);
});
/*Aquí se manejan/muestran los eventuales fallos*/
myAjax.fail(function() {
status = "Error";
console.log("error");
});
/*Útil si queremos mostrar algo cuando la petición se haya completado*/
myAjax.always(function() {
console.log("completada. status: " + status);
});
/*
Esta sería la función que hace
de callback en caso de querer usar data
fuera del ámbito de la petición
*/
function myCallBack(data) {
console.log(data);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>