아약스 리팩토링이란 무엇인가

ajax 재구성은 소프트웨어의 기존 기능을 변경하지 않고 프로그램 코드를 조정하고, 프로그램의 디자인 패턴과 아키텍처를 보다 합리적으로 만들고, 소프트웨어의 확장성과 유지 관리성을 향상시켜 소프트웨어의 품질과 성능을 향상시키는 것을 의미합니다. Ajax의 구현은 주로 XMLHttpRequest 객체에 의존합니다. 이 객체의 인스턴스는 이벤트 처리가 완료된 후 삭제되므로 호출해야 할 때 다시 빌드해야 합니다.

이 기사의 운영 환경: windows10 시스템, javascript1.8.5&&html5 버전, Dell G3 컴퓨터.

Ajax 리팩토링이란

리팩토링은 소프트웨어의 기존 기능을 변경하지 않고 프로그램 코드를 조정하여 소프트웨어의 디자인 패턴과 아키텍처를 보다 합리적으로 개선하는 것입니다. 확장성과 유지관리성.

Ajax의 핵심 개체는 XMLHttpReguest입니다. 이는 Ajax를 통해 서버와 상호 작용할 때 XMLHttpRequest 개체를 빌드해야 함을 의미합니다.

그러나 페이지가 Ajax를 통해 서버와 상호 작용할 때 XMLHttpReguest 개체는 상호 작용 후에 삭제됩니다.

그래서 우리 페이지는 다시 Ajax를 통해 서버와 상호 작용하므로 XMLHttpRequest 객체를 다시 빌드해야 합니다.

그러면 XMLHttpReguest 개체를 생성할 때 브라우저의 호환성을 고려해야 하므로 XMLHttpReguest 생성도 매우 번거롭고 브라우저 유형에 따라 다른 방식으로 생성해야 합니다.

그래서 Ajax 기술을 여러 페이지에 적용하면 이 객체를 여러 페이지에 생성해야 하는데, 이는 OO(객체 지향 스타일, 코드 재사용)를 반영하지 않고, 객체 지향은 코드 재사용을 옹호하므로 일반적으로 XMLHttpReguest를 캡슐화합니다. 객체 및 Ajax 리팩토링을 통해 Ajax 요청을 처리하기 위한 몇 가지 일반적인 방법을 사용하므로 코드를 작성할 때 이를 직접 참조할 수 있습니다. 객체를 사용하면 코드 재사용이 가능하고 객체 생성 시간이 절약됩니다.

Ajax 리팩토링 단계

1) AjaxRequest.js라는 별도의 JS 파일을 분리하고 이 파일에 리팩토링을 작성합니다. Ajax에 필요한 코드

2) Ajax를 적용해야 하는 페이지에 방금 생성한 AjaxRequest.js 파일을 포함합니다

3) 오류 처리 방법, 인스턴스화 방법 작성 그리고 Ajax가 적용된 페이지의 Ajax 객체에 대한 콜백 기능

jsp나 html 페이지에서 자바스크립트 스크립트 코드의 일부를 작성하면 현재 페이지에 바로 자바스크립트 스크립트 코드를 작성할 수 있습니다. 다른 방법을 사용할 수도 있습니다. js 파일을 만든 다음 이 js 파일을 우리가 작성한 jsp 또는 html 페이지에 삽입합니다. 예는 다음과 같습니다.

(1) 별도의 JS 파일을 만들고 이름을 AjaxRequest.js로 지정합니다. , 그리고 이 파일에 Ajax를 재구성하는 데 필요한 코드를 작성합니다.

 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) (1)에서 생성한 JS 파일을 포함하여 Ajax를 적용해야 하는 페이지에 다음 명령문을 적용합니다.

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

(3) Ajax가 적용되는 페이지에서 오류 처리 방법을 작성하고 Ajax 객체를 인스턴스화합니다. 적용된 메소드와 콜백 함수입니다.

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

【관련 튜토리얼 추천:

AJAX 동영상 튜토리얼

】

위 내용은 아약스 리팩토링이란 무엇인가의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!