Vor kurzem habe ich viele Ajax -Operationen involviert und muss das tun, was ich im Hintergrund tun sollte. Die AJAX -Funktion, die ich jetzt verwende, wird von einem Hintergrundpersonal eingekapselt - sie basiert jedoch auf JQuery Ajax, sodass sie ohne JQuery nutzlos ist. Und ich denke, die AJAX -Methode von JQuery ist sehr vollständig und kann direkt verwendet werden. Wenn es JQuery gibt, wird sein Ajax nicht vergeblich verwendet. Was mir fehlt, ist eine AJAX -Methode, die ohne JQuery verwendet werden kann.
Also habe ich auch einen Tag damit verbracht, einen zu schreiben, die Parameter und die Anrufmethode ähneln dem Ajax von Jquery. Es heißt XHR, weil xhr = xmlhttprequest.
Die Codekopie lautet wie folgt:
/*
* Name: xhr, Ajax -Kapselungsfunktion
* Beschreibung: Eine Javax Call -Kapselungsklasse, die die AJAX -Anrufmethode von JQuery imitiert
* Autor: Zehn Jahre Licht
*/
var xhr = function () {
var
ajax = function () {
return ('xmlhttprequest' im Fenster)? function () {
Rückgabe neuer xmlhttprequest ();
}: function () {
return New ActiveXObject ("microsoft.xmlhttp");
}
} (),
formatData = function (fd) {
var res = '';
für (var f in fd) {
res+= f+'='+fd [f]+'&';
}
return res.lice (0, -1);
},
Ajax = function (ops) {
var
root = this,,
req = ajax ();
root.url = ops.Url;
root.type = ops.type || 'Responsext';
root.method = ops.method || 'ERHALTEN';
root.async = ops.async || WAHR;
root.data = ops.data || {};
root.complete = ops.complete || function () {};
root.success = ops.success || Funktion(){};
root.Error = ops.Error || Funktion (s) {alert (root.url+'-> Status:'+s+'Fehler!')};
root.abort = req.abort;
root.setData = function (data) {
für (var d in Daten) {
root.data [d] = data [d];
}
}
root.send = function () {
var datastring = formatData (root.data),
SendString, Get = false,
async = root.async,
complete = root.com plete,,
method = root.method,
type = root.type;
if (method === 'get') {
root.url+= '?'+DatenAstring;
Get = wahr;
}
Req.open (Methode, Root.url, Async);
if (! Get) {
req.setRequestheader ("Content-Typ", "Anwendung/x-www-form-urlencoded");
sendString = datastring;
}
// Die OnReadyStatechange -Methode vor dem Senden zurücksetzen. Andernfalls wird eine neue Synchronisierungsanforderung angezeigt, und zwei erfolgreiche Rückrufe werden ausgeführt (Chrome usw. wird auch OnreadyStatEchange ausführen, wenn die Anforderung synchronisiert wird)
req.onReadyStatechange = asynchronisch? function () {
// console.log ('async true');
if (req.readystate == 4) {
vollständig();
if (req.status == 200) {
root.success (req [Typ]);
} anders {
Root.Error (req.status);
}
}
}: null;
req.send (sendString);
if (! async) {
//console.log('aSync false ');
vollständig();
root.success (req [Typ]);
}
}
root.url && root.send ();
};
Rückgabefunktion (OPS) {Neue AJAX (OPS);};
} ();
Parameterbeschreibung:
1.URL: Die Anforderungsadresse. Sie können es nicht ausfüllen und die Anfrage wird nicht eingeleitet. Wenn Sie es jedoch nicht ausfüllen und zum Senden erzwingen, werde ich Ihnen keine Fehler beschuldigen.
2.Method: 'Get' oder 'Post', alle aktiviert, standardmäßig erhalten
3.Data: Die zugesandten Daten sind ein Objekt
4.async: ob es asynchron ist, Standard wahr ist
5.Typ: Der zurückgegebene Datentyp ist nur Responsext oder responsexml und der Standard -Responsext
6.Complete: Funktionen, die ausgeführt werden, wenn die Anfrage abgeschlossen ist
7. SUCCESS: Funktionen, die beim Erfolg der Anfrage ausgeführt werden, ausgeführt
8.Error: Funktion, die ausgeführt wird, wenn die Anforderung fehlschlägt
HINWEIS: Die Typparameter sind nicht so reich wie der Datentyp von JQuery, nur Responsext oder Responsexml in nativem AJAX. Wenn die JSON -Daten zurückgegeben werden, müssen Sie sie selbst in der Erfolgsfunktion verarbeiten, um Text in JSON umzuwandeln.
Funktionsbeschreibung:
Es gibt zwei Funktionen, die für ein instanziiertes XHR -Objekt verwendet werden müssen. Einer wird gesendet. Die Anrufmethode lautet: xhr.send () ohne Parameter. Seine Funktion besteht darin, den Anfrageprozess zu initiieren. Wenn während der Initialisierung keine URL vorhanden ist, wird die Send -Methode nicht ausgeführt, sodass Sie später URL hinzufügen und Senden manuell initiieren können. Wenn während des Sendens keine URL vorliegt, wird die Anfrage fehlschlagen und ich habe diesen Fehler nicht behandelt. Nur Sie können den Fehler selbst finden.
Eine andere Methode ist SetData, die Aufrufmethode ist xhr.setData (data_obj) und sein Parameter ist ein Objekt. Die Funktion der SetData -Methode besteht darin, den Wert im Datenattribut von xhr.data teilweise zu ersetzen. Zum Beispiel gibt es bereits eine Seite: 1 in xhr.data. Sie können xhr.setData ({Seite: 2}) verwenden, um seinen Wert zu aktualisieren, ohne andere Attributwerte zu beeinflussen, die bereits in Daten vorhanden sind.
Aufrufmethode:
Die Codekopie lautet wie folgt:
var a1 = xhr ({{
URL: '2.Php',
Daten:{
'Benutzername': 'lix',,
'Passwort': '123456',
'Geschlecht': 'männlich',
"Interet": "Spiel"
},
Asynchronisation: Falsch,
Methode: 'Get',
Erfolg: Funktion (Daten) {
var obj = json.Parse (Daten);
// ...
}
});
HINWEIS: Sie müssen kein neues schreiben
Ausführliche Einführung:
Nach dieser Zeit der Projekterfahrung stellte ich fest, dass eine AJAX -Klasse eine sehr häufige Funktion haben sollte: Es ist zweckmäßig, wiederholt Anfragen zu initiieren. Wenn ich beispielsweise eine Seite von AJAX in ein Projekt schreibe, muss ich jedes Mal, wenn ich die Seite drehe, eine Anfrage senden, aber die gesendeten Daten ändern sich nicht auf die aktuelle Seitennummer und die Anzahl jeder Seite. Wenn Sie diese unveränderten Parameter wiederholt definieren müssen, ist dies zweifellos eine Verschwendung von Ressourcen.
Diese XHR -Funktion hat diese Funktion bereits berücksichtigt. Nehmen Sie das Beispiel der Pagination. Wir können ein XHR -Objekt initialisieren, wenn die Seite geladen wird, und speichern es als Variable A1. Wenn eine Seitenwendeanforderung eingeleitet wird, haben sich keine anderen Parameter geändert, aber die Pagenumber hat sich geändert. Zu diesem Zeitpunkt können wir die SetData -Methode von XHR aufrufen, um die Pagenumberne zu ändern.
Die Codekopie lautet wie folgt:
a1.setData ({pagenumber: 2});
Hinweis: Der Parameter von SetData ist ebenfalls ein Objekt.
Natürlich können Sie auch Daten vollständig ersetzen:
a1.data = {…};
Nicht nur Daten, Sie können mehr Änderungen am instanziierten XHR -Objekt A1 vornehmen, z. B. das Ändern der URL, das Ändern der Erfolgsfunktion, das Ändern von Erhalten und synchron auf asynchron. Nach dem Ändern rufen Sie die A1.Send () -Methode an und initiieren die Anfrage nach Ihren Einstellungen erneut.
Wenn es sich um eine andere AJAX-Anfrage handelt, die völlig nichts miteinander zu tun hat, müssen dieses fertige A1 nicht erzwingen. Wir können einen anderen XHR namens A2 oder so instanziieren.
Wenn Sie mit dem Namen XHR nicht zufrieden sind, können Sie ihn nur selbst ändern.
Darüber hinaus bietet es eine komprimierte verschlüsselte Version. Die unkomprimierte Version entfernt die Kommentare zu 2 KB, und die komprimierte Version beträgt 1,00 KB.
Die Codekopie lautet wie folgt:
var xhr=function(){var e=function(){return"XMLHttpRequest"in window?function(){return new XMLHttpRequest}:function(){return new ActiveXObject("Microsoft.XMLHTTP")}}(),t=function(e){var t="";for(var n in e) {t+= n+"="+e [n]+"&"} return t.slice (0, -1)}, n = Funktion (n) {var r = this, i = e (); r.url = n.url; N () {}; t in e) {r.data [t] = e [t]}}; R.Send = function () {var e = t (r.data), n, s = false, o = r.aSync, u = r.com plete, a = r.method, f = r.type; if (a === "get") {r.url+= "?"+e; s = tr ue} i.open (a, r.url, o); if (! s) {i.setRequestheader ("Content-Type", "Anwendung/x-www-form-urlencoded "); n = e} i.onReadyStatechange = o? Function () {if (i.ReadyState == 4) {u (); if (i.status == 200) {r.success (i [f ])} else {r.Error (i.status)}}}: null; i.send (n); if (! o) {u (); r.success (i [f])}}; Funktion (e) {Neue N (e)}} () zurückgeben)
Es muss eine gewisse Unvollständigkeit in XHR geben. Wenn Sie es in Zukunft während der Verwendung finden, werde ich es rechtzeitig korrigieren. Wenn Sie damit nicht zufrieden sind oder es unzureichend finden, geben Sie bitte Verbesserungsvorschläge.