qu'est-ce que la refactorisation ajax

La reconstruction ajax fait référence à l'amélioration de la qualité et des performances du logiciel en ajustant le code du programme, en rendant le modèle de conception et l'architecture du programme plus raisonnables et en améliorant l'évolutivité et la maintenabilité du logiciel sans modifier les fonctions existantes du logiciel ; L'implémentation d'Ajax repose principalement sur l'objet XMLHttpRequest Puisque l'instance de cet objet sera détruite une fois le traitement de l'événement terminé, elle doit être reconstruite lorsqu'elle doit être appelée.

L'environnement d'exploitation de cet article : système Windows10, version javascript1.8.5&&html5, ordinateur Dell G3.

Qu'est-ce que le refactoring ajax

Le refactoring consiste à améliorer la qualité et les performances du logiciel en ajustant le code du programme sans modifier les fonctions existantes du logiciel, afin que le modèle de conception et l'architecture du programme soient plus raisonnables. Améliorer le logiciel. évolutivité et maintenabilité.

L'objet principal d'Ajax est XMLHttpReguest, ce qui signifie que lorsque nous interagissons avec le serveur via Ajax, nous devons construire l'objet XMLHttpRequest.

Mais lorsque la page interagit avec le serveur via Ajax, l'objet XMLHttpReguest sera détruit après l'interaction.

Notre page interagit donc à nouveau avec le serveur via Ajax et nous devons reconstruire l'objet XMLHttpRequest.

Ensuite, lors de la création de l'objet XMLHttpReguest, nous devons prendre en compte la compatibilité du navigateur, donc la création de XMLHttpReguest est également très lourde et doit être créée de différentes manières selon les différents types de navigateur.

Donc, si nous appliquons la technologie Ajax à plusieurs pages, nous devons créer cet objet dans plusieurs pages, ce qui ne reflète pas l'OO (style orienté objet, réutilisation du code), l'orienté objet prône la réutilisation du code, nous encapsulons donc généralement le XMLHttpReguest objet et certaines méthodes courantes pour traiter les requêtes Ajax via le refactoring Ajax, afin que nous puissions le référencer directement lors de l'écriture du code de l'objet, réalisant ainsi la réutilisation du code et économisant le temps de création de cet objet

Étapes de refactorisation Ajax

1) Créer un. séparez le fichier JS nommé AjaxRequest.js et écrivez le refactoring dans ce fichier Code requis pour Ajax

2) Incluez le fichier AjaxRequest.js qui vient d'être créé dans la page où Ajax doit être appliqué

3) Écrivez la méthode de gestion des erreurs, instanciation méthode et fonction de rappel de l'objet Ajax dans la page où Ajax est appliqué

Si nous écrivons un morceau de code de script JavaScript dans une page jsp ou html, nous pouvons écrire du code de script JavaScript directement dans la page actuelle. Vous pouvez également utiliser une autre méthode : créez un fichier js, puis introduisez ce fichier js dans la page jsp ou html que nous avons écrite. L'exemple est le suivant :

(1) Créez un fichier JS séparé et nommez-le AjaxRequest.js. , et écrivez le code requis pour reconstruire Ajax dans ce fichier.

 var net = new Object();    //创建一个全局变量net
 //编写构造函数
 net.AjaxRequest = function(url,onload,onerror,method,params){
     this.req = null;
     this.onload = onload;
     this.onerror = (onerror) ? onerror : this.defaultError;
     this.loadDate(url,method,params);
 }
 //编写用于初始化XMLHttpRequest对象并指定处理函数，最后发送HTTP请求的方法
 net.AjaxRequest.prototype.loadDate = function(url,method,params){
     if(!method){
         method = "GET";
     }
     if(window.XMLHttpRequest){
         this.req = new XMLHttpRequest();
     }else if(window.ActiveXObject){
         this.req = new ActiveXObject("Microsoft.XMLHTTP");
     }
     if(this.req){
         try{
             var loader = this;
             this.req.onreadystatechange = function(){
                 net.AjaxRequest.onReadyState.call(loader);
             }
             this.req.open(method,url,true);    //建立对服务器的调用
             if(method == "POST"){              //如果提交方式为POST
                 this.req.setRequestHeader("Content-Type",
                     "application/x-www-form-urlencoded");   //设置请求头
             }
             this.req.send(params);    //发送请求
         }catch(err){
             this.onerror.call(this);
         }
     }
 
 }
 //重构回调函数
 net.AjaxRequest.onReadyState = function(){
     var req = this.req;
     var ready = req.readyState;
     if(ready == 4){               //请求完成
         if(req.status == 200){    //请求成功
             this.onload.call(this);
         }else{
             this.onerror.call(this);
         }
     }
 }
 //重构默认的错误处理函数
 net.AjaxRequest.prototype.defaultError = function(){
     alert("错误数据\n\n回调状态："+this.req.readyState+"\n状态："+this.req.status);
 }

(2) Appliquez les instructions suivantes dans la page où Ajax doit être appliqué, y compris le fichier JS créé dans (1)

<script language="javascript" src="AjaxRequest.js"></script>

(3) Écrivez la méthode de gestion des erreurs et instanciez l'objet Ajax dans la page où Ajax est appliqué des méthodes et des fonctions de rappel.

 <script language="javascript">
 /*********************错误处理的方法******************/
     function onerror(){
         alert("您的操作有误！");
     }
 /*********************实例化Ajax对象的方法************/
     function getInfo(){
         var loader = new net.AjaxRequest("getInfo.jsp?nocache="+new Date().getTime(),
             deal_getInfo,onerror,"GET");
     }
 /*********************回调函数************************/
     function deal_getInfo(){
         document.getElementById("showInfo").innerHTML=this.req.responseText;
     }
 </script>

【Recommandation de tutoriel connexe :

Tutoriel vidéo AJAX

】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!