首页 >> 编程知识

Ajax实现页面前进、后退功能、关于Ajax的几个误区

Ajax实现页面前进、后退功能



在做这个BLOG的过程中无时无刻被这个问题困扰着。。。。

 

　　想来想去大应该大致上有三种方法吧：

　　1、每次客户端在进行同服务器的交互的时候都必须改变URL的值，这样子的话就会让IE记录下了页面的历史状态，从而可以利用IE的前进后退来实现在，这样子应该是用户最能接受的方式吧，因为大家也都习惯的用浏览器的前进、后退功能了。

 

　　2、在客户端每次进行一次功能的进候用一个数组的记录下页面的信息，然后页面中加入前进、后退按纽来对数组中的信息进行读取，从而实现前进、后退功能，但我感觉这应该是最不可取的一种方式了，试想一下儿当一个用户在客户端进行好多操作时候的，这个用来记录页面信息的数组将会变的很大，这样子迟早会吃掉客户端的内存的，存在相当大危险性！

 

　　3、记录客户端每次调用的JAVASCRIPT方法的名称以及参数信息，同样形成一个数组，页面中加入前进、后退按纽来对这个数组进去读取，每次的前进、后退的操作都会重新回发一次服务器，我感觉这种方法是我想实现在，但对于这个数组的建立方法我还在琢磨。

　　在网上查了查，好像有对第一种方式的类库支持，但个人不是太喜欢那种方式，因为好像在就是在客户端每次对于URL的重写也会引起状态栏上的进度处刷那么一下儿的，呵呵，可能您会说刷一下儿又不回发服务器没有关系的，但就是看着不爽。唉，问题还是没有解决，还得继续学习呀，呵呵，下班了，明天继续想！


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="http://edu.itbulo.com/200610/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 页35                 break;
36             case "msgList2":
37                 document.getElementById('divAjax').innerHTML="你现在调用的是留言列表的第 2 页38 
39 style='cursor:hand;' onclick=addHash('msgList1')></span>";
42                 break;
43             case "msgList3":
44                 document.getElementById('divAjax').innerHTML="你现在调用的是留言列表的第 3 页45 
46 style='cursor:hand;' onclick=addHash('msgList2')></span>";
47                 break;
48          }
49     }
50     -->
51     </script>
52 </head>
53 54     <input id="Back" onclick="linkBack();" type="button" disabled="disabled" value="←" />  
55     <input id="Next" onclick="linkNext();" type="button" disabled="disabled" value="→" />
56     57     58     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     65     66     <div id='divAjax' style="background-color:#CCCCCC; height:100px;"></div>
67 </body>
68 </HTML>

文章就写到这里了，小弟我是菜鸟，望各位大哥多多指教



关于Ajax的几个误区



Ajax到底是什么？是一个并不太容易掌握，但可以增加网站交互性的方法？是Web2.0的基石？还是又一轮网络开发中的跟风？就像以前流行过的闪烁字体、“溅水”页(译者：Splash page －Flash动画或大图片做的网站的简介首页，往往有个“跳过简介”或“直接进入”的小按钮)、和使用圆角（译者：见YeeYan首页抬头，呵呵），只是这次动态性更强？

让我们看看有关Ajax的几个误区，拨开迷雾、发掘真相。

误区一：AJAX 是Asynchronous JavaScript and XML 的缩写。你写这个词时，应该用大写字母拼写，要不就显得很无知。

事实上，根据 Ajax 这个词的创造者Jesse James的介绍，Ajax可不仅仅是个缩写词。它是一系列技术用特定方式结合在一起的整体。它包括JavaScript，CSS, DOM 和运用 XMLHttpRequest 对象进行客户端与服务器间的数据传输。从服务器传到客户端的数据格式不一定是XML，还可以是 JSON（Javascript 中的对象）或其他数据格式。总之数据的传输是少量、递增的（译者：而不是传统的刷新整个页面）。所以，你要是想显摆一下自己是很懂的技术高手，用Ajax，而不是AJAX。您自己判断是不是想显摆自己吧。

误区二：看看Gmail和Google Map吧，Ajax 会让你的网站可用性更强。

事实上，使用Ajax 有可能让你的网站可用性增强，但也可能使你的网站变得让人可憎得难用。全新设计的Yahoo 电视节目列表就是这样一个反面教材。（译者：对新版Yahoo电视节目列表的反面评价主要认为Ajax的翻页功能让原来一页上列出所有电视节目的可用性变得更差，比如不能在一页中进行查找等，虽然翻页功能本身做得很漂亮。）

误区三：Ajax只是面子工程－－仅仅是表面上看着挺酷和视觉效果。

事实上，如果有正确的设计和实施，Ajax 的网络应用应该比传统的CGI类型的，以服务器端处理为主体的（如ASP.NET或Java Server Pages,JSP）网络应用具有更好的可扩展性，和让用户体验到更快的反应速度。如需要了解技术细节，请参见IBM的Bill Higgins写的有关Ajax和REST的第一部分（译者：欢迎翻译本文）。这是我的总结：传统的CGI类型的，以服务器端处理为主体的网络应用，客户端不保存（网络应用执行的）状态（Stateless），状态的保存完全由服务器实施（Stateful server）。这使得服务器产生的结果（译者：比如动态从数据库读取的数据）只能一次性使用而不能被缓存(cache)下来再利用。这破坏了REST构架中的可扩展性原则。而Ajax能将状态保存在客户端，从而实现常用资源，如重复使用的数据和源程序（译者：应该是指Javascript），可以有效被缓存和再利用。

误区四：Ajax 对于一般网络开发人员很难掌握

Ajax 确实不容易。但它的使用难度正在逐步降低。有若干因素造成Ajax的实施难度：对不同浏览器兼容性的支持，开发工具的不足，以及对开发人员思维方式转变的要求－－从过去以服务器端处理为主体的网络应用，转变到新的在客户端保存状态、逐步上传数据的应用。但由于Ajax越来越普及，很多开发工具和平台提供商以及开源软件开发者都在着力解决这一问题。这里列出若干对Ajax开发员有用的工具：Google 网络开发工具箱（给Java开发员的），dojo跨浏览器平台，script.aculo.us 长于提供视觉效果，以及用来调试JavaScript 程序、监视XMLHttpRequest的（FireFox插件）Firebug，等等。

误区五：Ajax 会破坏用户使用浏览器的体验（Ajax breaks the browser model）

确实，Ajax的应用有可能造成浏览器使用的问题，如破坏“返回键” 功能，让用户不知所以，让有残障的用户完全无法使用网站。但传统技术也可能产生类似问题：如使用框架（frames）或者Flash往往也会破坏“返回键” 功能；即便不用Ajax，糟糕的设计也能让一个网站把用户完全搞晕；即便使用最单纯的HTML也很难做到让有残障的用户顺利使用网站。这些是需要有意识地去注意和学习的方面，并不是仅存在于Ajax应用中的问题。

误区六：Ajax　是web2.0的关键组成部分

这要看你如何定义web2.0了。我认为web2.0和web1.0的区别主要在于社会层面而不是技术层面。从web1.0 到web2.0最重要的范式转变（paradigm shift）在于web2.0是双向的网络，可读写的网络和社会网络。而不是“让我们开家网上商店”的那个网络。按照这个定义，我们可以完全不用Ajax来实施web2.0。大多数博客不用Ajax；没有Ajax，维基百科照样能焕发它的异彩；社会化网络也不需要Ajax；Flickr 之所以吸引人是因为它是一个照片的社会化平台，而不是它使用的DHTML技术。
Ajax实现页面前进、后退功能、关于Ajax的几个误区(本文完毕)
下一篇：JS实现DataList实现CheckBox的全选/全消
上一篇：RegisterStartupScript 方法实例