動易AJAX分頁標簽詳細制作教程(動畫版)

呈現效果：
用戶點擊分頁后，清空容器中的數據，加載loading動畫，Ajax取數據，呈現數據。
(多了個清空容器和加載動畫的操作)
------------------------------------------------------------
部署說明：
1.把普通標簽改造為AJAX標簽，只需在標簽中選中“允許AJAX訪問”即可。
2.將分頁標簽的鏈接加入錨點或者去除a鏈接應用onclick事件，防止跳轉到頁首。
3.引入Common.js文件(內部參數需要根據情況修改)。
4.引入AJAX頁面刷新腳本(內部參數需要根據情況修改)。
5.部署完畢。
------------------------------------------------------------
HTML部分：

<script type="text/javascript" src="JS/Common.js" ></script>

   <div>
       <span id="itemlist">    <!-- 數據容器，注意ID -->
       {PE.Label id="AV-21_ajax分頁" Titlelen="30" page="true" pagesize="8" urlpage="true" /}
       </span>
   </div>
   
   <div id="urlpage"></div>    <!-- 分頁標簽容器,注意ID -->
------------------------------------------------------------
Ajax頁面更新腳本：

<script type="text/javascript">

function changepage(pagenum,sourcename,spanname)
{
   var x = new AjaxRequest('XML','itemlist');  //itemlist 為數據容器ID
   x.labelname = sourcename;
   x.currentpage = pagenum;
   x.para = ['Titlelen=30', 'page=true', 'pagesize=8','currentPage='+pagenum];  
//根據分頁標簽中的參數對這里進行修改
   x.post('updatelabel', '/ajax.aspx', function(s) {
       var xml = x.createXmlDom(s);
       var plstr = "";
       for (var i=0; i < xml.getElementsByTagName("body")[0].childNodes.length; i++)    
       {
           plstr += xml.getElementsByTagName("body")[0].childNodes.nodeValue;
       }
       document.getElementById("itemlist").innerHTML = plstr;  
//itemlist 為數據容器ID
       updatepage(spanname, sourcename, xml);
   });
}
function updatepage(spanname, sourcename, xml)
{
   if(parseInt(xml.getElementsByTagName("total")[0].firstChild.data) > 0)
   {
       var x = new AjaxRequest('XML');
       x.labelname = spanname;
       x.sourcename = sourcename;
       x.total = xml.getElementsByTagName("total")[0].firstChild.data;
       x.currentpage = xml.getElementsByTagName("currentpage")[0].firstChild.data;
       x.pagesize = xml.getElementsByTagName("pagesize")[0].firstChild.data;
       x.post('updatepage', '/ajax.aspx', function(s) {
           var xml = x.createXmlDom(s);
           if(document.getElementById("urlpage") != null)
           {
               var plstr = "";
               for (var i=0; i < xml.getElementsByTagName("body")[0].childNodes.length; i++)    
               {
                   plstr += xml.getElementsByTagName("body")[0].childNodes.nodeValue;
               }
               document.getElementById("urlpage").innerHTML = plstr;  
//urlpage 為分頁標簽容器ID
           }
   });
   }
}
 (function() {
     changepage(1, 'AV-21_ajax分頁', 'JS_基本風格');  
//根據情況修改參數
   })();
   
</script>
------------------------------------------------------
Common.js文件(只列出需要修改的部分)

/* XMLHTTP狀態顯示字符 */
/* 如果其它AJAX應用受到Loading動畫影響，需根據情況進行修改。 */
/* 動畫的具體呈現效果請自行添加樣式*/
var xml_http_building_link =
'<div><img src="loading.gif" alt="loading" /><p>Loading Now! Please Wait...</p></div>';
var xml_http_sending =
'<div><img src="loading.gif" alt="loading" /><p>Loading Now! Please Wait...</p></div>';
var xml_http_loading =
'<div"><img src="loading.gif" alt="loading" /><p>Loading Now! Please Wait...</p></div>';
var xml_http_data_in_processed =
'<div><img src="loading.gif" alt="Loading" /><p>Loading Now! Please Wait...</p></div>';
var xml_http_load_failed =
'<div><img src="error.gif" alt="Error" /><p>Oops!Service Error! The Code is:[err:errcode].</p><p style="color:red;font-size:14px;">Please Check It!</p></div>';
------------------------------------------------------------
Tips:
Common.js中的$和JQuery庫有$沖突，建議更名。我系統中如果不更改，評論就會失敗。
例如：function $  更改為function $jq，就可以避免沖突
------------------------------------------------------------