ajaxリファクタリングとは何ですか

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) 作成したばかりの AjaxRequest.js ファイルをAjax を適用する必要があるページ

3) Ajax を使用するページに、Ajax オブジェクトのエラー処理メソッド、インスタンス化メソッド、コールバック関数を記述します。

jsp または html ページに、 JavaScript スクリプト コードを作成すると、現在のページで使用できるようになります。 JavaScript スクリプト コードを直接そのページに記述します。別の方法を使用することもできます。js ファイルを作成し、この js ファイルを作成した jsp または html ページに導入します。

例は次のとおりです。

(1) AjaxRequest.js という名前の別の 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 ビデオ チュートリアル]

以上がajaxリファクタリングとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。