动易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，就可以避免冲突
------------------------------------------------------------