jQuery: exécution de requêtes AJAX synchrones

187

J'ai fait quelques jQuery dans le passé, mais je suis complètement coincé là-dessus. Je connais les avantages et les inconvénients de l'utilisation d'appels ajax synchrones, mais ici, ce sera nécessaire.

La page distante est chargée (contrôlée avec firebug), mais aucun retour n'est affiché.

Que dois-je faire de différent pour que ma fonction revienne correctement?

function getRemote() {

    var remote;

    $.ajax({
        type: "GET",
        url: remote_url,
        async: false,
        success : function(data) {
            remote = data;
        }
    });

    return remote;

}
ajax jquery synchronous Industriel
la source
Votre code a l'air bien. qu'est-ce que ça revient? Y a-t-il des erreurs js?
ShankarSangoli
11
Je trouve cela plutôt ironique - Vous vous demandez comment effectuer l'opération "JavaScript asynchrone et XML", de manière synchrone. Ce dont vous avez vraiment besoin, c'est un "SJAX".
VitalyB
3
Remarque: la spécification a commencé à désapprouver les requêtes AJAX synchrones.
Léo Lam
2
semble que la déclaration "[synchrone] sera nécessaire" indique un manque de compréhension des moteurs JavaScript, donc une application mal architecturée. Je voudrais comprendre s'il y a des cas où la synchronisation est vraiment nécessaire.
pmont
15
@pmont seems that the statement "[synchronous] will be required" indicates a lack of understanding of JavaScript engines, thus a poorly architected app.Ou une très bonne compréhension: si vous voulez faire un appel AJAX onbeforeunload, utiliser une requête synchrone est en fait la méthode recommandée (car la fenêtre du navigateur aurait disparu avant que la requête ne soit renvoyée). D'une manière ou d'une autre, il dit clairement: «Je connais les avantages et les inconvénients de l'utilisation d'appels ajax synchrones» ... Peut-être le croyez-vous?
Stijn de Witt

Réponses:

298

Lorsque vous faites une demande synchrone, cela devrait être

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

Exemple - http://api.jquery.com/jQuery.ajax/#example-3

REMARQUE: la définition de la propriété async sur false est obsolète et est en cours de suppression ( lien ). De nombreux navigateurs, y compris Firefox et Chrome, ont déjà commencé à imprimer un avertissement dans la console si vous utilisez ceci:

Chrome:

XMLHttpRequest synchrone sur le thread principal est obsolète en raison de ses effets néfastes sur l'expérience de l'utilisateur final. Pour plus d'aide, consultez https://xhr.spec.whatwg.org/ .

Firefox:

XMLHttpRequest synchrone sur le thread principal est obsolète en raison de ses effets néfastes sur l'expérience de l'utilisateur final. Pour plus d'aide http://xhr.spec.whatwg.org/

Dogbert
la source
16
Notez que responseTextrenvoie toujours une chaîne. Si vous attendez JSON, encapsulez $.ajaxavec JSON.parse.
usandfriends le
6
Remarque: xhr.spec.whatwg.org/#the-open()-method Les requêtes synchrones sont obsolètes ...
teynon
5
@Tom Et les balises <i>et aussi <b>. Ma recommandation: continuez à utiliser ces fonctionnalités pour qu'elles ne disparaissent pas.
Stijn de Witt
1
comme cela verrouille le navigateur, il est logique d'ajouter un délai d'expiration: 5000 ou plus aux options.
Commonpike
1
@usandfriends Pour analyser la chaîne en objet, il est plus sûr d'utiliser jQuery.parseJSON au lieu de JSON.parse stackoverflow.com/questions/10362277
...
33

Vous n'utilisez pas correctement la fonction ajax. Comme il est synchrone, il retournera les données en ligne comme ceci:

var remote = $.ajax({
    type: "GET",
    url: remote_url,
    async: false
}).responseText;
Jake
la source
17

quelle est la distance de cette URL? est-ce du même domaine? le code semble correct

essaye ça

$.ajaxSetup({async:false});
$.get(remote_url, function(data) { remote = data; });
// or
remote = $.get(remote_url).responseText;
Le cerveau
la source
Oui! Même domaine et tout. remote_urlest défini correctement et l'appel AJAX est correctement exécuté comme mentionné (contrôlé avec firebug). Pas de retour!
Industriel
3 
function getRemote() {
    return $.ajax({
        type: "GET",
        url: remote_url,
        async: false,
        success: function (result) {
            /* if result is a JSon object */
            if (result.valid)
                return true;
            else
                return false;
        }
    });
}
user3116547
la source
7
Veuillez expliquer pourquoi cela aidera le PO.
krillgar
Il est recommandé de renvoyer un objet json du côté serveur. Cela vous donne plus de contrôle. Mais, vous devez ajouter dataType: "json" à vos paramètres $ .ajax ci-dessus.
jjwdesign
Qu'est-ce que cela signifie: "Cela vous donne plus de contrôle"?
grantwparks
3
Non lié mais vous pouvez: renvoyer result.valid; // C'est déjà un booléen
dpineda