Wie kann ich jQuery dazu bringen, eine synchrone und keine asynchrone Ajax-Anforderung auszuführen?

Ich habe ein JavaScript-Widget, das Standarderweiterungspunkte bereitstellt. Eine davon ist die beforecreateFunktion. Es sollte zurückkehren false, um zu verhindern, dass ein Element erstellt wird.

Ich habe dieser Funktion mit jQuery einen Ajax-Aufruf 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);
  });
}

Ich möchte jedoch verhindern, dass mein Widget das Element erstellt, daher sollte ich falsein der Mutterfunktion und nicht im Rückruf zurückkehren. Gibt es eine Möglichkeit, eine synchrone AJAX-Anforderung mit jQuery oder einer anderen In-Browser-API auszuführen?

In der jQuery-Dokumentation : Sie geben die asynchrone Option als false an, um eine synchrone Ajax-Anforderung abzurufen. Dann kann Ihr Rückruf einige Daten einstellen, bevor Ihre Mutterfunktion fortgesetzt wird.

So würde Ihr Code aussehen, wenn er wie vorgeschlagen geändert würde:

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

Sie können das Ajax-Setup von jQuery durch Aufrufen in den synchronen Modus versetzen

jQuery.ajaxSetup({async:false});

Führen Sie dann Ihre Ajax-Anrufe mit aus jQuery.get( ... );

Dann einfach noch einmal einschalten

jQuery.ajaxSetup({async:true});

Ich denke, es funktioniert genauso wie von @Adam vorgeschlagen, aber es könnte für jemanden hilfreich sein, der seine jQuery.get()oder jQuery.post()die ausgefeiltere jQuery.ajax()Syntax neu konfigurieren möchte .

Hervorragende Lösung! Als ich versuchte, es zu implementieren, bemerkte ich, dass ein Wert, der in der Erfolgsklausel zurückgegeben wurde, als undefiniert zurückgegeben wurde. Ich musste es in einer Variablen speichern und diese Variable zurückgeben. Dies ist die Methode, die ich mir ausgedacht habe:

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

Alle diese Antworten verfehlen den Punkt, dass ein Ajax-Aufruf mit async: false dazu führt, dass der Browser hängen bleibt, bis die Ajax-Anforderung abgeschlossen ist. Die Verwendung einer Flusssteuerungsbibliothek löst dieses Problem, ohne den Browser aufzulegen. Hier ist ein Beispiel mit 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();
}

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


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

Hinweis: async: falseAufgrund dieser Warnmeldungen sollten Sie Folgendes nicht verwenden :

Ab Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27) wurden synchrone Anforderungen im Hauptthread aufgrund der negativen Auswirkungen auf die Benutzererfahrung abgelehnt.

Chrome warnt sogar in der Konsole davor:

Die synchrone XMLHttpRequest im Hauptthread ist aufgrund ihrer nachteiligen Auswirkungen auf die Benutzererfahrung veraltet. Weitere Hilfe finden Sie unter https://xhr.spec.whatwg.org/ .

Dies könnte Ihre Seite beschädigen, wenn Sie so etwas tun, da es jeden Tag nicht mehr funktioniert.

Wenn Sie es auf eine Weise tun möchten, die sich immer noch so anfühlt, als wäre es synchron, aber immer noch nicht blockiert, sollten Sie async / await und wahrscheinlich auch Ajax verwenden, das auf Versprechungen wie der neuen Fetch- API basiert

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

Chrome bearbeiten funktioniert beim Deaktivieren der Synchronisierung von XHR beim Schließen von Seiten, wenn die Seite vom Benutzer weg navigiert oder geschlossen wird. Dies beinhaltet vor dem Entladen, Entladen, Pagehide und Sichtbarkeitsänderungen.

Wenn dies Ihr Anwendungsfall ist, sollten Sie sich stattdessen navigator.sendBeacon ansehen

Es ist auch möglich, dass die Seite die Synchronisierungsanforderung entweder mit http-Headern oder mit dem Attribut allow von iframe deaktiviert

Denken Sie daran , dass , wenn Sie eine Cross-Domain Ajax - Aufruf zu tun (unter Verwendung JSONP ) - Sie nicht , kann es synchron tun, das asyncwird Flagge von jQuery ignoriert.

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

Für JSONP-Aufrufe können Sie Folgendes verwenden:

1. Ajax-Aufruf an Ihre eigene Domain - und den domänenübergreifenden Anruf serverseitig
2. Ändern Sie Ihren Code so, dass er asynchron arbeitet
3. Verwenden Sie eine "Funktionssequenzer" -Bibliothek wie Frame.js (diese Antwort )
4. Blockiere die Benutzeroberfläche anstatt die Ausführung zu blockieren (diese Antwort ) (meine Lieblingsmethode)

Mit async: falsedir bekommst du einen blockierten Browser. Für eine nicht blockierende synchrone Lösung können Sie Folgendes verwenden:

ES6 / ECMAScript2015

Mit ES6 können Sie einen Generator und die Co-Bibliothek verwenden :

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

Mit ES7 können Sie einfach asyc await verwenden:

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

Ich habe die Antwort von Carcione verwendet und sie so geändert, dass sie JSON verwendet.

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

Ich habe den Datentyp von 'JSON' hinzugefügt und den .responseText in responseJSON geändert .

Ich habe den Status auch mithilfe der statusText- Eigenschaft des zurückgegebenen Objekts abgerufen . Beachten Sie, dass dies der Status der Ajax-Antwort ist und nicht, ob der JSON gültig ist.

Das Back-End muss die Antwort in korrektem (wohlgeformtem) JSON zurückgeben, andernfalls ist das zurückgegebene Objekt undefiniert.

Bei der Beantwortung der ursprünglichen Frage sind zwei Aspekte zu berücksichtigen. Einer weist Ajax an, synchron zu arbeiten (indem async: false festgelegt wird ), und der andere gibt die Antwort über die return-Anweisung der aufrufenden Funktion zurück und nicht in eine Rückruffunktion.

Ich habe es auch mit POST versucht und es hat funktioniert.

Ich habe das GET in POST geändert und hinzugefügt Daten : 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;
}

Beachten Sie, dass der obige Code funktioniert nur in dem Fall , in dem Asynchron ist falsch . Wenn Sie async: true festlegen würden, wäre das zurückgegebene Objekt jqxhr zum Zeitpunkt der Rückkehr des AJAX-Aufrufs nicht gültig, erst später, wenn der asynchrone Aufruf beendet ist. Dies ist jedoch viel zu spät, um die Antwortvariable festzulegen.

Dies ist ein Beispiel:

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

Erstens sollten wir verstehen, wann wir $ .ajax verwenden und wann wir $ .get / $. Post verwenden

Wenn wir eine niedrige Kontrolle über die Ajax-Anforderung benötigen, wie z. B. Anforderungen für den Anforderungsheader, Caching-Einstellungen, synchrone Einstellungen usw., sollten wir uns für $ .ajax entscheiden.

$ .get / $. post: Wenn wir keine einfache Kontrolle über die Ajax-Anforderung benötigen. Nur einfach die Daten an den Server senden. Es ist eine Abkürzung von

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

Daher können wir keine anderen Funktionen (Synchronisierung, Cache usw.) mit $ .get / $. post verwenden.

Daher sollten wir uns für eine Low-Level-Kontrolle (Synchronisierung, Cache usw.) Über Ajax-Anforderungen für $ .ajax entscheiden

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

Dies ist meine einfache Implementierung für ASYNC-Anforderungen mit jQuery. Ich hoffe das hilft jemandem.

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

Da der XMLHttpReponsesynchrone Betrieb veraltet ist, habe ich die folgende Lösung gefunden, die umschließt XMLHttpRequest. Dies ermöglicht geordnete AJAX-Abfragen, während sie von Natur aus asyknonisch sind, was für CSRF-Token zum einmaligen Gebrauch sehr nützlich ist.

Es ist auch transparent, sodass 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;
};

Da die ursprüngliche Frage zu war jQuery.get, ist es erwähnenswert , hier , dass (wie erwähnt hier ) ein könnte verwenden async: falsein ein , $.get()aber idealerweise vermeiden es , da asynchrone XMLHTTPRequestveraltet ist (und der Browser eine Warnung geben kann):

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

einstellen asyn:false Ajax-Anfrage ein, um sie synchron zu machen.

Hier ist das Codebeispiel:

 $.ajax({
    url: 'some_url',
    type: "GET",
    async: false,
    cache: false,
    dataType: "JSON",
    data: { 
      "p1": v1, 
      "p2": v2
    },
    success: function(result) {
    }  
  }
});

Dies kann dazu führen, dass der Bildschirm nicht mehr reagiert.