¿Cómo puedo hacer que jQuery realice una solicitud Ajax sincrónica, en lugar de asincrónica?

Desde el documentación de jQuery: especificas el asincrónico opción de ser false para obtener una solicitud Ajax sincrónica. Luego, su devolución de llamada puede establecer algunos datos antes de que proceda su función madre.

Así es como se vería su código si se cambiara como se sugiere:

beforecreate: function (node, targetNode, type, to) {
    jQuery.ajax({
        url: 'http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value),
        success: function (result) {
            if (result.isOk == false) alert(result.message);
        },
        async: false
    });
}

Puede poner la configuración Ajax de jQuery en modo síncrono llamando

jQuery.ajaxSetup({async:false});

Y luego realice sus llamadas Ajax usando jQuery.get( ... );

Luego, enciéndelo de nuevo una vez

jQuery.ajaxSetup({async:true});

Supongo que funciona igual que lo sugerido por @Adam, pero podría ser útil para alguien que quiera reconfigurar su jQuery.get() or jQuery.post() a los mas elaborados jQuery.ajax() sintaxis.

Excelente solucion! Cuando intenté implementarlo, noté que si devolvía un valor en la cláusula de éxito, volvía como indefinido. Tuve que almacenarlo en una variable y devolver esa variable. Este es el método que se me ocurrió:

function getWhatever() {
  // strUrl is whatever URL you need to call
  var strUrl = "", strReturn = "";

  jQuery.ajax({
    url: strUrl,
    success: function(html) {
      strReturn = html;
    },
    async:false
  });

  return strReturn;
}

Todas estas respuestas pierden el punto de que hacer una llamada Ajax con async: false hará que el navegador se cuelgue hasta que se complete la solicitud Ajax. El uso de una biblioteca de control de flujo resolverá este problema sin colgar el navegador. Aquí hay un ejemplo con Marco.js:

beforecreate: function(node,targetNode,type,to) {

    Frame(function(next)){

        jQuery.get('http://example.com/catalog/create/', next);
    });

    Frame(function(next, response)){

        alert(response);
        next();
    });

    Frame.init();
}

function getURL(url){
    return $.ajax({
        type: "GET",
        url: url,
        cache: false,
        async: false
    }).responseText;
}


//example use
var msg=getURL("message.php");
alert(msg);

Nota: no deberías usar async: false debido a estos mensajes de advertencia:

A partir de Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27), las solicitudes sincrónicas en el hilo principal han quedado obsoletas debido a los efectos negativos en la experiencia del usuario.

Chrome incluso advierte sobre esto en la consola:

XMLHttpRequest sincrónico en el hilo principal está en desuso debido a sus efectos perjudiciales para la experiencia del usuario final. Para obtener más ayuda, consulte https://xhr.spec.whatwg.org/.

Esto podría romper su página si está haciendo algo como esto, ya que podría dejar de funcionar cualquier día.

Si desea hacerlo de una manera que todavía se siente como si fuera sincrónico pero aún no se bloquea, entonces debería usar async / await y probablemente también algún ajax que se base en promesas como la nueva Ha podido recuperar API

async function foo() {
  var res = await fetch(url)
  console.log(res.ok)
  var json = await res.json()
  console.log(json)
}

Editar Chrome está trabajando en No permitir la sincronización de XHR en el rechazo de la página cuando el usuario está navegando o cerrando la página. Esto implica antes de descargar, descargar, ocultar páginas y cambiar de visibilidad.

si este es su caso de uso, es posible que desee echar un vistazo a navigator.sendBeacon

También es posible que la página deshabilite la solicitud de sincronización con los encabezados http o el atributo allow de iframe.

Tenga en cuenta que si está haciendo una llamada Ajax entre dominios (utilizando JSONP) - usted no puedes hacerlo sincrónicamente, el async jQuery ignorará la bandera.

$.ajax({
    url: "testserver.php",
    dataType: 'jsonp', // jsonp
    async: false //IGNORED!!
});

Para llamadas JSONP, puede usar:

1. Llame Ajax a su propio dominio y haga la llamada entre dominios del lado del servidor
2. Cambie su código para que funcione de forma asincrónica
3. Utilice una biblioteca de "secuenciador de funciones" como Frame.js (este https://www.youtube.com/watch?v=xB-eutXNUMXJtA&feature=youtu.be)
4. Bloquear la interfaz de usuario en lugar de bloquear la ejecución (esto https://www.youtube.com/watch?v=xB-eutXNUMXJtA&feature=youtu.be) (mi forma favorita)

Usé la respuesta dada por Carcione y la modifiqué para usar JSON.

 function getUrlJsonSync(url){

    var jqxhr = $.ajax({
        type: "GET",
        url: url,
        dataType: 'json',
        cache: false,
        async: false
    });

    // 'async' has to be 'false' for this to work
    var response = {valid: jqxhr.statusText,  data: jqxhr.responseJSON};

    return response;
}    

function testGetUrlJsonSync()
{
    var reply = getUrlJsonSync("myurl");

    if (reply.valid == 'OK')
    {
        console.dir(reply.data);
    }
    else
    {
        alert('not valid');
    }    
}

Agregué el tipo de datos of 'JSON' y cambió el .responseText a respuestaJSON.

También recuperé el estado usando el estadoTexto propiedad del objeto devuelto. Tenga en cuenta que este es el estado de la respuesta Ajax, no si el JSON es válido.

El back-end tiene que devolver la respuesta en JSON correcto (bien formado), de lo contrario, el objeto devuelto no estará definido.

Hay dos aspectos a considerar al responder a la pregunta original. Uno le está diciendo a Ajax que actúe sincrónicamente (estableciendo async: falso) y el otro devuelve la respuesta a través de la declaración de retorno de la función de llamada, en lugar de una función de devolución de llamada.

También lo probé con POST y funcionó.

Cambié GET a POST y agregué datos: postdata

function postUrlJsonSync(url, postdata){

    var jqxhr = $.ajax({
        type: "POST",
        url: url,
        data: postdata,
        dataType: 'json',
        cache: false,
        async: false
    });

    // 'async' has to be 'false' for this to work
    var response = {valid: jqxhr.statusText,  data: jqxhr.responseJSON};

    return response;
}

Tenga en cuenta que el código anterior solo funciona en el caso en que Asincrónico is false. Si tuvieras que establecer async: verdadero el objeto devuelto jqxhr no sería válido en el momento en que regresa la llamada AJAX, solo más tarde cuando la llamada asincrónica haya finalizado, pero es demasiado tarde para establecer el respuesta variable.

Con async: false obtienes un navegador bloqueado. Para una solución sincrónica sin bloqueo, puede utilizar lo siguiente:

ES6 / ECMAScript2015

Con ES6 puede utilizar un generador y el co biblioteca:

beforecreate: function (node, targetNode, type, to) {
    co(function*(){  
        let result = yield jQuery.get('http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value));
        //Just use the result here
    });
}

ES7

Con ES7 puede usar asyc await:

beforecreate: function (node, targetNode, type, to) {
    (async function(){
        let result = await jQuery.get('http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value));
        //Just use the result here
    })(); 
}

Este es un ejemplo:

$.ajax({
  url: "test.html",
  async: false
}).done(function(data) {
   // Todo something..
}).fail(function(xhr)  {
   // Todo something..
});

En primer lugar, debemos entender cuándo usamos $ .ajax y cuándo usamos $ .get / $. Post

Cuando requerimos un control de bajo nivel sobre la solicitud ajax, como la configuración del encabezado de la solicitud, la configuración del almacenamiento en caché, la configuración síncrona, etc., entonces deberíamos optar por $ .ajax.

$ .get / $. post: Cuando no requerimos un control de bajo nivel sobre la solicitud ajax. Solo es simple obtener / publicar los datos en el servidor.Es una abreviatura de

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

y por lo tanto no podemos usar otras funciones (sincronización, caché, etc.) con $ .get / $. post.

Por lo tanto, para el control de bajo nivel (sincronización, caché, etc.) sobre la solicitud ajax, deberíamos optar por $ .ajax

 $.ajax({
     type: 'GET',
      url: url,
      data: data,
      success: success,
      dataType: dataType,
      async:false
    });

esta es mi implementación simple para solicitudes ASYNC con jQuery. Espero que esto ayude a cualquiera.

var queueUrlsForRemove = [
    'http://dev-myurl.com/image/1', 
    'http://dev-myurl.com/image/2',
    'http://dev-myurl.com/image/3',
];

var queueImagesDelete = function(){

    deleteImage( queueUrlsForRemove.splice(0,1), function(){
        if (queueUrlsForRemove.length > 0) {
            queueImagesDelete();
        }
    });

}

var deleteImage = function(url, callback) {
    $.ajax({
        url: url,
        method: 'DELETE'
    }).done(function(response){
        typeof(callback) == 'function' ? callback(response) : null;
    });
}

queueImagesDelete();

Gracias XMLHttpReponse La operación síncrona está en desuso. Se me ocurrió la siguiente solución que envuelve XMLHttpRequest. Esto permite consultas AJAX ordenadas sin dejar de ser de naturaleza asíncrona, lo cual es muy útil para tokens CSRF de un solo uso.

También es transparente, por lo que las bibliotecas como jQuery funcionarán sin problemas.

/* wrap XMLHttpRequest for synchronous operation */
var XHRQueue = [];
var _XMLHttpRequest = XMLHttpRequest;
XMLHttpRequest = function()
{
  var xhr   = new _XMLHttpRequest();
  var _send = xhr.send;

  xhr.send = function()
  {
    /* queue the request, and if it's the first, process it */
    XHRQueue.push([this, arguments]);
    if (XHRQueue.length == 1)
      this.processQueue();
  };

  xhr.processQueue = function()
  {
    var call = XHRQueue[0];
    var xhr  = call[0];
    var args = call[1];

    /* you could also set a CSRF token header here */

    /* send the request */
    _send.apply(xhr, args);
  };

  xhr.addEventListener('load', function(e)
  {
    /* you could also retrieve a CSRF token header here */

    /* remove the completed request and if there is more, trigger the next */
    XHRQueue.shift();
    if (XHRQueue.length)
      this.processQueue();
  });

  return xhr;
};

Dado que la pregunta original era sobre jQuery.get, vale la pena mencionar aquí que (como se mencionó aquí) uno podría utilizan el async: false en un parche de $.get() pero idealmente evitar es asincrónico XMLHTTPRequest está en desuso (y el navegador puede dar una advertencia):

$.get({
  url: url,// mandatory
  data: data,
  success: success,
  dataType: dataType,
  async:false // to make it synchronous
});