Wie kann ich jQuery dazu bringen, eine synchrone und nicht eine asynchrone Ajax-Anfrage durchzuführen?

Question

Ich habe ein JavaScript-Widget, das Standard-Erweiterungspunkte bietet. Einer von ihnen ist die beforecreate Funktion. Sie sollte zurückgeben false um zu verhindern, dass ein Artikel erstellt wird.

Ich habe einen Ajax-Aufruf in dieser Funktion mit jQuery hinzugefügt:

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

Aber ich möchte verhindern, dass mein Widget das Element erstellt, also sollte ich zurückgeben false in der Mutterfunktion, nicht im Rückruf. Gibt es eine Möglichkeit, eine synchrone AJAX-Anfrage mit jQuery oder eine andere in-Browser-API durchzuführen?

Answer 1

Zunächst einmal sollten wir verstehen, wann wir $.ajax und wann wir $.get/$.post verwenden

Wenn wir benötigen Low-Level-Kontrolle über die Ajax-Anfrage wie Request-Header-Einstellungen, Caching-Einstellungen, synchrone Einstellungen etc. dann sollten wir für $.ajax gehen.

$.get/$.post: Wenn wir keine Kontrolle auf niedriger Ebene über die Ajax-Anfrage benötigen, sondern nur die Daten auf dem Server abrufen/veröffentlichen möchten. Es ist die Kurzform von

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

und daher können wir andere Funktionen (Sync, Cache usw.) nicht mit $.get/$.post verwenden.

Daher für Low-Level-Kontrolle (Sync, Cache, etc.) über Ajax-Anfrage, sollten wir für $.ajax gehen

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

Answer 2

Dies ist meine einfache Implementierung für ASYNC-Anfragen mit jQuery. Ich hoffe, das hilft jedem.

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 3

Denn XMLHttpReponse synchrone Operation veraltet ist, habe ich die folgende Lösung gefunden, die die XMLHttpRequest . Dies ermöglicht geordnete AJAX-Abfragen bei gleichzeitiger Asychronität, was für CSRF-Tokens zur einmaligen Verwendung sehr nützlich ist.

Es ist auch transparent, so dass Bibliotheken wie jQuery nahtlos funktionieren.

/* 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 4

Da sich die ursprüngliche Frage auf jQuery.get ist an dieser Stelle zu erwähnen, dass (wie bereits erwähnt aquí ) ein かもしれない utiliser async: false in einem $.get() sondern idealerweise vermeiden da asynchron XMLHTTPRequest ist veraltet (und der Browser kann eine Warnung ausgeben):

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