Ajax回退刷新頁面問題怎么解決
本篇內(nèi)容介紹了“Ajax回退刷新頁面問題怎么解決”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
黃陂網(wǎng)站建設公司創(chuàng)新互聯(lián)建站,黃陂網(wǎng)站設計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為黃陂上千家提供企業(yè)網(wǎng)站建設服務。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設公司要多少錢，請找那個售后服務好的黃陂做網(wǎng)站的公司定做！
Ajax 簡介：
AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創(chuàng)建交互式網(wǎng)頁應用的網(wǎng)頁開發(fā)技術。
AJAX = 異步 JavaScript和XML（標準通用標記語言的子集）。
AJAX 是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術。
通過在后臺與服務器進行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進行更新。
傳統(tǒng)的網(wǎng)頁（不使用 AJAX）如果需要更新內(nèi)容，必須重載整個網(wǎng)頁頁面。
存在問題
如果使用Firefox等瀏覽器訪問RMS網(wǎng)站時，我們可能會發(fā)現(xiàn)頁面之間的切換是通過AJAX異步請求實現(xiàn)的，同時頁面的URL不會發(fā)生改變，雖然可以通過頁面上的按鈕通過AJAX異步請求實現(xiàn)回退刷新，但是對于瀏覽器前進和后退不能支持，每當刷新與后退之后，頁面都會退到最開始的歡迎頁面。AJAX可以實現(xiàn)頁面的局部刷新，可以做到非常好的數(shù)據(jù)加載效果，給用戶帶來非常良好的體驗，但是AJAX不能在瀏覽器的歷史會話中保留記錄，當你點開一個頁面，AJAX各種數(shù)據(jù)加載非?？旖荩缫粋€列表頁面可以用異步加載來翻頁，但是如果用戶一不小心刷新了頁面，那么頁碼就得重新開始計算，一旦用戶改變了會話狀態(tài)（瀏覽器的前進、后退、刷新），那么AJAX就會丟失相關的數(shù)據(jù)。
傳統(tǒng)的AJAX存在如下的問題：
1、可以無刷新改變頁面內(nèi)容，但無法改變頁面URL
2、不能支持通過網(wǎng)址直接訪問系統(tǒng)某一模塊，必須進過點按操作
3、回退、刷新必須開發(fā)人員自己第一，既給開發(fā)人員增加了工作量，又不符合用戶習慣
4、進而瀏覽器引入了onhashchange的接口，不支持的瀏覽器只能定時去判斷hash是否改變
5、但這種方式對搜索引擎很不友好
使用技術
為了解決傳統(tǒng)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對應的狀態(tài)信息。
title：標題(現(xiàn)在是被忽略，未作處理)。
url：要跳轉到的URL地址，不能跨域。
history.replaceState(state, title, url)
history.replaceState()操作類似于history.pushState()，不同之處在于replaceState()方法會修改當前歷史記錄條目而并非創(chuàng)建新的條目。
state：與要跳轉到的URL對應的狀態(tài)信息。
title：標題(現(xiàn)在是被忽略，未作處理)。
url：要跳轉到的URL地址，不能跨域。
addEventListener(type, listener)
addEventListener是一個偵聽事件并處理相應的函數(shù)。
type：事件的類型。
listener：偵聽到事件后處理事件的函數(shù)。此函數(shù)必須接受 Event對象作為其唯一的參數(shù)，并且不能返回任何結果。
解決方法
由于AJAX無刷新改變頁面內(nèi)容的，所以頁面的URL始終是不變的，為了區(qū)分頁面上的各個不同內(nèi)容，首先需要重新定義一下各個頁面的URL，因為RMS網(wǎng)站多使用$.post異步請求，我們可以用URL記錄post請求的各個參數(shù)（請求地址、傳遞參數(shù)），當瀏覽器進行刷新、回退操作時，根據(jù)URL記錄的信息自動發(fā)送post請求，進入對應頁面，從而實現(xiàn)希望的功能。
定義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網(wǎng)站上進行任何點按操作，網(wǎng)址一直不會有任何變動?，F(xiàn)在我們使用“#”分割網(wǎng)址，“#”之后就是我們所記錄的ajax請求“/rms_hold/index.php/Home/ResourceRequest/getRequestPage”是請求的地址，它由“#”與“@”分割，而在“@”與“！”之間的這是發(fā)向請求地址的各個參數(shù)，“apply_type=1”與“resource_name=ADM_BIZCARD”由“&”進行分割。
刷新、回退監(jiān)聽處理：
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方法監(jiān)聽onpopstate事件，每當URL因為瀏覽器回退時都會對得到的URL在back_ajax_mod_url()與back_ajax_post()函數(shù)中進行解析、處理，而當瀏覽器刷新時，根據(jù)history.pushState的返回值不空，依然會對得到的URL在back_ajax_mod_url()與back_ajax_post()函數(shù)中進行解析、處理。
對外接口：
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()函數(shù)，它與數(shù)組ajaxback_url組成對外接口，ajaxback_url是一個全局數(shù)組，用來存放需要加入到history中的URL，然后由back_ajax_mod_url()函數(shù)在無頁面刷新的情況下將當前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();
});
});以上函數(shù)是RMS系統(tǒng)里的一個AJAX異步請求事件，會造成頁面無刷新變化，加粗部分就是我們提供的對外接口，使用該接口后在history中會產(chǎn)生一條新的URL用來記錄達到該頁面的post方法。
URL解析處理器：
如下面函數(shù)所示back_ajax_post()為RMS系統(tǒng)的URL解析處理器，根據(jù)之前提到的URL語法，讀出頁面上改變內(nèi)容的AJAX請求，并且自動發(fā)送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回退刷新頁面問題怎么解決”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！
網(wǎng)站欄目：Ajax回退刷新頁面問題怎么解決
網(wǎng)頁路徑：http://muchs.cn/article32/iepdsc.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導航、定制網(wǎng)站、手機網(wǎng)站建設、網(wǎng)站維護、微信小程序、App開發(fā)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)
- 集寧品牌網(wǎng)站建設解決方案 2020-11-24
- 【網(wǎng)站優(yōu)化】網(wǎng)站排名下滑解決方案分析 2022-05-02
- 一個完整人性化后臺多角色網(wǎng)站系統(tǒng)權限解決方案需要考慮的問題 2023-03-04
- 網(wǎng)站建設排名不穩(wěn)定的原因和執(zhí)行的解決方案 2016-05-19
- 電腦不同分辨率顯示網(wǎng)站的解決方案 2020-05-16
- 機械行業(yè)網(wǎng)絡營銷解決方案 2022-06-22
- 外貿(mào)網(wǎng)站建設解決方案及注意事項 2022-11-23
- 旅游、交通行業(yè)網(wǎng)站建設解決方案 2013-11-26
- 北京網(wǎng)站優(yōu)化公司 搜索引擎優(yōu)化解決方案 2021-04-15
- 網(wǎng)站SEO降權恢復周期與解決方案 2023-05-03
- 行業(yè)門戶網(wǎng)站建設解決方案 2014-02-16
- seo人員如何制定網(wǎng)站解決方案？ 2015-01-23