How to solve the Ajax refresh page problem, ajax refresh page

How to solve the Ajax refresh page problem, ajax refresh page

Ajax introduction:

AJAX is "Asynchronous Javascript And XML" (Asynchronous JavaScript And XML), which is a Web page development technology used to create interactive web applications.

AJAX = Asynchronous JavaScript and XML (subset of standard General Markup Language ).

AJAX is a technology used to create fast dynamic web pages.

By performing a small amount of data exchange with the server in the background, AJAX can implement asynchronous updates on webpages. This means that you can update a part of a webpage without reloading the entire webpage.

If you need to update the content of a traditional web page (without AJAX), you must reload the entire web page.

Problems

If you use Firefox or other browsers to access the RMS website, we may find that switching between pages is implemented through AJAX asynchronous requests, and the page URL will not change, although you can use buttons on the page to implement rollback and refresh through AJAX asynchronous requests, it is not supported for browser forward and backward. Every time you refresh and backward, the page will return to the initial welcome page. AJAX can be used to partially refresh the page, load data well, and provide a good user experience. However, AJAX cannot retain records in the browser's historical sessions, when you open a page, AJAX loads various data very quickly. For example, a list page can be loaded asynchronously to flip pages. However, if you accidentally refresh the page, the page number has to be calculated again. Once the user changes the session status (the browser advances, returns, and refreshes), AJAX will lose the relevant data.

Traditional AJAX has the following problems:

1. You can refresh the page content, but cannot change the page URL.

2. You cannot directly access a module of the system through a website.

3. Developers must be the first to roll back and refresh. This increases the workload for developers and does not meet user habits.

4. the browser then introduces the onhashchange interface. Unsupported browsers can only regularly determine whether the hash is changed.

5. However, this method is unfriendly to search engines.

Use Technology

To solve the problems brought about by traditional ajax, HTML5 introduces a new API, namely: history. pushState, history. replaceState

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

PushState adds the specified URL to the browser history. replaceState replaces the current URL with the specified URL.

history.pushState(state, title, url)

Add the current URL and history. state to history and add the new state and URL to the current state. Does not cause page refresh.

State: the status information corresponding to the URL to jump.

Title: The title ).

Url: the URL to jump to. It cannot be cross-origin.

history.replaceState(state, title, url)

The history. replaceState () operation is similar to history. pushState (). The difference is that the replaceState () method modifies the current historical record entries rather than creating new ones.

State: the status information corresponding to the URL to jump.

Title: The title ).

Url: the URL to jump to. It cannot be cross-origin.

AddEventListener (type, listener)
AddEventListener is a function that listens for events and processes them.

Type: the type of the event.

Listener: a function that listens to post-event events. This function must accept the Event object as its unique parameter and cannot return any results.

Solution

Because AJAX does not change the page content, the URL of the page remains unchanged. to distinguish different content on the page, you must first redefine the URL of each page, because the RMS website is mostly used $. for post asynchronous requests, we can use URLs to record the parameters (request addresses and transmission parameters) of the post request. When the browser refresh and roll back the request, THE post request is automatically sent based on the URL record information to enter the corresponding page to implement the desired function.

Define URL Syntax:

The following address is used 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 "is the URL of the original page. If you perform any operations on the RMS website before the problem is solved, the website will not change. Now we use "#" to separate the URL. "#" is followed by the recorded ajax request "/rms_hold/index. php/Home/ResourceRequest/getRequestPage is the request address, which is separated by "#" and "@", while "@" and "!" This is the parameters of the sending request address. "apply_type = 1" and "resource_name = ADM_BIZCARD" are separated.

Refresh and rollback listening:

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

As shown in the code above, the window object provides the onpopstate event. You can use the addEventListener method to listen to the onpopstate event. Every time the URL is rolled back () function, and when the browser refreshes, according to history. if the return value of pushState is not empty, the obtained URL will be parsed and processed in the back_ajax_mod_url () and back_ajax_post () functions.

External interface:

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

This section describes the back_ajax_mod_url () function, which forms an external interface with the array ajaxback_url. ajaxback_url is a global array used to store the URLs that need to be added to history, And then back_ajax_mod_url () the function refreshes the current URL and history without page refreshing. state is added to 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();});});

The above function is an AJAX asynchronous request event in the RMS system, which will cause no changes to the page. The bold part is the external interface we provide, after using this interface, a new URL will be generated in history to record the post method that reaches the page.

URL Parsing processor:

As shown in the following function, back_ajax_post () is the URL Parsing processor of the RMS system. Based on the previously mentioned URL syntax, it reads AJAX requests that change content on the page and automatically sends AJAX requests, obtain the required page

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&backif (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;>

The above section describes how to solve the Ajax refresh page problem. I hope it will be helpful to you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!