Ajax回退刷新頁面-js教程-PHP中文網

這次帶給大家Ajax回退刷新頁面，Ajax回退刷新頁面的注意事項有哪些，下面就是實戰案例，一起來看一下。

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){
$(&#39;#pageContainer&#39;).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;>

登入後複製

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！