Tracking history using Ajax in Javascript

Why does Ajax fail to track browsing history?

Let's assume that when you enter a URL to access a website, the browser will record your current URL, and then click a link from the current page to jump to the new page.
The URL you just accessed is recorded in the history. When you click the "back" button, it will know that you want to return to the page you just accessed. Presumably this process should be easy to understand.

Why can't Ajax be tracked?

Ajax requests are often triggered by a button on your page to trigger a click event (it can be another event !) And sent.

If you click a button on the current page to trigger the Ajax request, and then you see a landscape painting, you suddenly feel Feel, copy the address to a friend and ask him to see it. At this time, he accessed this address and found that not what you saw, because he did not click that button, resulting in the Ajax request not being sent.

Therefore, we need to find a way to track history.

IFRAME trace history

As we all know, IFRAME is a new small page on the page. Redirecting to IFRAME can record the browsing history of the current page.

You can check the structure in QQ mail. If you are performing any operation, partial refresh is performed (only the IFRAME content is refreshed). You can use the back button to return to the previous operation!

Start with URL

Back to the topic, what should I do if I like Ajax? Foreign Language House

Since I want to copy a URL to share what I see, I must start with the URL. if href (the current URL) is changed, the current page will jump to the changed URL.

How can I change the URL so that the current page will not be refreshed?

If you have used the anchor, you will know that the # part behind the URL is the hash part. If you change the value of this Part, the page will not jump to the new page or be refreshed.

If an Ajax request is sent, the hash part of the current URL is automatically changed.

In this way, when the address is copied to another user, the page can get the hash and then send the corresponding Ajax request based on the value and perform the same processing, so that you can track the browsing history.

Modify hash and respond to events with hash changes

Except for the IE series earlier than IE8, other browsers support window. onhashchange.
To monitor the hash changes of the URL.CodeYou will know.

In order to be compatible with IE versions earlier than IE8, you need to use a timer to listen for hash changes on the URL. Of course, it will consume performance, and there is no way. The Internet Explorer is used everywhere, you have to consider availability for them.

Add a code below:

<! Doctype HTML>
<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = GBK">
<Meta charset = "GBK"> inland transportation
</Head>
<Body>
<Button onclick = "changehash ()"> click me </button>
<Script language = "JavaScript" src = "hashchange. js"> </SCRIPT>
</Body>
</Html>

/**
* Hashchange. js
* @ Author raphealguo (raphealguo@qq.com)
* @ Date 2011/08/09
*/
VaR nexthash = 0, // The next hash value, increasing each time
Curhash = ''; // record the current hash

If ("onhashchange" in window) {// browsers earlier than IE8 do not support this attribute
Alert ("the browser supports the hashchange event! ");
}

Function gethash () {// get hash
VaR H = location. Hash;

If (! H ){
Return '';
} Else {
Return location. Hash;
}
}

Function changehash () {// modify the hash. Each time you click the button, the hash change is triggered.
/*
When sending an Ajax request, you can modify the corresponding hash value,
After loading the page, you only need to get the hash value, send the corresponding Ajax request, and update the page,
In this way, AJAX can be used to track the browsing history.
*/
Location. Hash = "#" + nexthash ++;
}

Function changehashcallback () {// After the hash changes, the callback function will be triggered
VaR hash = gethash ();

If (curhash! = Hash ){
Curhash = hash;
Alert ("hash change:" + hash );
}
}

If (document. All & // identify IE
! Document.doc umentmode // IE8 is available for documentmode
){
/* The IE series earlier than IE8 adopt timer monitoring */
Setinterval (changehashcallback, 100 );
Alert ('<ie8 ');
} Else {
Window. onhashchange = changehashcallback;
}

As you can see, when the button is clicked, only the gethash function is triggered, while changehashcallback is triggered by listening to/window. onhashchange.
Another plug-in of jquery: jquery hashchange also supports hashchange, but it does not use the original window. onhashchange, Firefox, and other browsers also use timer listening methods to monitor whether hash changes. This is personally considered bad, and the plug-in has to rely on jquery. It is really better to imitate the above Code, write it by yourself.

Summary

In the Web Front-end, users should experience better interaction. Of course, there are many aspects:

Availability and convenience (this article describes one of the conveniences I think), performance (not to break down the browser crash), security, and humanization (considering the disabled groups )......

Do you often consider these issues as Web Front-end developers !?