ajax重構指的是在不改變軟體現有功能的基礎上,透過調整程式碼改善軟體的品質、效能,使其程式的設計模式和架構更合理,提高軟體的擴展性和維護性;Ajax的實作主要依賴XMLHttpRequest對象,由於該物件的實例在處理事件完成後就會被銷毀,所以在需要呼叫它的時候就要重新建構。
本文操作環境:windows10系統、javascript1.8.5&&html5版、Dell G3電腦。
重構(Refactoring)就是在不改變軟體現有功能的基礎上,透過調整程式碼改善軟體的品質、效能,使其程式的設計模式和架構更趨合理,提高軟體的擴充性和維護性。
Ajax的核心物件是XMLHttpReguest,也就是說我們透過Ajax與伺服器進行交互,就必須要建構XMLHttpRequest這個物件。
但是在頁面之中透過Ajax與伺服器進行交互,在交互之後XMLHttpReguest這個物件就會被銷毀。
所以我們頁面再次透過Ajax與伺服器進行交互,還需要重新的建置XMLHttpRequest這個物件。
那麼XMLHttpReguest這個物件的創建,我們需要考慮到瀏覽器的兼容性,所以說XMLHttpReguest的創建也是非常繁瑣的,需要根據不同瀏覽器的類型,來進行不同方式的創建。
那麼如果說我們在很多的頁面都應用到了Ajax這種技術,我們在很多的頁面當中都要來創建這個對象,這就體現不出OO(面向對象這種風格,代碼的重複利用),物件導向中提倡程式碼的重用,所以說我們通常會透過Ajax重構,來封裝XMLHttpReguest這個物件以及封裝一些對Ajax請求進行處理的通用方法,那麼我們在編寫程式碼的時候就可以直接來引用這個對象,從而來達到程式碼的重用,也節省了這個物件的創建時間
#Ajax重構步驟
1)創建一個單獨的JS文件,名字為AjaxRequest.js ,並且在該文件中編寫重構Ajax所需的代碼
2)在需要應用Ajax的頁面中包括剛剛創建的AjaxRequest.js文件
# 3)在應用Ajax的頁面中編寫錯誤處理的方法,實例化Ajax物件的方法和回呼函數
在jsp或html頁面之中我們寫一段JavaScript的腳本程式碼,那麼可以在目前的頁面當中直接編寫JavaScript腳本程式碼。也可以使用另外一種方式:建立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)在需要應用的Ajax的頁面中應用一下的語句包括(1)中創建的JS檔案
<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中文網其他相關文章!