Come posso usufruire di funzioni di callback per XMLHttpRequest asincrono?

Sto attualmente scrivendo JavaScript e confuso circa richiamata. Ho trovato non è il tipo di funzioni built-in, anche se…
Ora sto leggendo O’Relly JavaScript 5th Edition e mostra un codice di esempio qualcosa come di seguito:

getText = function(url, callback) //How can I use this callback?
{
    var request = new XMLHttpRequest();
    request.onreadystatechange = function()
    {
        if (request.readyState == 4 && request.status == 200)
        {
            callback(request.responseText); //Another callback here
        }
    }
    request.open('GET', url);
    request.send();
}

Fondamentalmente, credo di non capire l’idea generale di callback anche se… qualcuno Potrebbe scrivere un codice di esempio per sfruttare callback sopra?

InformationsquelleAutor Japboy | 2011-03-30

 

4 Replies
  1. 46

    Richiamate sono abbastanza semplice e sfizioso! A causa della natura delle chiamate AJAX, si non esecuzione di un blocco di script, fino a quando la vostra richiesta è finita, sarebbe sincrono quindi). Un callback è semplicemente un metodo designato per gestire la risposta una volta che si arriva di nuovo al vostro metodo.

    Dal momento che i metodi javascript sono oggetti di prima classe, è possibile passare intorno a loro come variabili.

    Quindi nel tuo esempio

    getText = function(url, callback) //How can I use this callback?
    {
        var request = new XMLHttpRequest();
        request.onreadystatechange = function()
        {
            if (request.readyState == 4 && request.status == 200)
            {
                callback(request.responseText); //Another callback here
            }
        }; 
        request.open('GET', url);
        request.send();
    }
    
    function mycallback(data) {
       alert(data);
    }
    
    getText('somephpfile.php', mycallback); //passing mycallback as a method

    Se si fa di cui sopra, significa che si passa mycallback come un metodo che gestisce la tua risposta (callback).

    MODIFICA

    Mentre nell’esempio qui non mostrare il corretto beneficio di un callback (si potrebbe semplicemente mettere l’avviso in onReadyStateChange funzione, dopo tutto!), re usabilità è sicuramente un fattore.

    Devi tenere a mente che la cosa importante qui è che JS metodi sono oggetti di prima classe. Questo significa che è possibile passare intorno a loro come oggetti e di collegarli a tutti i tipi di eventi. Quando gli eventi di trigger, i metodi associati a tali eventi sono chiamati.

    Quando si esegue request.onreadystatechange = function(){} sei solo l’assegnazione metodo chiamato quando l’evento appropriato incendi.

    Così la cosa interessante qui è che questi metodi possono essere riutilizzati. Dire che si dispone di un errore di metodo di gestione che si apre un avviso e popola alcuni campi nella pagina HTML in caso di 404 della richiesta AJAX.

    Se non si poteva assegnare i callback o passare metodi come parametri, dovresti scrivere il codice di gestione degli errori più e più volte, ma invece tutto quello che dovete fare è assegnare come un callback e tutti i tuoi errore di gestione saranno ordinati in una sola volta.


    • Questo è semplice e chiaro. In questo caso, la riduzione rientranze e mantenere la leggibilità del codice sono lo scopo dell’utilizzo di callback funzione, credo. Questo è giusto? Grazie comunque.
    • nulla a che fare con il rientro in realtà. La riutilizzabilità di certo, dato che è possibile passare comuni le funzioni di variabili che possono avere agito su. Ho ampliato la mia risposta un po’
    • Aw sì, hai ragione. Riusabilità deve essere accurata della parola. Grazie 🙂
  2. 17

    Prima di tutto vorrei suggerire la lettura su ciò che un callback. Qui è un inizio.

    Grande immagine

    Richiamate sono ampiamente utilizzati nella programmazione asincrona. Quando non si desidera bloccare fino a un (forse) a lungo in esecuzione completata l’operazione, una delle modalità di approccio al problema è quello di delegare l’operazione a qualcuno che lo farà in laterale per voi. Ciò solleva la questione: come si sarà in grado di dire quando l’operazione è completa, e come puoi ottenere i suoi risultati?

    Una soluzione potrebbe essere quella di delegare il lavoro a qualcun’altro e prendere un momento fuori il vostro lavoro normale e poi ogni ora per chiedere “è il lavoro che ti ho dato ancora fatto?”. Se è così, ottenere dei risultati, in qualche modo, e via andare. Problema risolto.

    Il problema con questo approccio è che non renderà la vostra vita molto più facile. Ora siete costretti a chiedere ogni po ‘ di tempo e non si sa che l’operazione è fatta come presto come è nella realtà (ma solo la prossima volta che si ricorda di chiedere). Se si dimentica di chiedere, si mai essere notificato.

    Che la soluzione migliore per questo è di richiamata: in caso di delega di attività, fornire una funzione di insieme. Il codice che effettivamente fare il lavoro poi promette di chiamare tale funzione non appena il lavoro è completato. Ora è possibile dimenticare tutta quella roba e di essere sicuri che quando il lavoro è fatto, il callback viene chiamato. Non prima e non più tardi.

    Ciò che è richiamata qui?

    In questo caso specifico, callback è una funzione che fornisce a getText come un modo per poter permettere di comunicare con voi. Si in effetti dicendo “fate questo lavoro per me, e quando hai finito, ecco una funzione da chiamare per farmi sapere”.

    getText , infatti, sceglie di utilizzare questa richiamata solo quando il XMLHttpRequest (XHR) è completato, e al tempo stesso “consente di sapere” si passa il contenuto della risposta HTTP e (in modo da poter agire su queste informazioni.

    Richiamate e più richiamate, oh mio!

    Ma prendere un momento per leggere il codice. Qual è il valore di negozi di request.onreadystatechange? Qual è la scopo di request.onreadystatechange?

    La risposta è che request.onreadystatechange è lì per voi a compilare con un richiamata. In effetti, XHR ti dà un modo per fornire una funzione di callback, e promette di “richiamare” ogni volta che lo stato del sottostante di richiesta HTTP modifiche.

    getText è una funzione che crea un’astrazione in cima a quello: Si inserisce proprio callback (una funzione anonima — io ‘ll vedere che come “interiore”) e accetta un altro richiamata da voi (il parametro — io ‘ll vedere come “esterno”). Quando all’interno di callback (che, ricordiamo: viene chiamato ogni volta che i cambiamenti di stato) rileva che lo stato è “completato” (il significato del valore 4) e la risposta HTTP status code 200 (che significa “OK”), chiama l’esterno di callback per consentire all’utente di getText, sapere del risultato.

    Spero che I ‘m a dare un senso. 🙂

    • Grazie per la tua spiegazione!!! Questo è in realtà molto facile da leggere e capire quello che callback, anche se il mio inglese skill è bassa 😛 onreadystatechange è anche callback e, in effetti, programmazione guidata dagli eventi esigenze profonda nidificati di procedere quando I carichi di molti asincrona procedimento. In questo caso, utilizzando callback funzione riduce i rientri… ho capito bene?
    • s/riduce rientranze/mantiene la riusabilità/
    • Non si tratta di riusabilità, anche se si dispone di riusabilità se si utilizza la stessa richiamata più volte. Significa raggiungere la programmazione asincrona. Vedi qui (si tratta di I/O asincrone, ma la maggior parte di esso è applicabile a qualsiasi “lavoro”, non solo con I/O): en.wikipedia.org/wiki/Asynchronous_I/O
    • Beh, non è che puoi solo chiamare il metodo di callback esplicitamente onreadystatechange e comunque essere asincrona?
    • contro che cosa? Mi dispiace, ma io non capisco la domanda.
    • Guardando JohnP l’esempio di cui sopra, quale sarebbe la differenza tra mycallback(richiesta.responseText); VS callback(richiesta.responseText). Il primo scenario non metodo di callback è stato passato. È l’unica differenza scenario 2 è più dinamico?
    • Sì, #2 è configurabile — o, al contrario, #1 è inutile, tranne che per un compito molto specifico. Per esempio, jQuery.get è utile solo perché è configurabile.
    • Solo l’apprendimento di callback me. Un commento su “mycallback(richiesta.responseText); VS callback(richiesta.responseText)” per quanto riguarda l’OP l’esempio in questione: Se si specifica che la richiamata all’interno della funzione, si toglie la tua capacità di passare in vari callback/funzionalità. Nell’esempio, un url è passato come bene. Probabilmente si desidera una diversa funzione di callback a seconda che il valore di tale url. Se il callback è stata statico in natura, poi si sarebbe movimentazione risposte da tutti gli url allo stesso modo. Solo i miei 2 cents.

  3. 1

    Me, personalmente, preferisco usare I Listener di Eventi sopra richiamate.

    Utilizzo di Ascoltatori, è particolarmente utile soprattutto quando Si è disposti a processo più richieste asincrone in una sola volta.

    L’Uso è il seguente (preso da https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest)

    function reqListener () {
      console.log(this.responseText);
    }
    
    var oReq = new XMLHttpRequest();
    oReq.addEventListener("load", reqListener);
    oReq.open("GET", "http://www.example.org/example.txt");
    oReq.send()
  4. 0

    Ciò che funziona in una vera e propria “richiamata” la moda è quello di definire un servizio che restituisce una promessa come questo!

    $http.head("url2check").then(function () {
                    return true;
                }, function () {
                    return false;
                });

    Nel controller di utilizzare il servizio:

    <service>.<service method>.then(function (found)) {
         if (found) {......
    }

    @jon è corretto chiamarlo Asincrono!

Lascia un commento