Ajax fallback Refresh page problem solution _ajax Related

Introduction to Ajax:

Ajax, "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML), refers to a web development technology that creates interactive Web applications.

AJAX = Asynchronous JavaScript and XML (a subset of standard generic markup languages).

AJAX is a technique for creating fast-moving web pages.

AJAX enables asynchronous updating of Web pages by making a small amount of data exchange in the background with the server. This means you can update portions of a Web page without reloading the entire page.

Traditional Web pages (without AJAX) if you need to update the content, you must overload the entire page page.

There are problems

If you use a browser such as Firefox to access the RMS site, we may find that the switch between pages is implemented through the AJAX asynchronous request, while the URL of the page will not change, although through the button on the page through the Ajax asynchronous request to achieve a fallback refresh, But for browsers to move forward and back, the page will fall back to the start of the Welcome page whenever you refresh and rewind. Ajax can achieve local refresh of the page, can do very good data loading effect, give users a very good experience, but Ajax can not be in the browser's history to keep records, when you click on a page, Ajax various data loading is very fast, such as a list page can be loaded with asynchronous to page, But if the user accidentally refreshes the page, then the page number will have to start again, once the user changes the session state (browser forward, back, refresh), then Ajax will lose the relevant data.

Traditional Ajax has the following problems:

1, can change the content of the page without refreshing, but cannot change the page URL

2, can not support the direct access to the system through the Web site of a module, must be in the point by operation

3, Rollback, refresh must be the developer's own first, not only to the developer to increase the workload, but not in line with user habits

4, and then the browser introduced the Onhashchange interface, not supported by the browser can only be timed to determine whether the hash changes

5, but this way is not friendly to search engines

Use of technology

In order to solve the problems caused by traditional Ajax, HTML5 introduced a new API, namely: History.pushstate,history.replacestate

You can manipulate browser history through the Pushstate and Replacestate interfaces, and change the URL of the current page.

Pushstate adds the specified URL to the browser history, Replacestate replaces the specified URL with the current URL.

History.pushstate (state, title, URL)

Joins the current URL and history.state into the history and adds the new state and URL to the current. does not cause page refreshes.

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

Title: Header (is now ignored, not processed).

URL: The URL address to jump to, not cross-domain.

History.replacestate (state, title, URL)

The History.replacestate () operation is similar to History.pushstate (), except that the Replacestate () method modifies the current history entry rather than creating a new entry.

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

Title: Header (is now ignored, not processed).

URL: The URL address to jump to, not cross-domain.

AddEventListener (type, listener)
AddEventListener is a listening event and handles the corresponding function.

Type: The types of events.

Listener: Detects the function that handles the event after hearing the event. This function must accept the event object as its only parameter, and it cannot return any results.

Solving method

Because Ajax has no refreshing changes to the content of the page, so the URL of the page is always the same, in order to distinguish the different content on the page, first of all need to redefine the URL of each page, because the RMS site to use more $.post asynchronous request, We can use the URL to record the various parameters of the POST request (request address, pass parameters), when the browser to refresh, rollback operation, according to the URL recorded information automatically send a POST request, into the corresponding page, so as to achieve the desired function.

Define URL Syntax:

The following address is 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, and if you do anything on the RMS site before the problem is resolved, there will be no changes to the URL. Now we use "#" to split the URL, "#" after which is our recorded Ajax request "/rms_hold/index.php/home/resourcerequest/getrequestpage" is the address of the request, which is divided by "#" and "@", And at "@" and "!" "This is the various parameters that are sent to the request address," apply_type=1 "and" Resource_name=adm_bizcard "are segmented by" & ".

Refresh, fallback listener processing:

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 preceding code, the Onpopstate event is provided on the Window object, and you can use the AddEventListener method to listen for the Onpopstate event, which will be available to the URL whenever the URL is returned because the browser is back Back_ajax_mod_url () with the Back_ajax_post () function parsing, processing, and when the browser refresh, according to the History.pushstate return value is not empty, will still be the resulting URL in Back_ajax_mod_url () and Back_ajax_post () function to parse and process.

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

Introduce the Back_ajax_mod_url () function, which is an external interface with the array ajaxback_url, Ajaxback_url is a global array that holds the URLs that need to be added to the history, and then the Back_ajax_mod_ The URL () function adds the current URL and history.state to the history without page refreshes.

$ ("#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,
the
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 that will cause the page to have no refresh changes, and the bold part is the external interface we provide, which in history will produce a new URL to record the Post method to reach the page.

URL Resolution Processor:

As shown in the following function Back_ajax_post () is the URL resolver processor for the RMS system, reads the AJAX request that changes the content on the page according to the previous URL syntax, and automatically sends the AJAX request to get the desired page

function Back_ajax_post () {if (Location.href.indexOf ("#")!=-1) {var post_href =location.href.split ("#") [1]; if (Locati On.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_fo r_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 is a small set to introduce the Ajax fallback to refresh the problem of the page to solve the relevant knowledge, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!