Ajax返品・更新ページ問題の解決方法

Ajax概要：
AJAXは「Aynchronous 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、さらにブラウザはオンハシャチャンゲのインターフェースを導入しています。サポートしていないブラウザはタイミングを決めてhashが変更されたかどうかを判断するしかありません。
5、しかし、このような方式は検索エンジンに対してとても友好的ではありません。
技術を使う
伝統的なajaxによる問題を解決するために、HTML 5に新しいAPIが導入されました。すなわち、history.pustate、history.replactate
ブラウザの履歴は、pusStateとreplacceStateのインターフェースで操作し、現在のページのURLを変更することができます。
pusshateは指定されたURLをブラウザ履歴に追加し、replace Stateは指定されたURLを現在のURLに置き換えるものです。

history.pushState(state, title, url)

現在のURLとhistory.stateをhistoryに追加し、新しいstateとURLを現在に追加します。ページの更新につながりません。
state：ジャンプするURLに対応する状態情報。
title：タイトル（現在は無視されています。未処理です。）
url：ジャンプするURLアドレスは、ドメインをまたぐことができません。

history.replaceState(state, title, url)

history.replace State（）の操作はhistory.pusState（）と似ていますが、これはreplace State（）の方法が新しいエントリを作成するのではなく現在の履歴項目を修正することにあります。
state：ジャンプするURLに対応する状態情報。
title：タイトル（現在は無視されています。未処理です。）
url：ジャンプするURLアドレスは、ドメインをまたぐことができません。
addEvent Listener（type、listener）
addEvent Listenerはイベントをリスニングし、対応する関数を処理する。
type：イベントの種類。
listener：事件を聞き出した後、事件を処理する関数。この関数は、Eventオブジェクトを独自のパラメータとして受け入れ、結果を返すことはできません。
解決方法
AJAXは更新なしでページの内容を変えていますので、ページのURLは常に変わりません。ページのそれぞれの内容を区別するために、まず各ページのURLを再定義する必要があります。RMSサイトでは$post非同期要求が多く使われています。URLでpostが要求する各パラメータ（要求住所、伝達パラメータ）を記録できます。ブラウザで更新、返品操作時には、URLに記録された情報に基づいて自動的にpost要求を送信し、対応ページに入り、所望の機能を実現する。
URL文法を定義:
下記の住所を例に挙げました。
「http://localhost/rms_hold/index.php/Home/Index/loadHomePagehold/index.php/Home/Reourcerequest/getRequestPage@apply_type=1&resource_name=ADM_BIZCARD1」
「http://localhost/rms_hold/index.php/Home/Index/loadHomePageは以前のページのURLです。問題解決前にRMSサイトで任意の点を操作すれば、URLはずっと変更されません。今私達は「萼」を使ってウェブサイトを分割しています。「菗」の後は私達が記録したajaxの要求です。hold/index.php/Home/Reourcerequest/get Request Pageは要求されたアドレスで、それは「@」と「！」で分割されています。間のこれは要求アドレスに送る各パラメータです。type=1」と「reource_」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方法を使ってオンポタスイベントをモニターできます。アジャクス.mod_urlとback_アジャクス.post()関数では解析、処理が行われますが、ブラウザが更新されると、history.pusStateの戻り値が空きません。得られたURLはそのままback(u)になります。アジャクス.mod_urlとback_アジャクス.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);
}
}

バックパックを紹介しますアジャクス.mod_url関数は、行列ajaxbackと一緒にいます。urlは対外インターフェースを構成して、ajaxback_urlはグローバル配列であり、historyに参加するURLを格納するために使用され、back＿uによって使用される。アジャクス.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_アジャクス.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回退更新ページ问题の解决方法に関する知识です。皆さんに助けてほしいです。ここでも私たちのサイトを応援してくれてありがとうございます。