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

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

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

   HistoryStack.prototype.setCookie=function(name,value)
{
　varcookie_str=name+"="+escape(value);
　document.cookie=cookie_str;
};

HistoryStack.prototype.getCookie=function(name)
{
　if(!name)return'';
　varraw_cookies,tmp,i;
　varcookies=newArray();
　raw_cookies=document.cookie.split(';');
　for(i=0;i＜raw_cookies.length;i++){
tmp=raw_cookies[i].split('=');
cookies[tmp[0]]=unescape(tmp[1]);
　}
　if(cookies[name]!=null){
returncookies[name];
　}else{
return'';
　}
};
定义了管理任何cookie的方法之后，可以编写另外两个类专门处理历史堆栈的类。save()方法将堆栈转化成字符串并保存到cookie中，load()重新将字符串解析成用于管理历史堆栈的数组（参见清单6）。

清单6.save()和load()方法

   HistoryStack.prototype.save=function()
{
　this.setCookie('CHStack',this.stack.toString());
　this.setCookie('CHCurrent',this.current);
};

HistoryStack.prototype.load=function()
{
　vartmp_stack=this.getCookie('CHStack');
　if(tmp_stack!=''){
this.stack=tmp_stack.split(',');
　}

　vartmp_current=parseInt(this.getCookie('CHCurrent'));
　if(tmp_current＞=-1){
this.current=tmp_current;
　}
};

测试类

可以用简单的HTML页面和一些JavaScript来测试完成的类。测试页面将在上方显示历史记录按钮，只有活动的按钮是突出显示并且可以单击的。我们没有建立复杂的测试应用程序，该页面在每次单击链接时仅仅生成随机数。这些数字就是记录到历史堆栈中的事件。堆栈也在页面上显示，指针标记的当前记录用粗体显示。

清单7.测试历史堆栈的简单HTML页面

   ＜html＞
＜head＞
＜title＞＜/title＞
＜/head＞

＜body＞

＜divid="historybuttons"＞＜/div＞
＜div＞
＜ahref="#"＞AddRandom
Resource＜/a＞
＜/div＞
＜divid="output"style="margin-top:40px;"＞＜/div＞

＜/body＞
＜/html＞
在该HTML页面的头部需要添加清单8所示的JavaScript代码。这段代码首先实例化一个新的历史堆栈对象，并载入可能已经保存到浏览器cookie中的所有数据。

我们定义了四个do_*()函数，这些事件处理程序将添加到后退、前进和刷新按钮的链接中，此外还有AddRandomResource链接，如清单7所示。

display()函数检查历史记录对象的当前状态，并为历史记录按钮生成HTML。它还生成历史记录中存储的项目列表。

清单8.集成历史记录类和测试页面的JavaScript

   ＜scripttype="text/javascript"src="history.js"＞＜/script＞
＜scripttype="text/javascript"＞

varmyHistory=newHistoryStack();
myHistory.load();

functiondo_add()
{
　varnum=Math.round(Math.random()*1000);
　myHistory.addResource(num);
　display();
　returnfalse;
}

functiondo_back()
{
　myHistory.go(-1);
　display();
}

functiondo_forward()
{
　myHistory.go(1);
　display();
}

functiondo_reload()
{
　myHistory.go(0);
}

functiondisplay()
{
　//Displayhistorybuttons
　varstr='';
　if(myHistory.hasPrev()){
str+='＜ahref="#"＞'
+'＜imgsrc=http://www.chinaz.com/Program/PHP/"icons/back_on.gif"alt="Back"
/＞＜/a＞';
　}else{
str+='＜imgsrc=http://www.chinaz.com/Program/PHP/"icons/back_off.gif"alt=""/＞';
　}
　if(myHistory.hasNext()){
str+='＜ahref="#"＞'
+'＜imgsrc=http://www.chinaz.com/Program/PHP/"icons/forward_on.gif"alt="Forward"/＞'
+'＜/a＞';
　}else{
str+='＜imgsrc=http://www.chinaz.com/Program/PHP/"icons/forward_off.gif"alt=""/＞';
　}
　str+='＜ahref="#"＞'
+'＜imgsrc=http://www.chinaz.com/Program/PHP/"icons/reload.gif"alt="Reload"
/＞＜/a＞';
　document.getElementById("historybuttons").innerHTML=str;

　//Displaythecurrenthistorystack,highlightingthecurrent
　//position.
　varstr='＜div＞History:＜/div＞';
　for(i=0;i＜myHistory.stack.length;i++){
if(i==myHistory.current){
　str+='＜div＞＜b＞'+myHistory.stack[i]+
'＜/b＞＜/div＞';
}else{
　str+='＜div＞'+myHistory.stack[i]+'＜/div＞';
}
　}
　document.getElementById("output").innerHTML=str;
}

window.onload=function(){
　display();
};
＜/script＞
运行该测试页面，可以看到历史记录按钮反映了历史堆栈的状态（见图2）。比如，第一次加载页面时，按钮都是灰色的。向堆栈中添加一些记录后，后退按钮就变成活动的了。如果在堆栈中回退，前进按钮就变亮了。还要注意的是，如果单击几次后退然后再单击Add，那么堆栈会被截掉一部分，新的事件被压入缩短的堆栈顶部。

  
图2.历史堆栈的测试页面在第1部分中，相册中的每个链接都是由get_table_link()和get_image_link()两个函数生成的。通过编辑这些函数，可以在调用Sajax函数之前让该函数先调用历史堆栈。清单9以粗体显示了这些变化。

清单9.get_table_link()和get_image_link()函数的更新版本

   functionget_table_link($title,$start,$step){
　$link="myHistory.addResource('table-$start-$step');"
　."x_get_table($start,$step,to_window);"
　."returnfalse;";
　return'＜ahref="#"＞'.$title.'＜/a＞';
}

functionget_image_link($title,$index){
　$link="myHistory.addResource('image-$index');"
　."x_get_image($index,to_window);"
　."returnfalse;";
　return'＜ahref="#"＞'.$title.'＜/a＞';
}
当应用程序进行Sajax调用时，to_window()作为回调函数在页面上重新生成HTML。在测试应用程序中，我们用函数display()（清单8）完成了两项任务：更新页面输出和更新历史记录按钮的状态。现在将在已有的to_window()函数体中添加下列函数调用：

   display_history_buttons();
该函数的定义如清单10所示。

清单10.display_history_buttons()函数

   functiondisplay_history_buttons()
{
　varstr='';
　if(myHistory.hasPrev()){
str+='＜ahref="#"＞
＜imgsrc=http://www.chinaz.com/Program/PHP/"icons/back_on.gif"alt="Back"/＞＜/a＞';
　}else{
str