AJAX 前进后退 (RSH--Really Simple History)

最新推荐文章于 2024-11-05 20:44:39 发布

owen_008

最新推荐文章于 2024-11-05 20:44:39 发布

阅读量2.5k

点赞数

分类专栏： AJAX框架文章标签： ajax function javascript parameters xhtml prototype

本文链接：https://blog.csdn.net/owen_008/article/details/4556956

版权

AJAX框架专栏收录该内容

0 篇文章 0 订阅

订阅专栏

Prototype是一个简化AJAX开发的JS类库。
官方地址：http://prototype.conio.net/
中文介绍：https://compdoc2cn.dev.java.net/prototype/html/prototype.js.cn.html

dhtml history是一个以hash(也就是url中#的后面部分)为指针保存数据的JS类库
官方地址：http://codinginparadise.org/projects/dhtml_history/
中文介绍：http://www.matrix.org.cn/resource/article/43/43972_AJAX.html

Prototype可以帮我们更快速的开发ajax应用程序，但是ajax程序有一个缺点，由于页面不刷新，所以不能使用前进后退来浏览过去的数据。

dhtml_history则帮我们解决了这个难题。他通过结合window.location.hash和一个iframe来实现了记录ajax数据。
需要注意的是，从官方下载的包里，除了JS文件，还有一个很重要的文件，叫blank.html。这个文件在某些浏览器下是必须的，你必须放到你的应用程序的同一级目录下。

下面我给一个例子(注意看代码中的注释)：
index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<title>Ajax History</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="SurfChen" />
<script src="../scripts/prototype.js"></script>
<script src="../scripts/dhtmlHistory.js"></script>
<script type="text/javascript">
<!--
hash_num=0;//hash值，也就是url的#后面的字符串。可以用window.location.hash获得
function sendRequest()
{
 hash_num++;
 var p='hash='+hash_num;
 new Ajax.Request(//把p字符串以get请求发送到data.php,并且在完成后调用callbackOnComplete，
     'data.php',
     {
      method:'get',
      parameters:p,
      onComplete:callbackOnComplete
     }
    );
}
function callbackOnComplete(rn)//rn是xmlhttp请求成功后返回的对象
{
 $("data").innerHTML=rn.responseText;
 new_hash=hash_num;

 //给dhtmlHistory增加一个容器，以new_hash为指针保存返回的数据，并把hash改为#new_hash
 dhtmlHistory.add(new_hash,rn.responseText);
}

//初始化history
function historyInit()
{
        dhtmlHistory.initialize();

    //建立一个监听，当有回退或前进动作发生，这个监听函数将会执行
 dhtmlHistory.addListener(changeHistory);

 
 
}

//当有前进或后退动作发生，执行这个changeHistory
//current_hash 当前的hash
//v 当前hash下的值
function changeHistory(new_hash,v)
{
 $("data").innerHTML=v;
}
//-->
</script>
</head>
<body     οnlοad="historyInit();">
<input type="button" value="Go" οnclick="sendRequest();" />
<span id="data"></span>
</body>
</html>

data.php
<?php
echo 'hash:'.$_GET['hash'].rand(0,10);
?>

========================================

<html> 
<head> 
<script language="JavaScript" type="text/JavaScript">

var expectedHash = "";
function makeHistory(newHash) { 
window.location.hash = newHash; 
expectedHash = window.location.hash; 
return true;

function reportOptionValue() { 
var myForm = document.make_history;
var mySelect = myForm.change_year; 
return mySelect.options[mySelect.selectedIndex].value;
}

function setOptionValue(value) { 
var myForm = document.make_history;
var mySelect = myForm.change_year;
mySelect.options[value-1].selected = true;
return true;
}

function handleHistory() { 
if ( window.location.hash != expectedHash ) { 
expectedHash = window.location.hash; 
var newoption = expectedHash.substring(6);
setOptionValue( newoption ); 
} 
return true; 
}

function pollHash() { 
handleHistory();
window.setInterval("handleHistory()", 1000); 
return true; 
}
</script>
</head> 
<body language="JavaScript" οnlοad="return pollHash()"> 
<form name=make_history>
<select name=change_year οnchange="return makeHistory(reportOptionValue())"> 
<option value="year_1">Year 1</option> 
<option value="year_2">Year 2</option>
</select>
</form> 
</body>
</html>