Solution to the problem of Ajax rollback and refresh page-JS Tutorial-php.cn

This article mainly introduces the relevant information on the solution to the problem of Ajax rollback and refreshing the page. It is very good and has the value of reference and learning ajax. Friends who are interested in ajax should learn together

Ajax Introduction:

AJAX stands for "Asynchronous Javascript And XML" (Asynchronous JavaScript and XML), which refers to a method for creating interactive web applications. Web development technology.

AJAX = Asynchronous JavaScript and XML (a subset of Standard Universal Markup Language).

AJAX is a technology for creating fast, dynamic web pages.

By exchanging a small amount of data with the server in the background, AJAX can enable asynchronous updates of web pages. This means that parts of a web page can be updated without reloading the entire page.

Traditional web pages (not using AJAX) must reload the entire web page if the content needs to be updated.

There is a problem

If you use a browser such as Firefox to access the RMS website, we may find that switching between pages is asynchronous through AJAX The request is implemented, and the URL of the page will not change at the same time. Although the rollback refresh can be implemented through the AJAX asynchronous request through the button on the page, the browser cannot support forward and backward. Every time after refreshing and backing, the page will return to The initial welcome page. AJAX can realize partial refresh of the page, can achieve very good data loading effect, and bring a very good experience to the user. However, AJAX cannot retain records in the browser's historical session. When you click on a page, AJAX various Data loading is very fast. For example, a list page can be turned through asynchronous loading. However, if the user accidentally refreshes the page, the page number will have to be calculated again. Once the user changes the session state (browser forward, backward, refresh) ), then AJAX will lose the relevant data.

Traditional AJAX has the following problems:

1. The page content can be changed without refreshing, but the page URL cannot be changed

2. Direct access to a certain module of the system through the URL cannot be supported, and a click operation is required.

3. The developer must put the first priority in rolling back and refreshing, which not only increases the workload of the developer, but also It is not in line with user habits

4. Furthermore, the browser has introduced the onhashchange interface. Browsers that do not support it can only periodically determine whether the hash has changed

5. However, this method is very harmful to search engines. Unfriendly

Using technology

In order to solve the problems caused by traditional ajax, new APIs have been introduced in HTML5, namely: history.pushState, history.replaceState

You can operate the browser history and change the URL of the current page through the pushState and replaceState interfaces.

pushState is to add the specified URL to the browser history, and replaceState is to replace the current URL with the specified URL.

history.pushState(state, title, url)

Copy after login

Add the current URL and history.state to history, and add the new state and URL to the current. It will not cause the page to refresh.

state: State information corresponding to the URL to be jumped to.

title: Title (now ignored and not processed).

url: URL address to jump to, cannot cross domain.

history.replaceState(state, title, url)

Copy after login

The history.replaceState() operation is similar to history.pushState(), except that the replaceState() method will modify the current History entries rather than creating new ones.

state: State information corresponding to the URL to be jumped to.

title: Title (now ignored and not processed).

url: URL address to jump to, cannot cross domain.

addEventListener(type, listener)
addEventListener is a function that listens for events and handles them accordingly.

type: Type of event.

listener: A function that handles events after listening to them. This function must accept an Event object as its only parameter and cannot return any results.

Solution

Since AJAX does not refresh the page content, the URL of the page is always the same. In order to distinguish the content on the page For each different content, you first need to redefine the URL of each page. Because RMS websites mostly use $.post asynchronous requests, we can use the URL to record the various parameters of the post request (request address, transfer parameters). When When the browser performs refresh and rollback operations, it automatically sends a post request based on the information recorded in the URL and enters the corresponding page, thereby achieving the desired function.

Define URL syntax:

Take the following address as an example:

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

Copy after login

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

Copy after login

介绍一下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();
});
});

Copy after login

以上函数是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;>

Copy after login

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