この記事は主に、Ajax のロールバックの問題の解決方法とページの更新に関する関連情報を紹介しています。非常に優れており、Ajax に興味のある友人は一緒に学ぶ価値があります。 :
AJAX は、「Asynchronous Javascript And XML」(Asynchronous JavaScript and XML) の略で、インタラクティブな Web アプリケーションを作成するための Web 開発テクノロジを指します。
AJAX = 非同期 JavaScript および XML (標準ユニバーサル マークアップ言語のサブセット)。
問題がございます
Firefox などのブラウザを使用して RMS Web サイトにアクセスすると、ページ間の切り替えが AJAX 非同期リクエストによって実装され、ページの URL が変更されないことがあります。ページ上のボタンは AJAX 非同期リクエストによるロールバック更新を実装していますが、ブラウザは更新やバックを行うたびに元のウェルカム ページに戻ります。 AJAX はページの部分的な更新を実現し、非常に優れたデータ読み込み効果を実現し、ユーザーに非常に優れたエクスペリエンスをもたらします。ただし、AJAX は、ページをクリックしたときに、ブラウザーの履歴セッションに記録を保持できません。たとえば、非同期読み込みを使用してリスト ページを切り替えることはできますが、ユーザーが誤ってページを更新した場合、ユーザーがセッション状態 (ブラウザの順方向、逆方向) を変更すると、ページ番号を再計算する必要があります。 fresh) ) を実行すると、AJAX は関連データを失います。
従来の AJAX には次の問題があります:
1. ページのコンテンツは更新せずに変更できますが、ページ URL は変更できません2. URL を入力し、[操作] をクリックする必要があります
3. 開発者はロールバックと更新を最初に実行する必要があります。これは開発者の作業負荷を増大させるだけでなく、ユーザーの習慣にも適合しません
4。 onhashchange インターフェイスが導入されており、これをサポートしていないブラウザは、ハッシュが変更されたかどうかを定期的に判断することしかできません
5。しかし、この方法は検索エンジンにとって非常に不親切です
によって引き起こされる問題を解決するために、従来の ajax とは異なり、新しい API が HTML5 に導入されました。つまり、history.pushState 、history.replaceState は、pushState インターフェイスと replaceState インターフェイスを通じてブラウザ履歴を操作し、現在のページの URL を変更できます。pushState は指定された URL をブラウザ履歴に追加すること、replaceState は現在の URL を指定された URL に置き換えることです。
history.pushState(state, title, url)
state: ジャンプ先のURLに対応する状態情報。
title: タイトル (現在は無視され、処理されません)。
history.replaceState(state, title, url)
state: ジャンプ先のURLに対応する状態情報。
title: タイトル (現在は無視され、処理されません)。
addEventListener は、イベントをリッスンし、それに応じて処理する関数です。
type: イベントのタイプ。
listener: イベントをリッスンした後にイベントを処理する関数。この関数は、Event
オブジェクト を唯一のパラメーターとして受け入れる必要があり、結果を返すことはできません。
post リクエスト のさまざまなパラメータ (リクエスト アドレス、転送パラメータ) を記録できます。ブラウザが更新およびロールバック操作を実行すると、post リクエストが自動的に送信されます。 URL に記録されている情報に基づいて、対応するページにアクセスして、目的の機能を実行します。 URL 構文を定義します:
“http://localhost/rms_hold/index.php/Home/Index/loadHomePage#/rms_hold/index.php/Home/ リソース
Request/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回退刷新页面问题的解决办法的相关知识，希望对大家有所帮助！！
以上がAjax のロールバックとページの更新の問題の解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
