第一次写博客,并且斗胆发表技术类文章，请大家不要见笑，有写的失败或雷同的地方请大家扔砖头敲我吧！ 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 else40 {41 document.getElementById('Back').disabled='disabled';42 }43 if(hashNO<(hashList.length-1))44 {45 document.getElementById('Next').disabled='';46 }47 else48 {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 <!-- 9 //页面装载完后,通过浏览器的Hash初始化你的Ajax程序。10 function window.onload()11 {12 urlCode();13 }14 //我用下面这个方法来模拟AJAX回调不同的模块。15 function imitateAjax(mode)16 {17 switch(mode)18 {19 case "home":20 document.getElementById('divAjax').innerHTML="你现在调用的是首页模块";21 break;22 case "news":23 document.getElementById('divAjax').innerHTML="你现在调用的是新闻模块";24 break;25 case "photo":26 document.getElementById('divAjax').innerHTML="你现在调用的是图片模块";27 break;28 case "music":29 document.getElementById('divAjax').innerHTML="你现在调用的音乐是模块";30 break;31 case "msgList1":32 document.getElementById('divAjax').innerHTML="你现在调用的是留言列表的第 1 页<br /><br /><span>上一页33 34 </span> <span style='cursor:hand;' onclick=addHash('msgList2')>下一页</span>";35 break;36 case "msgList2":37 document.getElementById('divAjax').innerHTML="你现在调用的是留言列表的第 2 页<br /><br /><span 38 39 style='cursor:hand;' onclick=addHash('msgList1')>上一页</span> <span style='cursor:hand;' 40 41 onclick=addHash('msgList3')>下一页</span>";42 break;43 case "msgList3":44 document.getElementById('divAjax').innerHTML="你现在调用的是留言列表的第 3 页<br /><br /><span 45 46 style='cursor:hand;' onclick=addHash('msgList2')>上一页</span> <span>下一页</span>";47 break;48 }49 }50 -->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>
文章就写到这里了，小弟我是菜鸟，望各位大哥多多指教，如果有看不明白的地方就请大家给我留言吧！http://www.cnblogs.com/aiqingayu/archive/2006/10/24/538653.html
