AJAX 前進後退 (RSH–Really Simple History)

最後更新：2018-12-04 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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);}//初始化historyfunction historyInit(){        dhtmlHistory.initialize();    //建立一個監聽，當有回退或前進動作發生，這個監聽函數將會執行 dhtmlHistory.addListener(changeHistory);  }//當有前進或後退動作發生，執行這個changeHistory//current_hash 當前的hash//v 當前hash下的值function changeHistory(new_hash,v){ $("data").innerHTML=v;}//--></script></head><body     onload="historyInit();"><input type="button" value="Go" onclick="sendRequest();" /><span id="data"></span></body></html>

data.php
<?phpecho '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" onload="return pollHash()"> 
<form name=make_history>
<select name=change_year onchange="return makeHistory(reportOptionValue())"> 
<option value="year_1">Year 1</option> 
<option value="year_2">Year 2</option>
</select>
</form> 
</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More