结合AJAX的PHP开发之后退、前进和刷新(2)

2016-01-29 13:27 4 1 收藏

结合AJAX的PHP开发之后退、前进和刷新(2),结合AJAX的PHP开发之后退、前进和刷新(2)

【 tulaoshi.com - PHP 】

 编写类

  我们来看看历史堆栈中需要存储的数据或属性。前面已经讨论了堆栈(数组)和指针。stack_limit 属性可以防止因为数据过多而造成的 cookie 溢出(参见清单 1)。在实践中,我们希望在删除最老的记录之前能够存储 40-50 个事件。出于测试的目的,我们将该值设置为 15。

  清单 1. 历史堆栈的构造,包括类的属性

function HistoryStack ()
{
 this.stack = new Array();
 this.current = -1;
 this.stack_limit = 15;
}
  除了这三个属性外,该类还需要一些方法来添加元素、检索堆栈数据以及将堆栈数据保存到浏览器 cookie 中。首先看一看 addResource() 方法,它用于将记录压入历史堆栈的堆栈顶部(参见清单 2)。注意,如果堆栈的长度超过了 stack_limit,那么最老的记录将从堆栈中移走。

  清单 2. addResource() 方法,向历史堆栈的堆栈顶部添加记录

HistoryStack.prototype.addResource = function(resource)
{
 if (this.stack.length > 0) {
  this.stack = this.stack.slice(0, this.current + 1);
 }
 this.stack.push(resource);
 while (this.stack.length > this.stack_limit) {
  this.stack.shift();
 }
 this.current = this.stack.length - 1;
 this.save();
};
  给历史堆栈添加的以下三个方法用于从该类中获取信息(参见清单 3)。getCurrent() 返回堆栈指针指向的当前记录,这在堆栈中导航的时候非常有用。hasPrev() 和 hasNext() 方法返回 Boolean 值,告诉我们当前记录之前或之后是否还有记录,或者指示我们到达了堆栈顶部或堆栈尾部。这些方法很简单,但是确定后退和前进按钮的状态时很有用。

  清单 3. 历史堆栈定义的方法

HistoryStack.prototype.addResource = function(resource)
HistoryStack.prototype.getCurrent = function ()
{
 return this.stack[this.current];
};

HistoryStack.prototype.hasPrev = function()
{
 return (this.current > 0);
};

HistoryStack.prototype.hasNext = function()
{
 return (this.current < this.stack.length - 1 && this.current > -1);
};
  现在就可以向历史堆栈中添加记录并确定所在的位置了。但还是无法在堆栈中导航。清单 4 中定义的 go() 方法允许我们在堆栈中来回移动。通过传递正或负的增量就可以在堆栈中向前或向后移动。这与 Javascript 内置的 location.go() 方法类似。既然模仿内置功能,为何不根据这些已有的方法建立模型呢?

  此外,我们还可用该方法实现刷新功能。可以通过传递正或负的参数在堆栈中导航。传递零时则会刷新当前页面。

  清单 4. 历史堆栈的 go() 方法

HistoryStack.prototype.go = function(increment)
{
 // Go back...
 if (increment < 0) {
  this.current = Math.max(0, this.current + increment);

  // Go forward...
 } else if (increment > 0) {
  this.current = Math.min(this.stack.length - 1,this.current + increment);
  // Reload...
 } else {
  location.reload();
 }
 this.save();
};
  到目前为止,只要 HistoryStack 对象存在于当前文档中,这个新建的类就能正常工作。我们已经讨论了刷新页面会造成数据丢失的问题,现在来解决它。清单 5 中添加了在浏览器 cookie 中设置和访问数据的方法。所要做的只是设置每个 cookie 的名称值对。因为只需要在浏览器会话中保存 cookie,而不需要设置有效期。为了简化示例,我们不考虑其他参数,如 secure、domain 和 path。

  注意:如果该类需要对 cookie 做复杂处理,更明智的办法是使用完全独立的 cookie 管理类。建立和读取 cookie 有点偏离历史堆栈的正题。如果 Javascript 允许指定方法和属性访问的作用域,也可以将这些方法设成私有的。

  清单 5. 建立和访问浏览器 cookie 的方法

HistoryStack.prototype.setCookie = function(name, value)
{
 var cookie_str = name + "=" + escap

来源:https://www.tulaoshi.com/n/20160129/1490214.html

延伸阅读
标签: Web开发
在做这个BLOG的过程中无时无刻被这个问题困扰着。。。。 想来想去大应该大致上有三种方法吧: 1、每次客户端在进行同服务器的交互的时候都必须改变URL的值,这样子的话就会让IE记录下了页面的历史状态,从而可以利用IE的前进后退来实现在,这样子应该是用户最能接受的方式吧,因为大家也都习惯的用浏览器的前进、后退功能了。...
       Ajax刚入门不久,便写了一个Ajax+C#的留言本程序,在实际写程序中,渐渐发现了Ajax程序许多不成熟的地方,其中比较典型的就是页面的前进、后退与标签问题,因为Ajax整个程序是采用无刷新与服务器进行交互,所以导致了大部分浏览器的前进后退的功能按钮失效,当然标签功能也失去了意义,如果用Ajax开...
标签: Web开发
?php Header("Content-Type:text/html; charset=utf-8"); function AjaxPage($Total,$ListNub,$CurrentPage,$Url,$AjaxAction,$HalfPer='',$ViewId='') { //计算总页数 $totalPage = @ceil($Total/$ListNub); $total=$totalPage-1; $re=""; //echo $CurrentPage; $re .= ( $CurrentPage&nbs...
标签: Web开发
AJAX 客户端页面代码: index.html 代码如下: html body h1Ajax file upload sample/h1br/input id="uplaod" name="btn_send" type="button" value="上传测试"/ div id=result/div PRE class=js name="code"SCRIPT LANGUAGE=JavaScript // 上传函数 function btn_send.onclick() { data = "" spliter = "-------7d8d733180846" data...
标签: Web开发
大家都有在网站发表评论的经历,传统的发表过程无非是:发表-提交页面表单-等待刷新页面,这样在网络比较拥挤的时候,往往需要漫长的等待,今天介绍用PHP+Ajax实现页面无刷新发表评论,希望对初学ajax的PHPer有所帮助。   那么首先,我们需要一个基本的ajax开发框架,文件ajax.js就包含了这个框架,代码如下: 代码如下: va...

经验教程

389

收藏

13
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部