この記事は主に、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 は、ページをクリックしたときに、ブラウザーの履歴セッションに記録を保持できません。たとえば、非同期読み込みを使用してリスト ページを切り替えることはできますが、ユーザーが誤ってページを更新した場合、ユーザーがセッション状態 (ブラウザの順方向、逆方向) を変更すると、ページ番号を再計算する必要があります。 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)
ログイン後にコピー
現在の URL とhistory.state を履歴に追加し、新しい状態と 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 を再定義する必要があります。 RMS ほとんどの Web サイトは $.post 非同期リクエストを使用します。URL を使用して
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回退刷新页面问题的解决办法的相关知识，希望对大家有所帮助！！
相关推荐：
javascript - ajax刷新的问题
phpajax刷新分页
phpajax刷新留言板
以上がAjax のロールバックとページの更新の問題の解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
