Die Implementierung der Ajax-Technologie basiert hauptsächlich auf xmlhttprequest. Wenn wir sie jedoch für die asynchrone Datenübertragung aufrufen, ist xmlhttp ein kurzfristiger Prozess (er wird nach der Verarbeitung des Ereignisses zerstört). Wenn das Objekt nicht verpackt ist, Es muss in der Rekonstruktion von xmlhttprequest dort verarbeitet werden, wo es aufgerufen werden muss, und erfordert das Schreiben eines großen Codeabschnitts für jeden Aufruf, was wirklich keine gute Idee ist. Glücklicherweise bieten viele Open-Source-Ajax-Frameworks mittlerweile Lösungen für die Kapselung von xmlhttp. Hier verwenden wir den Prototyp-1.4.0.js, der mit Ajaxtags geliefert wird, als Master, um zu sehen, wie das xmlhttp-Objekt in eine wiederverwendbare Methode gekapselt wird.
In Prototype.js wird zunächst eine Variable definiert: Ajax
var Ajax = {
getTransport: function() {
return Try.these(
function() {return new ActiveXObject('Msxml2.XMLHTTP')},
function() {return new ActiveXObject('Microsoft.XMLHTTP')},
function() {return new XMLHttpRequest()}
) || false;
},
activeRequestCount: 0
}Die Variable gibt eine xmlhttprequest zurück, wenn wir Ajax.getTransport() jedes Mal neu aufrufen Das xmlhttprequest-Objekt wird zurückgegeben.
Eine Basismethode Ajax.Base und der Prototyp der Basismethode werden in der Ajax-Variablen definiert (zunächst verfügt jede Skriptmethode standardmäßig über einen leeren Prototyp, der den Prototyp von Object erbt. Wenn wir die Wenn der Prototyp in Object geändert wird, werden alle Skriptmethoden geändert. Beachten Sie, dass die Methode oder Variable des geerbten Prototyps mit demselben Namen in Ajax.Request geändert wird .
Das Wichtigste im Ajax.Base-Prototyp ist die setOptions-Methode, die wir später verwenden werden.
setOptions: function(options) {
this.options = {
method: 'post',
asynchronous: true,
parameters: ''
}Anfrage im Prototyp wird durch die Definition des Ajax.Request-Prototyps (Ajax.Request.prototype) implementiert. Wir können Ajax.Request jedoch nicht direkt aufrufen. Der Hauptgrund ist, dass Ajax.Request keinen einheitlichen Verarbeitungsprozess bietet. Und möglicherweise müssen wir die Antwort über die Anfrage erhalten. (Stellen Sie sich vor, der Kunde hat eine Nachricht gesendet, aber nie eine Antwort erhalten. Das wäre sehr ärgerlich.) Der Prototyp kapselt auch die Antwort (Ajax.Responders) für uns, aber beide sind unabhängig voneinander. Wie integriert man sie?
stellt uns im Prototyp zwei Lösungen zur Verfügung, eine ist Ajax.Updater und die andere ist Ajax.PeriodicalUpdater. Beiden ist gemeinsam, dass 3 Parameter übergeben werden müssen:
container :
Die Position, an der die Antwortdaten übermittelt werden sollen, wird durch die ID des HTML-Tags definiert. Wenn Sie beispielsweise die zurückgegebenen Daten in einem
URL: Das Ziel, an das die
Anfrageanfrage weitergeleitet werden soll. Das Ziel sollte ein Servlet oder Jspservlet sein, da das Anforderungsobjekt nur durch die Methode do*** im Servlet automatisch abgerufen werden kann.
Optionen: Die
-Struktur sollte mit der oben von Ajax.Base definierten Optionsstruktur in setOptions() übereinstimmen. Wenn sie leer ist oder nicht geschrieben wird, der von Ajax definierte Anfangswert. Die Basis wird verwendet (keine wird bei der Übergabe von Parametern verwendet).
Der Unterschied zwischen den beiden besteht darin, dass Ajax.Updater den vollständigen Antworttext nur dann an den Container zurückgibt, wenn der Antworttext vollständig abgerufen wird und keine Ausnahme auftritt. Der Inhalt wird jedoch in den Container geschrieben Der Antworttext. Unabhängig davon, ob er vollständig abgerufen wurde, wird der Inhalt in den Container gefüllt, bis eine Ausnahme auftritt oder der Antworttext vollständig abgerufen wird. In den meisten Fällen sollte die erste Methode verwendet werden, da die erste Methode beim Auftreten einer Ausnahme die Ausnahmeinformationen im Container anzeigt, die zweite Methode jedoch möglicherweise nicht.
Nachdem xmlhttp gekapselt wurde, müssen wir nur noch die drei oben genannten Parameter festlegen. Beachten Sie, dass Sie diese beim Festlegen der Optionsparameter entsprechend der Optionsstruktur in der Basis festlegen müssen Wenn wir die Post-Methode verwenden, können wir auch das Attribut postBody in Opitons festlegen und den zu übertragenden queryString in den Text einfügen. Ein Beispiel für ein Skript, das die Post-Methode zum Übertragen verwendet, lautet wie folgt:
/*表单提交用post方法*/
function doRequest(container,paraments,url){
var options ={
method: 'post',
asynchronous: true,
postBody: paraments
};
new Ajax.Updater(container,url,options);
}Endlich Ich muss sagen, dass es sich um ein chinesisches Codierungsproblem handelt. Der Prototyp führt eine Codierungskonvertierung für die übergebenen Parameter durch und jeder übergebene Wert wird über encodeURIComponent verarbeitet. Die Kodierung wird in utf-8 konvertiert. Wenn Sie die Anfrage im Hintergrund erhalten, sollten Sie unabhängig vom Kodierungsformat der Seite einheitlich request.setCharacterEncoding("UTF-8") verwenden, um die Kodierung für die Anfrage festzulegen. Wenn Sie die Post-Methode zum Übertragen von Daten verwenden, wird automatisch Folgendes ausgeführt:
Anfrage． setHeader('Content-type','application/x-www-form-urlencoded') Stellen Sie sicher, dass das Kodierungsformat der übertragenen Daten korrekt ist.
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Beispielcodes für die XMLHTTP-Objektkapselungstechnologie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
