Was ist Ajax-Refactoring?

Ajax-Rekonstruktion bezieht sich auf die Verbesserung der Qualität und Leistung der Software durch Anpassung des Programmcodes, eine angemessenere Gestaltung des Entwurfsmusters und der Architektur des Programms sowie eine Verbesserung der Skalierbarkeit und Wartbarkeit der Software, ohne die vorhandenen Funktionen der Software zu ändern. Die Implementierung von Ajax basiert hauptsächlich auf dem XMLHttpRequest-Objekt. Da die Instanz dieses Objekts nach Abschluss der Ereignisverarbeitung zerstört wird, muss sie neu erstellt werden, wenn sie aufgerufen werden muss.

Die Betriebsumgebung dieses Artikels: Windows 10-System, Javascript 1.8.5 und HTML5-Version, Dell G3-Computer.

Was ist Ajax-Refactoring? Beim Refactoring geht es darum, die Qualität und Leistung der Software zu verbessern, indem der Programmcode angepasst wird, ohne die vorhandenen Funktionen der Software zu ändern, sodass das Entwurfsmuster und die Architektur des Programms vernünftiger werden Skalierbarkeit und Wartbarkeit.

Das Kernobjekt von Ajax ist XMLHttpReguest. Das bedeutet, dass wir das XMLHttpRequest-Objekt erstellen müssen, wenn wir über Ajax mit dem Server interagieren.

Aber wenn die Seite über Ajax mit dem Server interagiert, wird das XMLHttpReguest-Objekt nach der Interaktion zerstört.

Unsere Seite interagiert also erneut über Ajax mit dem Server und wir müssen das XMLHttpRequest-Objekt neu erstellen.

Dann müssen wir beim Erstellen des XMLHttpReguest-Objekts die Kompatibilität des Browsers berücksichtigen, sodass die Erstellung von XMLHttpReguest ebenfalls sehr umständlich ist und je nach Browsertyp auf unterschiedliche Weise erstellt werden muss.

Wenn wir also die Ajax-Technologie auf viele Seiten anwenden, müssen wir dieses Objekt auf vielen Seiten erstellen, was nicht OO (objektorientierter Stil, Code-Wiederverwendung) widerspiegelt. Objektorientiert befürwortet die Wiederverwendung von Code, daher kapseln wir normalerweise XMLHttpReguest Objekt und einige gängige Methoden zur Verarbeitung von Ajax-Anfragen durch Ajax-Refactoring, sodass wir beim Schreiben von Code direkt auf dieses Objekt verweisen können, wodurch eine Code-Wiederverwendung erreicht und die Erstellungszeit dieses Objekts eingespart wird

Ajax-Refactoring-Schritte

1) Erstellen Sie ein Trennen Sie die JS-Datei mit dem Namen AjaxRequest.js und schreiben Sie den für Ajax erforderlichen Refactoring-Code

2) Fügen Sie die soeben erstellte Datei AjaxRequest.js in die Seite ein, auf der Ajax angewendet werden muss

3) Schreiben Sie die Fehlerbehandlungsmethode, Instanziierung Methode und Rückruffunktion des Ajax-Objekts auf der Seite, auf der Ajax angewendet wird

Wenn wir einen Teil des JavaScript-Skriptcodes in eine JSP- oder HTML-Seite schreiben, können wir JavaScript-Skriptcode direkt in die aktuelle Seite schreiben. Sie können auch eine andere Möglichkeit verwenden: Erstellen Sie eine JS-Datei und fügen Sie diese JS-Datei dann in die von uns geschriebene JSP- oder HTML-Seite ein. Das Beispiel lautet wie folgt:

(1) Erstellen Sie eine separate JS-Datei und nennen Sie sie AjaxRequest.js , und schreiben Sie den Code, der zum Rekonstruieren von Ajax erforderlich ist, in diese Datei.

 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) Wenden Sie die folgenden Anweisungen auf der Seite an, auf der Ajax angewendet werden muss, einschließlich der in (1) erstellten JS-Datei.

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

(3) Schreiben Sie die Fehlerbehandlungsmethode und instanziieren Sie das Ajax-Objekt auf der Seite, auf der Ajax angewendet werden muss sind angewandte Methoden und Callback-Funktionen.

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

【Ähnliche Tutorial-Empfehlung:

AJAX-Video-Tutorial

】

Das obige ist der detaillierte Inhalt vonWas ist Ajax-Refactoring?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!