apakah itu ajax refactoring

Pemfaktoran semula Ajax merujuk kepada meningkatkan kualiti dan prestasi perisian dengan melaraskan kod program tanpa mengubah fungsi sedia ada perisian, menjadikan model reka bentuk dan seni bina program lebih munasabah, dan meningkatkan kebolehskalaan perisian. dan kebolehselenggaraan; pelaksanaan Ajax bergantung terutamanya pada objek XMLHttpRequest Memandangkan contoh objek ini akan dimusnahkan selepas pemprosesan acara selesai, ia mesti dibina semula apabila ia perlu dipanggil.

Persekitaran pengendalian artikel ini: sistem windows10, versi javascript1.8.5&&&html5, komputer Dell G3.

Apakah itu ajax refactoring

Refactoring adalah untuk meningkatkan kualiti dan prestasi perisian dengan melaraskan kod program tanpa mengubah fungsi sedia ada perisian dan seni bina program ini lebih munasabah, meningkatkan kebolehskalaan dan kebolehselenggaraan perisian.

Objek teras Ajax ialah XMLHttpReguest, yang bermaksud bahawa apabila kita berinteraksi dengan pelayan melalui Ajax, kita mesti membina objek XMLHttpRequest.

Tetapi apabila halaman berinteraksi dengan pelayan melalui Ajax, objek XMLHttpReguest akan dimusnahkan selepas interaksi.

Jadi halaman kami berinteraksi dengan pelayan melalui Ajax sekali lagi, dan kami perlu membina semula objek XMLHttpRequest.

Kemudian apabila mencipta objek XMLHttpReguest, kita perlu mempertimbangkan keserasian pelayar, jadi penciptaan XMLHttpReguest juga sangat menyusahkan dan perlu dibuat dengan cara yang berbeza mengikut jenis pelayar yang berbeza.

Jadi, jika kita menggunakan teknologi Ajax pada banyak halaman, kita perlu mencipta objek ini dalam banyak halaman, yang tidak mencerminkan OO (gaya berorientasikan objek, Penggunaan Semula kod), penggunaan semula kod penyokong berorientasikan objek, jadi kami biasanya merangkum objek XMLHttpReguest dan beberapa kaedah biasa untuk memproses permintaan Ajax melalui pembinaan semula Ajax, maka kami boleh merujuk secara langsung objek ini untuk mencapai penggunaan semula kod dan menjimatkan masa penciptaan objek ini

Langkah pembinaan semula Ajax

1) Buat fail JS yang berasingan, bernama AjaxRequest.js, dan tulis kod yang diperlukan untuk membina semula Ajax dalam fail ini

2) Sertakan fail AjaxRequest.js yang baru dibuat

dalam halaman di mana Ajax perlu digunakan 3) Tulis kaedah pengendalian ralat, kaedah instantiasi dan fungsi panggil balik objek Ajax dalam halaman yang menggunakan Ajax

Dalam halaman jsp atau html, kami menulis Kod skrip JavaScript, maka kita boleh Tulis kod skrip JavaScript terus di dalamnya. Anda juga boleh menggunakan kaedah lain: buat fail js, dan kemudian perkenalkan fail js ini ke dalam halaman jsp atau html yang kami tulis

Contohnya adalah seperti berikut:

(1) Buat fail JS berasingan bernama AjaxRequest.js, dan tulis kod yang diperlukan untuk membina semula Ajax dalam fail ini.

 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) Gunakan pernyataan berikut dalam halaman di mana Ajax perlu digunakan, termasuk fail JS yang dibuat dalam (1)

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

(3) Dalam halaman di mana Ajax digunakan Tulis kaedah pengendalian ralat, kaedah untuk membuat instantiating objek Ajax, dan fungsi panggil balik.

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

[Cadangan tutorial berkaitan: Tutorial video AJAX]

Atas ialah kandungan terperinci apakah itu ajax refactoring. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!