JavaScript kombiniert AJAX_stream, um Streaming-display_javascript-Fähigkeiten zu implementieren

Wenn bei der Informationsinteraktion AJAX verwendet wird und die vom Server zurückgegebenen Informationen relativ groß sind, ist die Streaming-Anzeige nach Abschluss der Übertragung benutzerfreundlicher als die einheitliche Anzeige.

Streaming-Implementierung

Das Prinzip besteht darin, einen Timer einzustellen, den Status des AJAX-Objekts regelmäßig zu überprüfen und den Inhalt zu aktualisieren. Wenn die Übertragung abgeschlossen ist, brechen Sie den Timer ab.

Code kopieren Der Code lautet wie folgt:

Funktion ajax_stream(url,data,element) {
var xmlHttp=null;
If (window.XMLHttpRequest)
{// Code für IE7, Firefox, Opera usw.
xmlHttp=new XMLHttpRequest();
}
​ else if (window.ActiveXObject)
{// Code für IE6, IE5
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
If (xmlHttp==null)
          {
warning("Ihr Browser unterstützt XMLHTTP nicht.");
         element.val('Ihr Browser unterstützt XMLHTTP nicht. Klicken Sie auf den LOG-Link, um den Vorgang zu überwachen.');
Rückgabe 0;
}
var xhr = xmlHttp;
xhr.open('POST', url, true);
// Wenn Sie Daten wie ein HTML-Formular POSTEN müssen, verwenden Sie bitte setRequestHeader(), um HTTP-Header hinzuzufügen. Geben Sie dann in der send()-Methode die Daten an, die Sie senden möchten:
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(data);
var timer;
Timer = window.setInterval(function() {
If (xhr.readyState == XMLHttpRequest.DONE) {
               window.clearTimeout(timer);
}
          element.val(xhr.responseText);
}, 1000);
}

Datenkonvertierung veröffentlichen

Da send in der Standardimplementierung nur die folgenden Eingabetypen akzeptieren kann, müssen die zu übertragenden Datenobjekte im Voraus in das String- oder FormData-Format konvertiert werden. Dies ist nicht so praktisch wie JQuery, aber wie funktioniert JQuery? Implementieren Sie es mitten in der Übertragung? Die Ereignisantwort ist noch nicht bekannt, sodass Sie sie nicht verwenden oder alle Objekte in JSON konvertieren können.

Code kopieren Der Code lautet wie folgt:

void send();
void send(ArrayBuffer data);
void send(Blob data);
void send(Dokumentdaten);
void send(DOMString? data);
void send(FormData data);

Das Folgende ist der Konvertierungscode. Wenn der Browser FormData unterstützt, wird er konvertiert, andernfalls wird er in eine Zeichenfolge konvertiert.

Code kopieren Der Code lautet wie folgt:

Funktion ajax_generate_data(jsobj) {
var i;
If (window.FormData) {
      var data = new FormData();
           für i in jsobj {
              data.append(i,jsobj[i]);
}
} sonst {
      var data = '';
        var datas = [];
           für i in jsobj {
// für die Werte, damit eventuelle und in den Strings enthaltene Werte das Format nicht zerstören
              var value = encodeURIComponent(jsobj[i]);
              datas.append(i '=' value);
}
          data = datas.join('&')
}
console.log(data);
Daten zurückgeben;
}