Ajax程序中,自己实现页面前进、后退、与标签功能(asp.net2.0) 2
点击次数：27 次 发布日期：2008-11-26 11:39:33 作者：源代码网
|
源代码网推荐 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="http://www.zzchn.com/edu/20080727/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 源代码网推荐 做人要厚道，请注明转自酷网动力(www.ASPCOOL.COM)。 源代码网推荐 源代码网供稿. |
