Meine jüngste Arbeit beinhaltet viele Ajax-Operationen, und ich muss die Dinge tun, die jetzt im Hintergrund erledigt werden sollen – aber sie basieren auf dem Ajax von jquery Funktion ohne Jquery ist nutzlos. Und ich denke, dass die Ajax-Methode von JQuery sehr vollständig ist und direkt verwendet werden kann. Wenn Sie JQuery bereits haben, wird es nicht umsonst verwendet werden ohne JQuery verwendet werden.
Also habe ich auch einen Tag damit verbracht, einen zu schreiben. Die Parameter und die Aufrufmethode ähneln dem Ajax von jquery, weil xhr=XMLHttpRequest.
root.type = ops.type || 'responseText';
root.method = ops.method || 'GET';
Root.async = ops.async ||. true;
root.data = ops.data ||. {};
root.complete = ops.complete ||. function () {};
root.success = ops.success ||. function(){};
root.error = ops.error ||. function(s) { warning(root.url '->status:' s 'error!')};
root.abort = req.abort;
root.setData = Funktion (Daten) {
for(var d in data) {
root.data[d] = data[d];
}
}
root.send = function () {
var datastring = formatData(root.data),
sendstring,get = false,
async = root.async,
complete = root.complete,
method = root.method,
type=root.type;
If(method === 'GET') {
root.url ='?'
get = true;
}
req.open(method,root.url,async);
if(!get) {
req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
sendstring = datastring;
//Setzen Sie die onreadystatechange-Methode vor dem Senden zurück, andernfalls erfolgt eine neue Synchronisierungsanforderung und zwei erfolgreiche Rückrufe werden ausgeführt (Chrome usw. führt auch onreadystatechange während Synchronisierungsanforderungen aus)
req.onreadystatechange = async ? function () {
// console.log('async true');
If (req.readyState ==4){
komplett();
If(req.status == 200) {
root.success(req[type]);
} sonst {
Root.error(req.status);
}
} : null;
req.send(sendstring);
if(!async) {
//console.log('async false');
komplett();
root.success(req[type]);
}
}
root.url && root.send();
};
Return function(ops) {return new AJAX(ops);}
}();
1.url: Wenn Sie die Adresse nicht ausfüllen, wird die Anfrage nicht initiiert. Wenn Sie sie jedoch nicht ausfüllen und das Senden erzwingen, geben Sie mir keine Schuld, wenn etwas schief geht 🎜> 2.Methode: „GET“ oder „POST“, alle Großbuchstaben, Standard GET
3.Daten: Die zu sendenden Daten werden angehängt, das Format ist ein Objekt
4.async: Ob asynchron sein soll, Standardwert true
5. Typ: Der zurückgegebene Datentyp ist nur ResponseText oder ResponseXML. Der Standardwert ist ResponseText
6.complete: Funktion wird ausgeführt, wenn die Anfrage abgeschlossen ist
7.Erfolg: Funktion wird ausgeführt, wenn die Anfrage erfolgreich ist
8.Fehler: Funktion wird ausgeführt, wenn die Anfrage fehlschlägt
Hinweis: Der Typparameter ist nicht so umfangreich wie der dataType von jquery. Wenn JSON-Daten zurückgegeben werden, müssen Sie diese selbst in der Erfolgsfunktion verarbeiten, um Text in JSON zu konvertieren.
Für ein instanziiertes xhr-Objekt stehen zwei Funktionen zur Verfügung: Eine davon ist Senden. Die aufrufende Methode lautet: xhr.send (), keine Parameter. Die Funktion besteht darin, den Anforderungsprozess zu initiieren. Wenn während der Initialisierung keine URL vorhanden ist, wird dies nicht der Fall sein ausgeführt werden, damit Sie die URL später hinzufügen und den Versand manuell einleiten können. Wenn beim Senden keine URL vorhanden ist, schlägt die Anfrage fehl und ich habe diesen Fehler nur selbst behoben >
Eine andere Methode ist xhr.setData(data_obj), und ihr Parameter ist ein Objekt. Die Funktion der setData-Methode besteht beispielsweise darin, den Wert im Datenattribut von xhr zu ersetzen bereits eine Seite in xhr.data: 1. Sie können xhr.setData({page:2}) verwenden, um ihren Wert zu aktualisieren, ohne andere Attributwerte zu beeinflussen, die bereits in data vorhanden sind.
Aufrufmethode:
Code kopieren
Diese xhr-Funktion hat diese Funktion also bereits berücksichtigt. Am Beispiel des Pagings können wir beim Laden der Seite ein xhr-Objekt initialisieren und es als Variable a1 speichern haben sich geändert, aber die Seitennummer hat sich geändert. Zu diesem Zeitpunkt können Sie die setData-Methode von xhr aufrufen, um die Seitennummer zu ändern.
a1.data = {…};
Sie können nicht nur Daten, sondern auch weitere Änderungen am instanziierten xhr-Objekt a1 vornehmen, z. B. die URL ändern, die Erfolgsfunktion ändern, GET zu POST, synchron zu asynchron ... Rufen Sie nach der Änderung erneut a1.send() auf Methode wird die Anfrage gemäß Ihren Einstellungen erneut initiiert.
Wenn es sich um eine andere Ajax-Anfrage handelt, die überhaupt nichts damit zu tun hat, besteht natürlich keine Notwendigkeit, dieses vorgefertigte a1 zu verwenden. Wir können ein anderes xhr instanziieren und es a2 oder so nennen.
Wenn Sie mit dem Namen xhr nicht zufrieden sind, müssen Sie ihn selbst ändern.
Es wird auch eine komprimierte und verschlüsselte Version bereitgestellt. Die unkomprimierte Version ist etwa 2 KB groß, ohne Kommentare, und die komprimierte Version ist 1,00 KB groß.
