Ajax が更新を失った後のデータの処理方法-jsチュートリアル-php.cn

今回は、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 には次の問題があります:

1. ページのコンテンツはリフレッシュせずに変更できますが、ページの URL は変更できません。

2. URL による直接アクセスはサポートされません。システムの特定のモジュールをクリックする必要があります。

3. 戻って更新するときは開発者が最初に行う必要があり、開発者の作業負荷が増加するだけでなく、準拠していません。ユーザーの習慣に合わせて

4. 次に、ブラウザは onhashchange インターフェイスを導入します。これをサポートしていないブラウザは、ハッシュが変更されたかどうかを定期的に判断することしかできません

テクノロジーを使用しています

。従来の ajax によって引き起こされる問題を解決するために、HTML5 では新しい API が導入されました。つまり、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 は、

events
をリッスンし、それに応じて処理する関数です。 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中文网其它相关文章！