So gehen Sie mit Daten um, nachdem Ajax die Aktualisierung verloren hat

Dieses Mal zeige ich Ihnen, wie Sie mit den Daten umgehen, nachdem Ajax verloren und aktualisiert wurde. Was sind die Vorsichtsmaßnahmen für den Umgang mit den Daten, nachdem Ajax verloren und aktualisiert wurde? Werfen wir einen Blick darauf.

Ajax-Einführung:

AJAX steht für „Asynchronous Javascript And XML“ (asynchrones JavaScript und XML A). Webentwicklungstechnologie zur Erstellung interaktiver Webanwendungen.

AJAX = Asynchrones JavaScript und XML (eine Teilmenge der Standard Universal Markup Language).

AJAX ist eine Technologie zur Erstellung schneller, dynamischer Webseiten.

AJAX ermöglicht die asynchrone Aktualisierung von Webseiten durch den Austausch einer kleinen Datenmenge mit dem Server im Hintergrund. Das bedeutet, dass Teile einer Webseite aktualisiert werden können, ohne dass die gesamte Seite neu geladen werden muss.

Herkömmliche Webseiten (die kein AJAX verwenden) müssen die gesamte Webseite neu laden, wenn der Inhalt aktualisiert werden muss.

Es liegt ein Problem vor

Wenn Sie einen Browser wie Firefox verwenden, um auf die RMS-Website zuzugreifen, kann es sein, dass der Wechsel zwischen den Seiten nicht funktioniert Asynchron durch AJAX Die Anforderung wird implementiert und die URL der Seite ändert sich nicht gleichzeitig. Obwohl die Rückaktualisierung über die Schaltfläche auf der Seite durch AJAX implementiert werden kann, kann der Browser nicht alle Vorwärts- und Rückwärtsbewegungen unterstützen Nach dem Aktualisieren und Sichern kehrt die Seite nach einiger Zeit zur ursprünglichen Begrüßungsseite zurück. AJAX kann eine teilweise Aktualisierung der Seite realisieren, einen sehr guten Datenladeeffekt erzielen und dem Benutzer ein sehr gutes Erlebnis bieten. AJAX kann jedoch keine Datensätze in der historischen Sitzung des Browsers speichern. Wenn Sie auf eine Seite klicken, werden verschiedene Daten geladen Sehr schnell kann eine Listenseite beispielsweise durch asynchrones Laden umgeblättert werden. Wenn der Benutzer jedoch versehentlich die Seite aktualisiert, muss die Seitennummer erneut berechnet werden ) ), wie man dann mit Daten umgeht, nachdem Ajax die Aktualisierung verloren hat

Herkömmliches AJAX hat die folgenden Probleme:

1 Der Seiteninhalt kann ohne Aktualisierung geändert werden, aber die Seiten-URL kann nicht geändert werden

2. Der direkte Zugriff auf ein bestimmtes Modul des Systems über die URL kann nicht unterstützt werden und es muss ein Klickvorgang durchgeführt werden

3 . Der Entwickler muss als Erster zurückgehen und aktualisieren. Dies erhöht nicht nur die Arbeitsbelastung für Entwickler, sondern entspricht auch nicht den Benutzergewohnheiten. 4. Darüber hinaus haben Browser die Onhashchange-Schnittstelle eingeführt Nicht unterstützt, es kann nur in regelmäßigen Abständen feststellen, ob sich der Hash geändert hat

5. Diese Methode ist jedoch sehr unfreundlich für Suchmaschinen

Verwendung von Technologie

In Um die durch herkömmliches Ajax verursachten Probleme zu lösen, wurde in HTML5 eine neue API eingeführt, nämlich: History.pushState, History.replaceState

Sie können den Browserverlauf über die Schnittstellen PushState und ReplacementState bedienen und die URL ändern der aktuellen Seite.

pushState dient dazu, die angegebene URL zum Browserverlauf hinzuzufügen, und replaceState dient dazu, die aktuelle URL durch die angegebene URL zu ersetzen.

history.pushState(state, title, url)

Fügen Sie die aktuelle URL und „history.state“ zum Verlauf hinzu und fügen Sie den neuen Status und die neue URL zum aktuellen hinzu. Die Seite wird dadurch nicht aktualisiert.

Status: Statusinformationen, die der URL entsprechen, zu der gesprungen werden soll.

Titel: Titel (jetzt ignoriert und nicht verarbeitet).

URL: URL-Adresse, zu der gesprungen werden soll, nicht domänenübergreifend.

history.replaceState(state, title, url)

Die Operation „history.replaceState()“ ähnelt der Operation „history.pushState()“, mit der Ausnahme, dass die Methode „replaceState()“ den aktuellen Verlaufseintrag ändert, anstatt einen neuen Eintrag zu erstellen.

Status: Statusinformationen, die der URL entsprechen, zu der gesprungen werden soll.

Titel: Titel (jetzt ignoriert und nicht verarbeitet).

URL: URL-Adresse, zu der gesprungen werden soll, nicht domänenübergreifend.

addEventListener(type, listener)

addEventListener ist eine Funktion, die auf

Ereignisse
lauscht und diese entsprechend behandelt. Typ: Die Art des Ereignisses.

Listener: Eine Funktion, die Ereignisse verarbeitet, nachdem sie sie abgehört hat. Diese Funktion muss ein Event-Objekt als einzigen Parameter akzeptieren und kann keine Ergebnisse zurückgeben.

Lösung

由于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中文网其它相关文章！

推荐阅读：

怎么使用Ajax实现循环

ajax加载超时提示怎样实现

Das obige ist der detaillierte Inhalt vonSo gehen Sie mit Daten um, nachdem Ajax die Aktualisierung verloren hat. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!