AJAX的重新整理和前進後退問題解決
阿新 • • 發佈:2019-02-10
使用AJAX開發分頁功能的時候,使用者跳轉到第5頁,但是重新整理以後又顯示第一頁了,能不能重新整理後還顯示第5頁?還有能不能用瀏覽器的前進後退按鈕來瀏覽AJAX歷次的變化。
因為Javascript對dom的操作是不持久化的,重新整理後就恢復原狀,而且也不儲存歷史記錄,也就無法前進後退來檢視歷史了。但是可以採用“位址列加hash”技術來解決。
位址列中敲入“頁面地址#aaa”就表示跳轉到“頁面地址 ”的“aaa”這個頁內錨點(英文叫做hash)。只要改變“aaa”這個錨點內容,瀏覽器就認為URL變化,也就會放入瀏覽歷史,這樣前進後退問題就解決了。我們只要把不同的AJAX狀態通過不同的hash寫到位址列就可以了,當頁面載入的時候檢測是否有hash值,有的話就讀取hash進行相應的ajax還原操作。
location.hash可以取到或者設定hash的值,當hash改變的時候window.onhashchange事件會被觸發,但是頁面載入的時候哪怕有hash值,onhashchange事件也不會觸發,因此需要在onload事件中也讀取hash進行同樣的處理,保證重新整理頁面也能恢復ajax的頁面顯示。
下面是例子程式碼,為了簡單的突出問題,這裡沒有使用ajax,只是通過dom來修改頁面狀態。點選文字框,文字框的內容會加1(注意觀察位址列),重新整理頁面後值也還是增加後的值,而且頁面可以前進後退。
程式碼如下: [html] view plain copy print?
因為Javascript對dom的操作是不持久化的,重新整理後就恢復原狀,而且也不儲存歷史記錄,也就無法前進後退來檢視歷史了。但是可以採用“位址列加hash”技術來解決。
位址列中敲入“頁面地址#aaa”就表示跳轉到“頁面地址 ”的“aaa”這個頁內錨點(英文叫做hash)。只要改變“aaa”這個錨點內容,瀏覽器就認為URL變化,也就會放入瀏覽歷史,這樣前進後退問題就解決了。我們只要把不同的AJAX狀態通過不同的hash寫到位址列就可以了,當頁面載入的時候檢測是否有hash值,有的話就讀取hash進行相應的ajax還原操作。
location.hash可以取到或者設定hash的值,當hash改變的時候window.onhashchange事件會被觸發,但是頁面載入的時候哪怕有hash值,onhashchange事件也不會觸發,因此需要在onload事件中也讀取hash進行同樣的處理,保證重新整理頁面也能恢復ajax的頁面顯示。
下面是例子程式碼,為了簡單的突出問題,這裡沒有使用ajax,只是通過dom來修改頁面狀態。點選文字框,文字框的內容會加1(注意觀察位址列),重新整理頁面後值也還是增加後的值,而且頁面可以前進後退。
程式碼如下: [html] view plain copy print?
-
<!DOCTYPE html
- <htmlxmlns="http://www.w3.org/1999/xhtml">
- <head>
- <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
- <title></title>
- <scriptsrc="jquery-1.4.1.js"></script>
- <scripttype="text/javascript">
-
var processHash = function () {
- var hashStr = location.hash.replace("#", "");
- if (hashStr) $("#txt1").val(hashStr);
- }
- $(function () {
- $("#txt1").click(function () {
- var i = parseInt($("#txt1").val());
- i++;
- $("#txt1").text(i);
- location.hash = "#" + i;
- });
- window.onload = processHash;
- window.onhashchange = processHash;
- });
- </script>
- </head>
- <body>
- <inputtype="text"id="txt1"value="1"/>
- </body>
- </html>