簡單的Ajax類

最近在做Web開發，前台頁面要求易操作，所以選擇了Js控制。

實現了不重新整理頁面查詢後台資料，進行捲軸分頁。

下面是自己封裝的一個比較簡單Ajax類 和 一個Js資料集

 

代碼：

//[1] Ajax類<br />function Ajax(){<br />this.xmlhttp = null; //XML對象<br />this.method = "post"; //執行的方法(post/get)<br />this.url = ""; //非同步呼叫的頁面地址<br /> this.responseText = ""; //非同步返回的響應字串<br /> this.responseXML = ""; //非同步返回的響應XML<br />this.failed = false; //建立對象錯誤標誌<br />this.synch = false; //同步false/非同步true<br />/******************** 事件 ************************/<br /> this.onLoading = function() {}; //正在發送請求<br /> this.onLoaded = function() {}; //已經接收到全部響應內容<br /> this.onInteractive = function() {}; //正在解析響應內容<br /> this.onCompletion = function() {}; //響應內容解析完成<br /> this.onError = function() {}; //非同步錯誤處理事件<br /> this.onFail = function() {}; //建立對象失敗處理世界</p><p> /******************** 重設事件 **********************/<br /> this.resetFunctions = function() {<br /> this.onLoading = function() {};<br /> this.onLoaded = function() {};<br /> this.onInteractive = function() {};<br /> this.onCompletion = function() {};<br /> this.onError = function() {};<br /> this.onFail = function() {};<br /> };</p><p> /******************* 函數 ********************/<br /> //初始化<br /> this.init = function(){<br /> if(window.XMLHttpRequest){<br /> this.xmlhttp = new XMLHttpRequest();<br /> }else if (window.ActiveXObject){<br /> try{this.xmlhttp = new ActiveXObject("Msxml4.XMLHTTP");}<br /> catch(e){<br /> try{this.xmlhttp = new ActiveXObject("Msxml3.XMLHTTP");}<br /> catch(e){<br /> try{this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");}<br /> catch(e){<br /> try{this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}<br /> catch(oc){this.failed=true;}<br /> }<br /> }<br /> }<br /> }<br /> };</p><p> //發送請求<br /> //@param data 發送的資料<br /> //@example send("id=1");<br /> this.send=function(data){<br /> var self=this;<br /> if(this.method=="post") {<br /> this.xmlhttp.open(self.method,self.url,self.synch);<br /> }else{<br /> this.xmlhttp.open(self.method,self.url+"?"+encodeURI(data),self.synch);<br /> }<br /> //添加訊息回應標頭<br /> this.xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8"); </p><p> //非同步回呼函數<br /> this.xmlhttp.onreadystatechange = function(){<br /> //對象未建立<br /> if (self.failed) {<br /> self.onFail();<br /> return;<br /> } </p><p> //訊息響應標誌<br /> switch (self.xmlhttp.readyState) {<br /> //（未初始化）還沒有調用send()方法<br /> case 0:{</p><p> break;<br /> }<br /> //（載入）已調用send()方法，正在發送請求<br /> case 1:{<br /> self.onLoading();<br /> break;<br /> }<br /> //（載入完成）send()方法執行完成，已經接收到全部響應內容<br /> case 2:{<br /> self.onLoaded();<br /> break;<br /> }<br /> //互動）正在解析響應內容<br /> case 3:{<br /> self.onInteractive();<br /> break;<br /> }<br /> //完成）響應內容解析完成，可以在用戶端調用了<br /> case 4:{<br /> switch(self.xmlhttp.status){<br /> case 200 : {<br /> self.responseText = self.xmlhttp.responseText;<br /> self.responseXML = self.xmlhttp.responseXML;<br /> break;<br /> }<br /> case 500 : {<br /> alert("500錯誤！");<br /> break;<br /> }<br /> }<br /> self.onCompletion();<br /> break;<br /> }<br /> }<br /> }; </p><p> if(this.method=="post"){<br /> this.xmlhttp.send(data); //發送請求<br /> }else{<br /> this.xmlhttp.send(); //發送請求<br /> }<br /> }; </p><p> this.abort=function(){<br /> this.xmlhttp.abort();<br /> } </p><p> this.close=function(){<br /> this.xmlhttp=null;<br /> }<br /> this.init();<br />}<br />//[2] 將responseXML封裝成資料集的類<br />function RecordSet(xml,recordName)<br />{<br />var records = xml.getElementsByTagName(recordName);<br />this.recordCount = records.length;<br />var current_index = 0;<br />var items = [];<br />if(this.recordCount > 0){<br />items = createFields(records[current_index]);<br />this.items = items;<br />}<br />//記錄集下移<br />this.next = function(){<br />if(current_index < this.recordCount -1){<br />current_index += 1;<br />items = createFields(records[current_index]);<br />this.items = items;<br />}<br />}<br />//記錄集上移<br />this.previous = function(){<br />if(current_index > 0){<br />current_index -= 1;<br />items = createFields(records[current_index]);<br />this.items = items;<br />}<br />}<br />//記錄集上移至第一個記<br />this.first = function(){<br />current_index = 0;<br />if(this.recordCount > 0){<br />items = createFields(records[current_index]);<br />this.items = items;<br />}<br />}<br />//記錄集上移至最後一個記錄<br />this.last = function() {<br />current_index = this.recordCount - 1;<br />if(this.recordCount > 0){<br />items = createFields(records[current_index]);<br />this.items = items;<br />}<br />}<br />this.nextto = function(rowindex) {<br /> current_index = rowindex;<br /> if(this.recordCount > 0 && current_index < this.recordCount){<br /> items = createFields(records[current_index]);<br />this.items = items;<br />}<br />}<br />}<br />// 構造記錄的Field數組<br />function createFields(record){<br />var items = new Array();<br />var childNodes = record.childNodes;<br />for(var i=0;i<childNodes.length;i++){<br />var item = new Object();<br />item.name = childNodes.item(i).tagName;<br />item.value = childNodes.item(i).text;<br />items[items.length] = item;<br />items[item.name] = item;<br />}<br />return items;<br />}<br /> 

（註：如有雷同純屬巧合）