Teilen einer AJAX-Funktion, gekapselt in nativen Javascript_Javascript-Kenntnissen

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.

Code kopieren Der Code lautet wie folgt:

/*
* Name: xhr,AJAX-Wrapper-Funktion
* Beschreibung: Eine Kapselungsklasse für Ajax-Aufrufe, die die Ajax-Aufrufmethode von JQuery imitiert
* Autor: Zehn Jahre Lampe
*/
var xhr = function () {
var
ajax = function () {
           return ('XMLHttpRequest' im Fenster) ? function () {
                     return new XMLHttpRequest();
               } : Funktion () {
               return new ActiveXObject("Microsoft.XMLHTTP");
}
}(),
formatData= Funktion (fd) {
      var res = '';
for(var f in fd) {
               res = f '=' fd[f] '&';
}
          return res.slice(0,-1);
},
AJAX = function(ops) {
                                                   root = das,
          req = ajax();
root.url = ops.url;

         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);}
}();

Parameterbeschreibung:

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.

Funktionsbeschreibung:

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

Der Code lautet wie folgt:

var a1 = xhr({
                                                                                                                                                                                                                                 Daten:{              'Benutzername':'lix',              'password':'123456',
            'Geschlecht':'männlich',
             'interset':'play'
},
async:false,
Methode:'GET',
Erfolg: Funktion (Daten) {
          var obj = JSON.parse(data);
                  //....
}
});


Hinweis: Es ist nicht erforderlich, etwas Neues zu schreiben

Funktionseinführung:
Nach dieser Zeit der Projekterfahrung stellte ich fest, dass eine Ajax-Klasse eine sehr gemeinsame Funktion haben sollte: Um wiederholte Anfragen zu erleichtern. Als ich beispielsweise Paginierung Ajax im Projekt schrieb, musste bei jeder Seite eine Anfrage gesendet werden wurde umgedreht, aber mit Ausnahme der aktuellen Seitenzahl und der Anzahl der Elemente pro Seite ändern sich die anderen Daten nicht. Wenn Sie mehrere solcher Anfragen stellen, müssen Sie diese unveränderten Parameter wiederholt definieren, was zweifellos eine Verschwendung von Ressourcen ist.

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.

Code kopieren Der Code lautet wie folgt: a1.setData({pageNumber:2});

Hinweis: Der Parameter von setData ist ebenfalls ein Objekt.

Natürlich können Sie auch die gesamten Daten ersetzen:

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ß.

Code kopieren Der Code 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=function( n){var r=this,i=e();r.url=n.url;r.type=n.type||"responseText";r.method=n.method||"GET";r. async=n.async||true;r.data=n.data||{};r.complete=n.complete||function(){};r.success=n.success||function(){} ;r.error=n.error||function(e){alert(r.url "->status:" e "error!")};r.abort=i.abort;r.setData=function(e ){for(var t in e){r.data[t]=e[t]}};r.send=function(){var e=t(r.data),n,s=false,o= r.async,u=r.complete,a=r.method,f=r.type;if(a==="GET"){r.url=" e;s=true}i.open( a,r.url,o);if(!s){i.setRequestHeader("Content-type","application/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])}};r.url&&r.send()};return function(e){return new n( e)}}()

Wenn ich in Zukunft welche finde, werde ich diese rechtzeitig korrigieren. Wenn Sie damit nicht zufrieden sind oder es nicht ausreichend finden, können Sie uns gerne Verbesserungsvorschläge machen.