Wie implementiert man einen Fortschrittsbalken für das Laden von AJAX-Daten?

Integration eines Fortschrittsbalkens für das Laden von AJAX-Daten

Wenn Benutzer mit einer Webanwendung interagieren, ist es wichtig, visuelle Hinweise bereitzustellen, um laufende Prozesse anzuzeigen. insbesondere bei zeitaufwändigen Einsätzen. In diesem Artikel wird ein Ansatz zum Anzeigen eines Fortschrittsbalkens beim Laden von Daten über AJAX vorgeschlagen.

Stellen Sie sich das folgende Szenario vor: Ein Dropdown-Feld fordert den Benutzer auf, einen Wert auszuwählen. Nach der Auswahl ruft eine AJAX-Anfrage Daten aus einer Datenbank ab und zeigt sie an. Allerdings kann die Antwort einige Zeit in Anspruch nehmen. Um das Benutzererlebnis zu verbessern, möchten Sie einen visuellen Fortschrittsindikator integrieren.

Der bereitgestellte AJAX-Code umfasst:

<code class="html">$.ajax({
    type:"post",
    url:"clientnetworkpricelist/yourfile.php",
    data:"title="+clientid,
    success:function(data){
     $("#result").html(data);
    }
});</code>

Um einen Fortschrittsbalken hinzuzufügen, verwenden Sie den Fortschrittsereignis-Listener von XMLHttpRequest Objekt. So können Sie es mit jQuery implementieren:

<code class="html">$.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; 
                //Handle upload progress here
            } 
        }, false); 
       
       // Download progress
       xhr.addEventListener("progress", function(evt){ 
           if (evt.lengthComputable) {
               var percentComplete = evt.loaded / evt.total; 
               //Handle download progress here
           }
       }, false); 
       
       return xhr;
    },
    type: 'POST',
    url: &quot;/&quot;,
    data: {},
    success: function(data){ 
        // Handle successful response
    }
});</code>

Dieser Code hängt Fortschrittsereignis-Listener an das xhr-Objekt an, sodass Sie sowohl den Upload- als auch den Download-Fortschritt verfolgen können. Die Variable „%Complete“ berechnet den Fortschrittsprozentsatz und ermöglicht es Ihnen, ihn dem Benutzer mithilfe einer entsprechenden Fortschrittsbalkenimplementierung anzuzeigen.

Das obige ist der detaillierte Inhalt vonWie implementiert man einen Fortschrittsbalken für das Laden von AJAX-Daten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!