Partager une fonction AJAX encapsulée dans des compétences natives Javascript_javascript

Mon travail récent implique de nombreuses opérations ajax, et je dois faire les choses qui doivent être faites en arrière-plan. La fonction ajax utilisée maintenant est encapsulée par une personne en arrière-plan - mais elle est basée sur l'ajax de jquery. la fonction sans jquery est inutile. Et je pense que la méthode ajax de jquery est très complète et peut être utilisée directement si vous avez déjà jquery, alors son ajax ne sera pas utilisé en vain. Ce qui me manque, c'est une méthode ajax qui peut. être utilisé sans jquery.

J'ai donc aussi passé une journée à en écrire un. Les paramètres et la méthode d'appel sont similaires à l'ajax de jquery. Appelons-le xhr, car xhr=XMLHttpRequest.

Copier le code Le code est le suivant :

/*
* Nom : xhr, fonction wrapper AJAX
* Description : Une classe d'encapsulation d'appel ajax, imitant la méthode d'appel ajax de jquery
*Auteur : Lampe Dix Ans
*/
var xhr = fonction () {
var
ajax = fonction () {
           return ('XMLHttpRequest' dans la fenêtre) function () {
                     renvoie un nouveau XMLHttpRequest();
               } : fonction () {
               renvoie le nouvel ActiveXObject("Microsoft.XMLHTTP");
>
}(),
formatData= fonction (fd) {
      var res = '';
pour (var f dans fd) {
               res = f '=' fd[f] '&';
>
          return res.slice(0,-1);
},
AJAX = fonction (ops) {
                                                     racine = ceci,
          req = ajax();
root.url = ops.url;

         root.type = ops.type || 'responseText';
          root.method = ops.method || 'GET';
Root.async = ops.async || vrai
root.data = ops.data || {};
root.complete = ops.complete || fonction () {};
root.success = ops.success || fonction(){};
root.error = ops.error || fonction(s) { alert(root.url '->status:' s 'error!')};
         root.abort = req.abort;
          root.setData = fonction (données) {
               pour (var d dans les données) {
                    root.data[d] = data[d];
            }
>
root.send = fonction () {
          var datastring = formatData(root.data),
                 sendstring,get = false,
async = root.async,
             complete = root.complete,
            méthode = root.method,
            type=root.type;
Si(méthode === 'GET') {
                      root.url ='?'                      get = true;
            }
                req.open(method,root.url,async);
               if(!get) {
                 req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                     sendstring = datastring;
                                                                       

                         //Réinitialisez la méthode onreadystatechange avant l'envoi, sinon une nouvelle demande de synchronisation se produira et deux rappels réussis seront exécutés (chrome, etc. exécutera également onreadystatechange lors des demandes de synchronisation)
                req.onreadystatechange = async function () {
                           // console.log('async true');
Si (req.readyState ==4){
compléter();
Si (req.status == 200) {
                                 root.success(req[type]);
                       } autre {
Root.error(req.status);
                                                                                                                                                                              ​                  }
               } : null;
                req.send(sendstring);
               if(!async) {
//console.log('async false');
compléter();
                    root.success(req[type]);
            }
>
         root.url && root.send();                                                              };
Retourner la fonction (ops) {return new AJAX (ops);}
}();

Description du paramètre :

1.url : Adresse de la demande. Si vous ne la remplissez pas, la demande ne sera pas initiée. Mais si vous ne la remplissez pas et ne forcez pas l'envoi, vous ne me blâmez pas si quelque chose ne va pas. 🎜> 2.méthode : 'GET' ou 'POST', toutes en majuscules, GET par défaut

3.data : Les données à envoyer sont jointes, le format est un objet

4.async : s'il doit être asynchrone, vrai par défaut
5.type : Le type de données renvoyé est uniquement ResponseText ou ResponseXML. La valeur par défaut est ResponseText
. 6.complete : Fonction exécutée lorsque la requête est terminée
7.success : Fonction exécutée lorsque la requête est réussie
8.erreur : Fonction exécutée lorsque la requête échoue

Remarque : le paramètre type n'est pas aussi riche que le dataType de jquery. Il n'a que ResponseText ou ResponseXML en AJAX natif. Si des données json sont renvoyées, vous devez les traiter vous-même dans la fonction success pour convertir le texte en json.

Description de la fonction :

Un objet xhr instancié a deux fonctions disponibles, l'une est send, la méthode appelante est : xhr.send(), aucun paramètre, sa fonction est d'initier le processus de requête. S'il n'y a pas d'url lors de l'initialisation, il ne le fera pas. être exécuté. méthode d'envoi, afin que vous puissiez ajouter l'url plus tard et lancer l'envoi manuellement - s'il n'y a pas d'url lors de l'envoi, la demande échouera et je n'ai pas géré cette erreur. Vous ne trouverez l'erreur que vous-même. >

Une autre méthode est setData. La méthode appelante est xhr.setData(data_obj), et son paramètre est un objet. La fonction de la méthode setData est de remplacer partiellement la valeur dans l'attribut data de xhr. déjà une page dans xhr.data : 1. Vous pouvez utiliser xhr.setData({page:2}) pour mettre à jour sa valeur sans affecter les autres valeurs d'attribut​​qui existent déjà dans data.

Méthode d'appel :

Copier le code

Le code est le suivant :

var a1 = xhr({
                                                                                                                                                                                                                                             données :{              'nom d'utilisateur':'lix',              'mot de passe':'123456',
            'genre':'masculin',
             'interset':'play'
},
async: faux,
Méthode : 'GET',
Succès : fonction (données) {
          var obj = JSON.parse(data);
                  //....
>
});


Remarque : Pas besoin d'écrire du nouveau

Présentation des fonctionnalités :
Après cette période d'expérience en projet, j'ai découvert qu'une classe ajax devait avoir une fonctionnalité très commune : pour faciliter les requêtes répétées. Par exemple, lorsque j'écrivais une pagination en ajax dans le projet, une requête devait être envoyée à chaque fois que la page était affichée. a été tourné, mais à l'exception du numéro de page actuel et du nombre d'éléments par page, les autres données ne changeront pas. Si vous effectuez plusieurs demandes de ce type, vous devez définir à plusieurs reprises ces paramètres inchangés, ce qui est sans aucun doute un gaspillage de ressources.

Donc cette fonction xhr a déjà considéré cette fonction. En prenant l'exemple de la pagination, on peut initialiser un objet xhr lorsque la page est chargée et l'enregistrer sous la variable a1 Lorsqu'une demande de tournage de page est initiée, aucun autre paramètre. ont changé, mais le pageNumber a changé. À ce stade, vous pouvez appeler la méthode setData de xhr pour modifier le pageNumber.

Copier le code Le code est le suivant : a1.setData({pageNumber:2});

Remarque : Le paramètre de setData est également un objet.

Bien sûr, vous pouvez également remplacer l'intégralité des données :

a1.data = {…};

Pas seulement les données, vous pouvez apporter davantage de modifications à l'objet xhr instancié a1, comme changer l'URL, changer la fonction de réussite, GET en POST, synchrone en asynchrone... Après la modification, appelez à nouveau a1.send() méthode, il relancera la demande en fonction de vos paramètres.

Bien sûr, s'il s'agit d'une autre requête ajax qui n'a aucun rapport, il n'est pas nécessaire d'utiliser ce a1 prêt à l'emploi. Nous pouvons instancier un autre xhr et l'appeler a2 ou quelque chose comme ça.

Si vous n'êtes pas satisfait du nom xhr, alors vous devez le changer vous-même.

Une version compressée et cryptée est également fournie. La version non compressée fait environ 2 Ko avec les commentaires supprimés, et la version compressée fait 1,00 Ko.

Copier le code Le code est le suivant : var xhr=function(){var e=function(){return "XMLHttpRequest" dans 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)}}()

Il doit y avoir quelques imperfections dans xhr. Si j'en trouve à l'avenir, je les corrigerai à temps. Si vous n'en êtes pas satisfait ou si cela est insuffisant, n'hésitez pas à nous faire part de suggestions d'amélioration.