服务器维护网站维护数据维护系统安全配置
专业定制网站企业建站一条龙、软件定制开发、系统集成
稳定虚机备案一条龙，稳定快捷通道
服务理念诚信守诺客户至上专业精神专心贯注

Ajax程序中,自己实现页面前进、后退、与标签功能(a.net2.0)

作者：黑客防线网安Ajax教程基地来源：黑客防线网安Ajax教程基地浏览次数：0

黑客防线网安网讯：　　第一次写博客,并且斗胆发表技术类文章，请大家不要见笑，有写的失败或雷同的地方请大家扔砖头敲我吧！　　 Ajax刚入门不久，便写了一个Ajax+C#的留言本程序，在实际写程序...

　　第一次写博客,并且斗胆发表技术类文章，请大家不要见笑，有写的失败或雷同的地方请大家扔砖头敲我吧！
　　 Ajax刚入门不久，便写了一个Ajax+C#的留言本程序，在实际写程序中，渐渐发现了Ajax程序许多不成熟的地方，其中比较典型的就是页面的前进、后退与标签问题，因为Ajax整个程序是采用无刷新与服务器进行交互，所以导致了大部分浏览器的前进后退的功能按钮失效，当然标签功能也失去了意义，如果用Ajax开发一个论坛的话，在堆积如山的帖子中必然有经典，但是我们在关闭浏览器后，就得重新从头开始寻找，这样实在是太痛苦了，所以为了弥补这个缺点，大家各出奇招，现在我向大家描述一下，在我的程序中，怎样实现这些功能。

　　我把实现功能的主要程序代码写在imitateHistory.js这个文件中

　　imitateHistory.js
　　 1 //定义一个全局数组
　　 2 var hashList = new Array();
　　 3 //定义一个全局变量，用来作为hash的编号
　　 4 var hashNO = 0;
　　 5 //初始化数组，将初次装载的页面的hash添加进数组
　　 6 hashList[0] = window.location.hash.replace('#','');
　　 7 //将Hash填加到数组
　　 8 function addHash(newHash)
　　 9 {
　　10     //这个判断是检测是否在点击后退按钮后，再点击了新的链接
　　11     if(hashNO!=(hashList.length - 1))
　　12     {
　　13         //删除此页标识以后的数组项
　　14     hashList.splice(hashNO+1,(hashList.length-(hashNO+1)));
　　15     }
　　16     hashList[hashList.length] = newHash;
　　17     //指向本页hash的编号
　　18     hashNO = hashList.length - 1;
　　19     //将Hash赋值给浏览器
　　20     makeHistory(newHash);
　　21     //根据浏览器的hash，加载数据
　　22     urlCode();
　　23     checkLinkButton();
　　24 }
　　25 //将Hash赋值给浏览器
　　26 function makeHistory(newHash)
　　27 {
　　28     window.location.hash = newHash;
　　29 }
　　30 //检测导航按钮状态（按钮是否可用）
　　31 function checkLinkButton()
　　32 {
　　33     if(hashList.length>1)
　　34     {
　　35         if(hashNO>0)
　　36         {
　　37             document.getElementById('Back').disabled='';
　　38         }
　　39         else
　　40         {
　　41             document.getElementById('Back').disabled='disabled';
　　42         }
　　43         if(hashNO<(hashList.length-1))
　　44         {
　　45             document.getElementById('Next').disabled='';
　　46         }
　　47         else
　　48         {
　　49             document.getElementById('Next').disabled='disabled';
　　50         }
　　51    }
　　52 }
　　53 //后退按钮onclick事件
　　54 function linkBack()
　　55 {
　　56     hashNO = hashNO - 1;
　　57     makeHistory(hashList[hashNO]);
　　58     //根据浏览器的hash，加载数据
　　59     urlCode();
　　60     checkLinkButton();
　　61 }
　　62 //前进按钮onclick事件
　　63 function linkNext()
　　64 {
　　65     hashNO = hashNO + 1;
　　66     makeHistory(hashList[hashNO]);
　　67     //根据浏览器的hash，加载数据
　　68     urlCode();
　　69     checkLinkButton();
　　70 }
　　71 //根据浏览器的hash，加载数据
　　72 function urlCode()
　　73 {
　　74     var TempHash = window.location.hash;
　　75     //下面的"home"、"msgList"只是做个标识，可以自己定义
　　76     //根据浏览器的hash，加载数据
　　77     switch(TempHash)
　　78     {
　　79     case"":
　　80         alert('调用你的首页');
　　81         break;
　　82     case"home":
　　83         alert('调用你的首页');
　　84         break;
　　85     }
　　86     //如果是留言本的页码标签
　　87     if (TempHash.substr(1,7)=="msgList")
　　88     {
　　89         var page;
　　90         //取得当前页码
　　91         page = window.location.hash.substr(8,window.location.hash.length);
　　92         alert('根据页码调用你的留言列表');
　　93     }
　　94     //当然如果是论坛的帖子标签，我想也只是对TempHash这个字符串多玩几个花样而已，具体我就不介绍了。
　　95 }

　　以上主要是用到JS数组的存储功能，用window.location.hash这个方法来操作浏览器的碎片标识。
　　下面是一个测试用的HTML文件，向大家描述一下具体的使用方法。
　　文件名test.html

test.html
　　 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
　　 2 <html xmlns="http://www.w3.org/1999/xhtml" >
　　 3 <head>
　　 4     <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
　　 5     <title>测试</title>
　　 6     <script language="javascript" src="imitateHistory.js" type="text/javascript"></script>
　　 7     <script language="javascript" type="text/javascript">
　　 8     
　　51     </script>
　　52 </head>
　　53 <body>
　　54     <input id="Back" onclick="linkBack();" type="button" disabled="disabled" value="←" />  
　　55     <input id="Next" onclick="linkNext();" type="button" disabled="disabled" value="→" />
　　56     <br />
　　57     <br />
　　58     <br />
　　59     <input onclick="addHash('home');" type="button" value="首页" />  
　　60     <input onclick="addHash('news');" type="button" value="新闻" />  
　　61     <input onclick="addHash('photo');" type="button" value="图片" />  
　　62     <input onclick="addHash('music');" type="button" value="音乐" />  
　　63     <input onclick="addHash('msgList1');" type="button" value="留言" />
　　64     <br />
　　65     <br />
　　66     <div id='divAjax' style="background-color:#CCCCCC; height:100px;"></div>
　　67 </body>
　　68 </html>