Ajax回退重新整理頁面問題的解決辦法_AJAX相關

Ajax 簡介：

AJAX即“Asynchronous Javascript And XML”（非同步JavaScript和XML），是指一種建立互動式網頁應用的網頁開發技術。

AJAX = 非同步 JavaScript和XML（標準通用標記語言 (SGML)的子集）。

AJAX 是一種用於建立快速動態網頁的技術。

通過在後台與伺服器進行少量資料交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。

傳統的網頁（不使用 AJAX）如果需要更新內容，必須重載整個網頁頁面。

存在問題

如果使用Firefox等瀏覽器訪問RMS網站時，我們可能會發現頁面之間的切換是通過AJAX非同步請求實現的，同時頁面的URL不會發生改變，雖然可以通過頁面上的按鈕通過AJAX非同步請求實現回退重新整理，但是對於瀏覽器前進和後退不能支援，每當重新整理與後退之後，頁面都會退到最開始的歡迎頁面。AJAX可以實現頁面的局部重新整理，可以做到非常好的資料載入效果，給使用者帶來非常良好的體驗，但是AJAX不能在瀏覽器的曆史會話中保留記錄，當你點開一個頁面，AJAX各種資料載入非常快捷，例如一個列表頁面可以用非同步載入來翻頁，但是如果使用者一不小心重新整理了頁面，那麼頁碼就得重新開始計算，一旦使用者改變了工作階段狀態（瀏覽器的前進、後退、重新整理），那麼AJAX就會丟失相關的資料。

傳統的AJAX存在如下的問題：

1、可以無重新整理改變頁面內容，但無法改變頁面URL

2、不能支援通過網址直接存取系統某一模組，必須進過點按操作

3、回退、重新整理必須開發人員自己第一，既給開發人員增加了工作量，又不符合使用者習慣

4、進而瀏覽器引入了onhashchange的介面，不支援的瀏覽器只能定時去判斷hash是否改變

5、但這種方式對搜尋引擎很不友好

使用技術

為瞭解決傳統ajax帶來的問題，HTML5裡引入了新的API，即：history.pushState,history.replaceState

可以通過pushState和replaceState介面操作瀏覽器曆史，並且改變當前頁面的URL。

pushState是將指定的URL添加到瀏覽器歷史裡，replaceState是將指定的URL替換當前的URL。

history.pushState(state, title, url)

將當前URL和history.state加入到history中，並把新的state和URL添加到當前。不會造成頁面重新整理。

state：與要跳轉到的URL對應的狀態資訊。

title：標題(現在是被忽略，未作處理)。

url：要跳轉到的URL地址，不能跨域。

history.replaceState(state, title, url)

history.replaceState()操作類似於history.pushState()，不同之處在於replaceState()方法會修改當前記錄條目而並非建立新的條目。

state：與要跳轉到的URL對應的狀態資訊。

title：標題(現在是被忽略，未作處理)。

url：要跳轉到的URL地址，不能跨域。

addEventListener(type, listener)
addEventListener是一個偵聽事件並處理相應的函數。

type：事件的類型。

listener：偵聽到事件後處理事件的函數。此函數必須接受 Event對象作為其唯一的參數，並且不能返回任何結果。

解決方案

由於AJAX無重新整理改變頁面內容的，所以頁面的URL始終是不變的，為了區分頁面上的各個不同內容，首先需要重新定義一下各個頁面的URL，因為RMS網站多使用$.post非同步請求，我們可以用URL記錄post請求的各個參數（請求地址、傳遞參數），當瀏覽器進行重新整理、後援動作時，根據URL記錄的資訊自動發送post請求，進入對應頁面，從而實現希望的功能。

定義URL文法：

已如下地址為例：

“http://localhost/rms_hold/index.php/Home/Index/loadHomePage#/rms_hold/index.php/Home/ResourceRequest/getRequestPage@apply_type=1&resource_name=ADM_BIZCARD!1”

“http://localhost/rms_hold/index.php/Home/Index/loadHomePage”是原先頁面的URL，如果在問題解決之前在RMS網站上進行任何點按操作，網址一直不會有任何變動。現在我們使用“#”分割網址，“#”之後就是我們所記錄的ajax請求“/rms_hold/index.php/Home/ResourceRequest/getRequestPage”是請求的地址，它由“#”與“@”分割，而在“@”與“！”之間的這是發向請求地址的各個參數，“apply_type=1”與“resource_name=ADM_BIZCARD”由“&”進行分割。

重新整理、回退監聽處理：

if (history.pushState) {window.addEventListener("popstate", function() {back_ajax_mod_url();back_ajax_post();if(location.href.indexOf("#")==-1){window.location.reload();}});back_ajax_mod_url();back_ajax_post();}

如以上代碼所示，window對象上提供了onpopstate事件，可以使用addEventListener方法監聽onpopstate事件，每當URL因為瀏覽器回退時都會對得到的URL在back_ajax_mod_url()與back_ajax_post()函數中進行解析、處理，而當瀏覽器重新整理時，根據history.pushState的傳回值不空，依然會對得到的URL在back_ajax_mod_url()與back_ajax_post()函數中進行解析、處理。

對外介面：

function back_ajax_mod_url(){var url_ajax=ajaxback_url.pop();var title ="Home | UniqueSoft RMS";if(url_ajax){history.pushState({ title: title }, title,location.href.split("#")[0] + "#"+ url_ajax);}}

介紹一下back_ajax_mod_url()函數，它與數組ajaxback_url組成對外介面，ajaxback_url是一個全域數組，用來存放需要加入到history中的URL，然後由back_ajax_mod_url()函數在無頁面重新整理的情況下將當前URL和history.state加入到history中。

$("#reportTable tbody").on("click", "trtd img[alt = 'Detail']",function() {var id = $(this).attr("business_leave_id");$.post("__MODULE__/ReportCenter/getReportDetailPage",{"report_name": "ADM_TRAVEL_REP","item_id": id,},function(data) {ajaxback_url.push("__MODULE__/ReportCenter/getReportDetailPage"+ "@" + "item_id=" + id + "&" +"report_name=ADM_TRAVEL_REP");$("#container").html(data);back_ajax_mod_url();});});

以上函數是RMS系統裡的一個AJAX非同步請求事件，會造成頁面無重新整理變化，加粗部分就是我們提供的對外介面，使用該介面後在history中會產生一條新的URL用來記錄達到該頁面的post方法。

URL解析處理器：

如下面函數所示back_ajax_post()為RMS系統的URL解析處理器，根據之前提到的URL文法，讀出頁面上改變內容的AJAX請求，並且自動發送AJAX請求，擷取需要的頁面

function back_ajax_post() {if (location.href.indexOf("#")!= -1) {var post_href =location.href.split("#")[1];if (location.href.indexOf("@")!= -1) {var post_url =post_href.split("@")[0];var post_params =post_href.split("@")[1];if(post_params.indexOf("!") != -1) {var post_page_index =post_params.split("!")[1];post_params =post_params.split("!")[0];};} else {var post_url = post_href;var post_params = "";var post_page_index = "";}var get_resource_href =location.href;if(get_resource_href.indexOf("!") != -1) {get_resource_href =get_resource_href.split("!")[0];};if(get_resource_href.indexOf("resource_name=") != -1) {var has_resource_name =get_resource_href.split("resource_name=")[1];var siderbar_index =has_resource_name;} else if(get_resource_href.indexOf("report_name=") != -1) {var has_resource_name =get_resource_href.split("report_name=")[1];var siderbar_index =has_resource_name.split("_REP")[0];};if (!post_page_index ||$("#personalInfo").length <= 0) {if (!post_url) {window.location.href ="__MODULE__";}$.ajax({type: "post",url: post_url,data: post_params,success: function(res){$('#pageContainer').html(res);if(post_page_index) {location.href= location.href.split("!")[0] + "!1";} else {location.href= location.href.split("!")[0];};},error: function(res) {window.location.href = "__MODULE__";},});}//for request page next&backif (post_page_index) {var previous_index =$(".navbar,.steps .navbar-innerul.row-fluid").find("li.active").find(".number").text();var differ =post_page_index - previous_index;lock_for_req_back_next =1;if (differ > 0) {for (var i = 0; i <differ; a="" bar="" differ="-differ;" else="" for="" i="0;" if="" li="" lock_for_req_back_next="0;" resource_name="$(this).attr("href").split("resource_name=")[1];" side="" siderbar_index="=" ul.page-sidebar-menuli="" ul.sub-menu="" var=""> span.arrow').addClass('open');$(this).parents('.sub-menu').show();});$(this).parent('li').parents('li').addClass('active open');return false;} else {$('.sub-menu').hide();}});$("ul.page-sidebar-menuli").not(".open").find("ul").hide();}}</differ;>

以上所述是小編給大家介紹的Ajax回退重新整理頁面問題的解決辦法的相關知識，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！