javascript - type - retornar respuesta ajax

¿Cómo puedo hacer que jQuery realice una solicitud Ajax síncrona, en lugar de asíncrona?

Question

Tengo un widget de JavaScript que proporciona puntos de extensión estándar. Una de ellas es la función antes de beforecreate . Debe devolver false para evitar que se cree un elemento.

He añadido una llamada Ajax en esta función usando jQuery:

beforecreate: function (node, targetNode, type, to) {
  jQuery.get(''http://example.com/catalog/create/'' + targetNode.id + ''?name='' + encode(to.inp[0].value),

  function (result) {
    if (result.isOk == false) 
        alert(result.message);
  });
}

Pero quiero evitar que mi widget cree el elemento, por lo que debería devolver false en la función madre, no en la devolución de llamada. ¿Hay alguna forma de realizar una solicitud AJAX síncrona utilizando jQuery o cualquier otra API en el navegador?

Answer 1

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

ES6 / ECMAScript2015

Con ES6 puedes usar un generador y la biblioteca co :

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 puedes 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
    })(); 
}

Answer 2

Debido a que la operación síncrona de XMLHttpReponse está en desuso, se me ocurrió la siguiente solución que contiene XMLHttpRequest . Esto permite realizar consultas AJAX ordenadas mientras que todavía tiene una naturaleza similar, lo cual es muy útil para los tokens CSRF de un solo uso.

También es transparente, por lo que 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;
};

Answer 3

En la documentación de jQuery : especifica que la opción asincrónica es falsa para obtener una solicitud Ajax síncrona. Luego, su devolución de llamada puede establecer algunos datos antes de que su función madre continúe.

Aquí es cómo se vería su código si se cambia 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
    });
}

Answer 4

Este es un ejemplo:

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

Answer 5

Excelente solucion! Noté que cuando intenté implementarlo, 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;
}

Answer 6

Nota: No debes usar async debido a esto:

A partir de Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27), las solicitudes síncronas en el hilo principal han quedado en desuso debido a los efectos negativos para la experiencia del usuario.

Chrome incluso advierte sobre esto en la consola:

El XMLHttpRequest síncrono 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 aún se sienta como si estuviera sincronizado pero no bloqueado, debería usar async / await y probablemente también un ajax basado en promesas como la nueva API Fetch

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

Answer 7

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 solo enciéndelo de nuevo una vez

jQuery.ajaxSetup({async:true});

Supongo que funciona de la misma manera sugerida por @Adam, pero podría ser útil para alguien que quiere reconfigurar su jQuery.get() o jQuery.post() para la sintaxis más elaborada de jQuery.ajax() .

Answer 8

Tenga en cuenta que si está realizando una llamada Ajax entre dominios (utilizando JSONP ): no puede hacerlo de forma síncrona, jQuery ignorará el indicador async .

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

Para llamadas JSONP usted podría usar:

1. Ajax-call a su propio dominio, y realice la llamada de dominio cruzado del lado del servidor
2. Cambia tu código para que funcione de forma asíncrona.
3. Use una biblioteca de "secuenciador de funciones" como Frame.js (esta answer )
4. Bloquea la interfaz de usuario en lugar de bloquear la ejecución (esta answer ) (mi forma favorita)

Answer 9

Todas estas respuestas pasan por alto el hecho de que hacer una llamada Ajax con async: false hará que el navegador se bloquee hasta que se complete la solicitud de Ajax. El uso de una biblioteca de control de flujo resolverá este problema sin colgar el navegador. Aquí hay un ejemplo con Frame.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();
}

Answer 10

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 dataType de ''JSON'' y cambié el .responseText a responseJSON .

También recuperé el estado usando la propiedad statusText 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 debe devolver la respuesta en un JSON correcto (bien formado), de lo contrario el objeto devuelto no estará definido.

Hay dos aspectos a considerar cuando se responde a la pregunta original. Uno le dice a Ajax que realice sincrónicamente (configurando async: false ) y el otro está devolviendo la respuesta a través de la declaración de retorno de la función de llamada, en lugar de a 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 caso de que async sea falso . Si tuviera que configurar async: true, el objeto devuelto jqxhr no sería válido en el momento en que se devuelve la llamada AJAX, solo más tarde cuando la llamada asincrónica haya finalizado, pero eso es demasiado tarde para establecer la variable de respuesta .

Answer 11

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();

Answer 12

Primero debemos entender cuándo usamos $ .ajax y cuándo usamos $ .get / $. Post

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

$ .get / $. post: Cuando no requerimos un control de bajo nivel sobre la solicitud de ajax. Simplemente, obtenga / publique los datos en el servidor. Es taquigrafía 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 nivel bajo (sincronización, caché, etc.) sobre la solicitud de ajax, deberíamos ir por $ .ajax

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

Answer 13

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


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