Lösung für das Problem des Ajax-Rollbacks und der Aktualisierung der Seite-js-Tutorial-php.cn

Dieser Artikel enthält hauptsächlich relevante Informationen zur Lösung des Ajax-Rollback-Problems und zum Aktualisieren der Seite. Er ist sehr gut und hat den Wert, Ajax zu lernen und gemeinsam zu lernen

Ajax-Einführung:

AJAX steht für „Asynchronous Javascript And XML“ (Asynchronous JavaScript and XML), was sich auf eine Methode bezieht zum Erstellen interaktiver Webanwendungen Webentwicklungstechnologie.

AJAX = Asynchrones JavaScript und XML (eine Teilmenge der Standard Generalized 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 ) ), dann verliert AJAX die relevanten Daten.

Herkömmliches AJAX weist die folgenden Probleme auf:

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

2. Der direkte Zugriff auf ein bestimmtes Modul des Systems über die URL wird nicht unterstützt und ein Klickvorgang ist erforderlich

3. Der Entwickler muss sich selbst an die erste Stelle setzen, wenn er zurückgeht und aktualisiert Dies erhöht nicht nur die Arbeitsbelastung für den Entwickler, sondern entspricht auch nicht den Benutzergewohnheiten

4. Darüber hinaus haben Browser die Onhashchange-Schnittstelle eingeführt. Browser, die diese nicht unterstützen, können nur regelmäßig feststellen, ob der Hash vorhanden ist geändert

5. Diese Methode ist jedoch sehr schädlich für Suchmaschinen.

Einsatz von Technologie

Um die durch traditionelles Ajax verursachten Probleme zu lösen In HTML5 wurden neue APIs eingeführt, nämlich: History.pushState, History.replaceState

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

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)

Nach dem Login kopieren

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)

Nach dem Login kopieren

Die Operation „history.replaceState()“ ähnelt der Operation „history.pushState()“, der Unterschied besteht darin, dass „replaceState( )-Methode ändert den aktuellen Verlaufseintrag, anstatt einen neuen 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 die entsprechenden verarbeitet.

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

Da AJAX den Seiteninhalt ohne Aktualisierung ändert, ist die URL der Seite immer dieselbe, um den Inhalt zu unterscheiden Auf der Seite müssen Sie für jeden unterschiedlichen Inhalt zunächst die URL jeder Seite neu definieren. Da RMS-Websites hauptsächlich asynchrone $.post-Anfragen verwenden, können wir die URL verwenden, um die verschiedenen Parameter (Anfrageadresse, Übertragungsparameter) des < aufzuzeichnen 🎜>Post-Anfrage Wenn der Browser Aktualisierungs- und Rollback-Vorgänge durchführt, sendet er automatisch eine Post-Anfrage basierend auf den in der URL aufgezeichneten Informationen und ruft die entsprechende Seite auf, wodurch die gewünschte Funktion erreicht wird.

URL-Syntax definieren:

Nehmen Sie die folgende Adresse als Beispiel:

"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();
}

Nach dem Login kopieren

如以上代码所示，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);
}
}

Nach dem Login kopieren

介绍一下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 = &#39;Detail&#39;]",
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();
});
});

Nach dem Login kopieren

以上函数是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&#39;).addClass(&#39;open&#39;);
$(this).parents(&#39;.sub-menu&#39;).show();
});
$(this).parent(&#39;li&#39;).parents(&#39;li&#39;).addClass(&#39;active open&#39;);
return false;
} else {
$(&#39;.sub-menu&#39;).hide();
}
});
$("ul.page-sidebar-menuli").not(".open").find("ul").hide();
}
}
</differ;>

Nach dem Login kopieren

以上所述是小编给大家介绍的Ajax回退刷新页面问题的解决办法的相关知识，希望对大家有所帮助！！