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>