Ajax 簡介:
AJAX即“Asynchronous Javascript And XML”(異步JavaScript和XML),是指一種創建交互式網頁應用的網頁開發技術。
AJAX = 異步 JavaScript和XML(標准通用標記語言的子集)。
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&back if (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回退刷新頁面問題的解決辦法的相關知識,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!