Ajax回退刷新頁(yè)面問(wèn)題的解決辦法

Ajax 簡(jiǎn)介：

AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)。

AJAX = 異步 JavaScript和XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的子集）。

AJAX 是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)。

通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新。

傳統(tǒng)的網(wǎng)頁(yè)（不使用 AJAX）如果需要更新內(nèi)容，必須重載整個(gè)網(wǎng)頁(yè)頁(yè)面。

存在問(wèn)題

如果使用Firefox等瀏覽器訪問(wèn)RMS網(wǎng)站時(shí)，我們可能會(huì)發(fā)現(xiàn)頁(yè)面之間的切換是通過(guò)AJAX異步請(qǐng)求實(shí)現(xiàn)的，同時(shí)頁(yè)面的URL不會(huì)發(fā)生改變，雖然可以通過(guò)頁(yè)面上的按鈕通過(guò)AJAX異步請(qǐng)求實(shí)現(xiàn)回退刷新，但是對(duì)于瀏覽器前進(jìn)和后退不能支持，每當(dāng)刷新與后退之后，頁(yè)面都會(huì)退到最開(kāi)始的歡迎頁(yè)面。AJAX可以實(shí)現(xiàn)頁(yè)面的局部刷新，可以做到非常好的數(shù)據(jù)加載效果，給用戶(hù)帶來(lái)非常良好的體驗(yàn)，但是AJAX不能在瀏覽器的歷史會(huì)話(huà)中保留記錄，當(dāng)你點(diǎn)開(kāi)一個(gè)頁(yè)面，AJAX各種數(shù)據(jù)加載非常快捷，例如一個(gè)列表頁(yè)面可以用異步加載來(lái)翻頁(yè)，但是如果用戶(hù)一不小心刷新了頁(yè)面，那么頁(yè)碼就得重新開(kāi)始計(jì)算，一旦用戶(hù)改變了會(huì)話(huà)狀態(tài)（瀏覽器的前進(jìn)、后退、刷新），那么AJAX就會(huì)丟失相關(guān)的數(shù)據(jù)。

傳統(tǒng)的AJAX存在如下的問(wèn)題：

1、可以無(wú)刷新改變頁(yè)面內(nèi)容，但無(wú)法改變頁(yè)面URL

2、不能支持通過(guò)網(wǎng)址直接訪問(wèn)系統(tǒng)某一模塊，必須進(jìn)過(guò)點(diǎn)按操作

3、回退、刷新必須開(kāi)發(fā)人員自己第一，既給開(kāi)發(fā)人員增加了工作量，又不符合用戶(hù)習(xí)慣

4、進(jìn)而瀏覽器引入了onhashchange的接口，不支持的瀏覽器只能定時(shí)去判斷hash是否改變

5、但這種方式對(duì)搜索引擎很不友好

使用技術(shù)

為了解決傳統(tǒng)ajax帶來(lái)的問(wèn)題，HTML5里引入了新的API，即：history.pushState,history.replaceState

可以通過(guò)pushState和replaceState接口操作瀏覽器歷史，并且改變當(dāng)前頁(yè)面的URL。

pushState是將指定的URL添加到瀏覽器歷史里，replaceState是將指定的URL替換當(dāng)前的URL。

history.pushState(state, title, url)

將當(dāng)前URL和history.state加入到history中，并把新的state和URL添加到當(dāng)前。不會(huì)造成頁(yè)面刷新。

state：與要跳轉(zhuǎn)到的URL對(duì)應(yīng)的狀態(tài)信息。

title：標(biāo)題(現(xiàn)在是被忽略，未作處理)。

url：要跳轉(zhuǎn)到的URL地址，不能跨域。

history.replaceState(state, title, url)

history.replaceState()操作類(lèi)似于history.pushState()，不同之處在于replaceState()方法會(huì)修改當(dāng)前歷史記錄條目而并非創(chuàng)建新的條目。

state：與要跳轉(zhuǎn)到的URL對(duì)應(yīng)的狀態(tài)信息。

title：標(biāo)題(現(xiàn)在是被忽略，未作處理)。

url：要跳轉(zhuǎn)到的URL地址，不能跨域。

addEventListener(type, listener)
addEventListener是一個(gè)偵聽(tīng)事件并處理相應(yīng)的函數(shù)。

type：事件的類(lèi)型。

listener：偵聽(tīng)到事件后處理事件的函數(shù)。此函數(shù)必須接受 Event對(duì)象作為其唯一的參數(shù)，并且不能返回任何結(jié)果。

解決方法

由于AJAX無(wú)刷新改變頁(yè)面內(nèi)容的，所以頁(yè)面的URL始終是不變的，為了區(qū)分頁(yè)面上的各個(gè)不同內(nèi)容，首先需要重新定義一下各個(gè)頁(yè)面的URL，因?yàn)镽MS網(wǎng)站多使用$.post異步請(qǐng)求，我們可以用URL記錄post請(qǐng)求的各個(gè)參數(shù)（請(qǐng)求地址、傳遞參數(shù)），當(dāng)瀏覽器進(jìn)行刷新、回退操作時(shí)，根據(jù)URL記錄的信息自動(dòng)發(fā)送post請(qǐng)求，進(jìn)入對(duì)應(yīng)頁(yè)面，從而實(shí)現(xiàn)希望的功能。

定義URL語(yǔ)法：

已如下地址為例：

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

“http://localhost/rms_hold/index.php/Home/Index/loadHomePage”是原先頁(yè)面的URL，如果在問(wèn)題解決之前在RMS網(wǎng)站上進(jìn)行任何點(diǎn)按操作，網(wǎng)址一直不會(huì)有任何變動(dòng)?，F(xiàn)在我們使用“#”分割網(wǎng)址，“#”之后就是我們所記錄的ajax請(qǐng)求“/rms_hold/index.php/Home/ResourceRequest/getRequestPage”是請(qǐng)求的地址，它由“#”與“@”分割，而在“@”與“！”之間的這是發(fā)向請(qǐng)求地址的各個(gè)參數(shù)，“apply_type=1”與“resource_name=ADM_BIZCARD”由“”進(jìn)行分割。

刷新、回退監(jiān)聽(tīng)處理：

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對(duì)象上提供了onpopstate事件，可以使用addEventListener方法監(jiān)聽(tīng)onpopstate事件，每當(dāng)URL因?yàn)闉g覽器回退時(shí)都會(huì)對(duì)得到的URL在back_ajax_mod_url()與back_ajax_post()函數(shù)中進(jìn)行解析、處理，而當(dāng)瀏覽器刷新時(shí)，根據(jù)history.pushState的返回值不空，依然會(huì)對(duì)得到的URL在back_ajax_mod_url()與back_ajax_post()函數(shù)中進(jìn)行解析、處理。

對(duì)外接口：

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組成對(duì)外接口，ajaxback_url是一個(gè)全局?jǐn)?shù)組，用來(lái)存放需要加入到history中的URL，然后由back_ajax_mod_url()函數(shù)在無(wú)頁(yè)面刷新的情況下將當(dāng)前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)里的一個(gè)AJAX異步請(qǐng)求事件，會(huì)造成頁(yè)面無(wú)刷新變化，加粗部分就是我們提供的對(duì)外接口，使用該接口后在history中會(huì)產(chǎn)生一條新的URL用來(lái)記錄達(dá)到該頁(yè)面的post方法。

URL解析處理器：

如下面函數(shù)所示back_ajax_post()為RMS系統(tǒng)的URL解析處理器，根據(jù)之前提到的URL語(yǔ)法，讀出頁(yè)面上改變內(nèi)容的AJAX請(qǐng)求，并且自動(dòng)發(fā)送AJAX請(qǐng)求，獲取需要的頁(yè)面

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 nextback
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回退刷新頁(yè)面問(wèn)題的解決辦法的相關(guān)知識(shí)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！