Exibindo uma barra de progresso ao carregar dados com AJAX

Ao executar uma consulta AJAX que recupera dados de um banco de dados, pode levar algum tempo para que os resultados sejam retornados. Para fornecer feedback ao usuário durante o processo de carregamento, uma barra de progresso pode ser exibida.

Criando uma barra de progresso com jQuery

A biblioteca jQuery oferece métodos integrados que facilitam a criação e manipulação de barras de progresso. Para adicionar uma barra de progresso à sua chamada AJAX, você pode anexar um ouvinte de evento ao objeto xhr:

$.ajax({
    xhr: function() {
        var xhr = new window.XMLHttpRequest();

        // Upload progress
        xhr.upload.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                // Update the progress bar here
            }
        }, false);

        // Download progress
        xhr.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                // Update the progress bar here
            }
        }, false);

        return xhr;
    },
    type: 'POST',
    url: "/",
    data: {},
    success: function(data) {
        // Hide the progress bar and display the results
    }
});

Neste código:

• O ouvinte de evento de progresso da propriedade upload rastreia o progresso do envio de dados ao servidor.
• O ouvinte de evento de progresso para o objeto xhr rastreia o progresso do recebimento de dados do servidor.
• Você pode usar a variável percentComplete para determinar a porcentagem de conclusão e atualizar a barra de progresso de acordo.
• Depois que os dados forem bem-sucedidos recuperada e processada, a barra de progresso pode ser ocultada e os resultados podem ser exibidos.

Ao implementar essa abordagem, você pode aprimorar seus retornos de chamada AJAX com uma barra de progresso amigável, fornecendo feedback visual durante os dados operações de carregamento.