what is ajax refactoring

ajax refactoring refers to improving the quality and performance of the software by adjusting the program code, making the design pattern and architecture of the program more reasonable, and improving the scalability of the software without changing the existing functions of the software. and maintainability; the implementation of Ajax mainly relies on the XMLHttpRequest object. Since the instance of this object will be destroyed after the event processing is completed, it must be rebuilt when it needs to be called.

The operating environment of this article: windows10 system, javascript1.8.5&&html5 version, Dell G3 computer.

What is ajax refactoring

Refactoring is to improve the quality and performance of the software by adjusting the program code without changing the existing functions of the software. The design pattern and architecture of the program are more reasonable, improving the scalability and maintainability of the software.

The core object of Ajax is XMLHttpReguest, which means that when we interact with the server through Ajax, we must build the XMLHttpRequest object.

But when the page interacts with the server through Ajax, the XMLHttpReguest object will be destroyed after the interaction.

So our page interacts with the server through Ajax again, and we need to rebuild the XMLHttpRequest object.

Then when creating the XMLHttpReguest object, we need to consider the compatibility of the browser, so the creation of XMLHttpReguest is also very cumbersome and needs to be created in different ways according to different browser types.

So if we apply Ajax technology to many pages, we have to create this object in many pages, which does not reflect the OO (object-oriented style, code Reuse), object-oriented advocates code reuse, so we usually encapsulate the XMLHttpReguest object and some common methods for processing Ajax requests through Ajax refactoring, then we can Directly reference this object to achieve code reuse and save the creation time of this object

Ajax Refactoring Steps

1) Create a separate JS file, named AjaxRequest.js, and write the code required to reconstruct Ajax in this file

2) Include the AjaxRequest.js file just created in the page where Ajax needs to be applied

3) Write error handling methods, instantiation methods and callback functions of Ajax objects in the page that uses Ajax

In the jsp or html page, we write a JavaScript script code, then we can use it on the current page Write JavaScript script code directly in it. You can also use another method: create a js file, and then introduce this js file into the jsp or html page we wrote

The example is as follows:

(1) Create a separate JS file named AjaxRequest.js, and write the code required to reconstruct Ajax in this file.

 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) Apply the following statements in the page where Ajax needs to be applied, including the JS file created in (1)

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

(3) Write error handling in the page where Ajax is applied methods, methods for instantiating Ajax objects, and callback functions.

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

[Related tutorial recommendations: AJAX video tutorial]

The above is the detailed content of what is ajax refactoring. For more information, please follow other related articles on the PHP Chinese website!