今回は、ページを更新するための Ajax ロールバックについて説明します。ページを更新するための Ajax ロールバックの 注意事項 について、実際のケースを見てみましょう。
Ajax の概要:
AJAX は、「Asynchronous
Javascript And XML」(Asynchronous JavaScript and XML) の略で、インタラクティブな Web アプリケーションを作成するための Web 開発テクノロジを指します。
AJAX = 非同期 JavaScript および XML (標準ユニバーサル マークアップ言語のサブセット)。
AJAX は、高速で動的な Web ページを作成するためのテクノロジーです。
AJAX を使用すると、バックグラウンドでサーバーと少量のデータを交換することで、Web ページを非同期に更新できます。これは、ページ全体を再読み込みしなくても、Web ページの一部を更新できることを意味します。
従来の Web ページ (AJAX を使用しない) では、コンテンツを更新する必要がある場合、Web ページ全体をリロードする必要があります。
問題がございます
Firefox などのブラウザを使用して RMS Web サイトにアクセスすると、ページ間の切り替えが AJAX 非同期リクエストによって実装され、ページの URL が変更されないことがあります。ページ上のボタンは AJAX 非同期リクエストによるロールバック更新を実装していますが、ブラウザは更新やバックを行うたびに元のウェルカム ページに戻ります。 AJAX はページの部分的な更新を実現し、非常に優れたデータ読み込み効果を実現し、ユーザーに非常に優れたエクスペリエンスをもたらしますが、AJAX はブラウザーの履歴セッションに記録を保持できません。ページをクリックすると、AJAX のさまざまなデータ読み込みが行われます。たとえば、リスト ページは非同期読み込みによって切り替えることができます。ただし、ユーザーがページを誤って更新した場合は、ブラウザーの前進、後退、更新などでページ番号を再計算する必要があります。 ) ) を実行すると、AJAX は関連データを失います。
従来の AJAX には次の問題があります:
1. ページのコンテンツは更新せずに変更できますが、ページ URL は変更できません
2. URL を入力し、[操作] をクリックする必要があります
3. 開発者自身が最初にロールバックと更新を実行する必要がありますが、これは開発者の作業負荷が増大するだけでなく、ユーザーの習慣にも適合しません
4。ブラウザには onhashchange インターフェースが導入されており、これをサポートしていないブラウザはハッシュが変更されたかどうかを定期的に判断することしかできません
5。従来の Ajax によって引き起こされる問題を解決するために、HTML5 では新しい API が導入されました。
pushState は指定された URL をブラウザ履歴に追加すること、replaceState は現在の URL を指定された URL に置き換えることです。
history.pushState(state, title, url)
ログイン後にコピー
state: ジャンプ先のURLに対応する状態情報。
title: タイトル (現在は無視され、処理されません)。
url: ジャンプ先の URL アドレス。ドメインを越えることはできません。
history.replaceState(state, title, url)
ログイン後にコピー
history.replaceState() オペレーションは、replaceState() メソッドが新しい履歴エントリを作成するのではなく、現在の履歴エントリを変更する点を除いて、history.pushState() と似ています。
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;>ログイン後にコピー
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
ajax怎么实现网络请求的封装
Ajax+Struts2怎么实现用户输入验证码校验功能
以上がAjax フォールバック更新ページの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
