jquery il modo giusto per inviare richieste Ajax in blocco

Question

ho un elenco di righe che l'utente seleziona e voglio eliminarle, una per una e mostrare il risultato alla fine.

ovviamente se faccio semplicemente un semplice loop e chiamo ogni volta la funzione ajax, ma come posso fare un loop e controllare quale ha avuto successo e quale ha fallito e quando hanno finito?

come lo faresti? qual è il modo corretto di eseguire la modifica / eliminazione in blocco?

Answer 1

Ogni richiesta ajax avrà un overhead associato ad essa. Sarebbe una cattiva idea effettuare una chiamata per ogni riga perché potrebbe sovraccaricare il server di richieste e potresti Fai da te se ricevi abbastanza traffico. Inoltre, tutti i browser hanno un limite al numero di richieste HTTP che possono essere fatte contemporaneamente, quindi (a seconda del browser), le cancellazioni avverranno a raffica, non tutte in una volta, anche se dici loro di eseguire una dopo l'altra.

L'opzione migliore sarebbe quella di raggruppare le righe da modificare / eliminare in un array JSON e inviarle al server in una singola richiesta. Sul server è quindi possibile analizzare JSON ed eliminare gli elementi di conseguenza. Al termine, restituisci un array JSON contenente i risultati.

Questo codice pseudo-codice jQuery presuppone che si stia prendendo di mira i browser con un oggetto JSON oppure stai utilizzando json2.js . Fondamentalmente, questo codice cerca solo " l'ID nascosto " campo in ogni riga della tabella che visualizzi all'utente e lo aggiunge a un array. Puoi modificarlo quando ritieni che sia necessario.

var recordsToDelete = [];
$("tr.myRow").each(function() {
    var id = $(this).find("input:hidden").val();
    recordsToDelete.push(id);
});
var json = JSON.stringify(recordsToDelete);

Gestire i risultati può essere più difficile. È necessario progettare il sistema in modo tale che (in caso di successo), ogni riga venga eliminata. A meno che tu non abbia a che fare con un sistema molto complesso, non dovresti mai avere una situazione in cui alcune righe passano e alcune righe falliscono. In tal caso, è necessario riconsiderare l'architettura del sistema. jQuery ha eventi per successo e fallimento che puoi utilizzare per gestire l'esito positivo o negativo della richiesta, che ti consiglio di utilizzare.

Continuando dal codice sopra, questo è un modo per gestire l'eliminazione dei record. Uso l'evento complete qui per semplicità, ma se possibile dovresti usare gli eventi successo e fallimento . L'evento complete si verifica sempre, indipendentemente dal fatto che una richiesta abbia esito positivo o negativo.

$.ajax({
    url: "http://stackoverflow.com/questions/1653127",        
    type: "POST", // Always use POST when deleting data
    data: { ids: json },
    complete: function(xhr, status) {
        var response = JSON.parse(xhr.responseXML);
        // Response will be an array of key/value
        // pairs indicating which rows succeeded or failed
        for (var i = 0; i < response.length; i++) {
            var recordID = response[i].recordID;
            var status = response[i].status;
            // Do stuff with the status codes here
        }
    }
});

In risposta ai commenti:

• Per app come Gmail, il modo in cui funziona è così enormemente complicato che dire "lo farò in questo modo perché Google lo fa in questo modo" non è una buona idea. Non tutto ciò che funziona per Google funzionerà per ogni azienda o sito web. Aziende come Google hanno problemi di cui non quasi nessun altro sito web deve preoccuparsi. Tuttavia per rispondere alla tua domanda
  • Ho appena verificato questo per essere sicuro: GMail utilizza una richiesta AJAX con una matrice di ID. Nessun codice di stato individuale viene restituito. Sembra (e sto speculando qui) Gmail restituisce un "ID azione". per l'azione appena eseguita, in modo da poter annullare l'azione facendo clic su un collegamento Annulla che appare brevemente dopo aver eliminato un'e-mail.
  • Quando si lavora su un'app, in genere si desidera renderla abbastanza affidabile da non interrompere le operazioni. Dovresti eseguire un rigoroso controllo di qualità per assicurarti di questo. Fondamentalmente, un'operazione di eliminazione dovrebbe passare o fallire nel suo insieme. Uno scenario in cui ciò potrebbe accadere è se l'utente fa clic su Elimina quando il server si arresta. Per l'utente, il sito è ancora attivo perché non stai ricaricando la pagina, ma la richiesta AJAX fallirà perché non ha dove andare. Ti consigliamo di gestire cose del genere.
  • Dipende molto dalle regole di business della tua app. Se l'applicazione viene utilizzata in una situazione in cui più persone possono modificare i record contemporaneamente (solo un esempio), qualcosa che un utente tenta di eliminare potrebbe essere stato eliminato da qualcun altro poco prima di fare clic su "elimina". pulsante. Nella maggior parte dei casi, non riesco a vedere le persone che si preoccupano che hanno eliminato il record prima se