Practical AJAX: what to do with the back button in browsers
Note: The article is devoted to reviewing the problem of a broken back button in the browser when using AJAX methods to transfer the content of pages from the server to the client. The article discusses the basic principles of AJAX and possible solutions to the stated problem. My comments are in italics.
This article is the first of a series of materials (the second article is devoted to working with bookmarks ) aimed at eliminating some of the criticism that AJAX is addressing today, and providing an overview of useful methods that will help make your applications and web pages using AJAX technology a little better.
From the very beginning, the Web was based on the ability to put a hyperlink from one page to another. Links between pages were primarily bidirectional: this meant that clicking on a link from page A to page B in no way could prevent either clicking on a link back to page A, or using the back button in the browser. The chain of such pages is a browsing history in the browser, each with a unique URL associated with it. If we imagine this from the technical side, then such a chain is implemented in the form of a stack. In the following, I will use the term “horizontal” link to denote the connection between the elements of such a stack.
')
Figure 1. Horizontal links
To talk about pages that are built on horizontal links and use AJAX, I’ll introduce the term “vertical” links. Vertical links are links to additional information displayed on the current page, but they are only accessed using AJAX methods ( note: in the original XMLHttpRequest, but the information can be obtained, in particular, with the help of an
Figure 2. Vertical link between the second URL and the server
The approach that should be used to solve this problem directly depends on whether you are developing: a website or a web application. Sometimes it’s hard to separate these two concepts, but usually a web application can be distinguished by the following properties:
As an example of a website, consider Yahoo! Finance and E * TRADE - as a web application. From the user's point of view, I can say that it is not always possible to draw a clear boundary between these two types. However, web developers should decide from the very beginning what they are going to develop: a website or applications? If you understand this, then you can ask a simple question: in the absence of the Internet, what is the best way to describe your development: is it a collection of Word documents or a desktop application? Consider web-based applications on a par with desktop with the only difference that the first still requires a browser for normal operation. Another question you can ask yourself is: “Your main goal will be to provide information or provide functionality?”.
If you are going to create a website for public access, I would advise you to use AJAX only in case of emergency (do not abuse it). It may be necessary to change the URL of the page in order to update it all, but at the same time, I suppose, the ideology of correct operation of the back button in the browser will be observed. Remember that not all AJAX calls are strongly associated with vertical links ( note: as I understand it, the author means first of all changing any small parts of the page with the main content unchanged) .
The easiest way is simply not to take into account the inoperability of the back button in the browser, but you cannot completely ignore this. Instead of creating a holistic application that uses a large number of vertical links and is tied to a single URL, create a certain number of horizontal links in places where it is really required. In other words, use horizontal links to separate parts of your application, for example, in the way that is done in paper literature (the book is divided into parts and chapters). Using a reasonable combination of traditional horizontal links with vertical links, you can achieve a balance of AJAX power and the ability to use the browser navigation functionality.
Note: as an example, perhaps, you can bring a number of modern sites on which AJAX is used only to provide some additional features, in particular, this is a Habrahabr and a voting / adding mechanism.
Now there are a sufficient number of open source libraries, created, among other things, to resolve this problem. Most of them use anchors anyway (which are specified after the '#' ( hash ) in the link). The result is a vertical link that changes the URL of the page in such a way that it emulates a new horizontal link ( note: when we click on vertical links, we simultaneously move on pseudo-horizontal ones ), without overloading the current page. Although each of these libraries adds another level of processing (complexity, complexity ) to a web page, yet they can be fairly easily integrated into your development.
Note: the main methods for creating pseudo-horizontal links are grouped below; I tried to supplement them with examples known to me, expanding the list of the original source article.
I can not fail to mention a good overview article by Vladimira Kelmana , in which part of the above decisions are discussed.
Traditionally, the “back” button served to implement the concept: “Bring me back to where I came from.” However, when you click on it, many users actually mean “cancel what I just did.” To save them from telling them to use the "back" button for other purposes, you can create buttons with the "Undo" or "Step back" functions in your web application using AJAX. For example, if you are developing an advanced text editor on the Web, create a "Cancel" button that prevents users from losing the entire document if the "back" button in the browser is incorrectly pressed.
However, the worst decision of all that I have seen is to create an alternative “back” button within the web page itself, using AJAX methods. Many users could hardly get used to the border between the browser and the web page, could understand where the browser ends and the page itself actually begins. There is no need to increase their inconvenience. After all, you can not guarantee that those users who easily coped with this will be able to get used to another “innovation” and change their habits for the sake of your website. Providing users with alternative navigation and functionality will be quite enough, but not to create this button again.
In conclusion, if you still limit the functionality of the standard history in the browser when creating a web application, please notify users of this in one way or another. AJAX is not the first method that limits this functionality, and, most likely, users will not know about it for the first time, either. (There are also applets, Flash and eCommerce applications that can withdraw the amount from the credit card again if you click the "back" button in the browser.) The weight of responsibility that you ultimately place on the user for his actions on the site will be depend on your corporate culture, but why not make it a little easier?
Thank you all for reading, reading and will read my translations and articles. I want to thank in advance all those who point out factual inaccuracies or errors in the article, and maybe give links to additional information.
Web Optimizator: checking the speed of loading sites
This article is the first of a series of materials (the second article is devoted to working with bookmarks ) aimed at eliminating some of the criticism that AJAX is addressing today, and providing an overview of useful methods that will help make your applications and web pages using AJAX technology a little better.
The essence of the problem
From the very beginning, the Web was based on the ability to put a hyperlink from one page to another. Links between pages were primarily bidirectional: this meant that clicking on a link from page A to page B in no way could prevent either clicking on a link back to page A, or using the back button in the browser. The chain of such pages is a browsing history in the browser, each with a unique URL associated with it. If we imagine this from the technical side, then such a chain is implemented in the form of a stack. In the following, I will use the term “horizontal” link to denote the connection between the elements of such a stack.
')
Figure 1. Horizontal links
To talk about pages that are built on horizontal links and use AJAX, I’ll introduce the term “vertical” links. Vertical links are links to additional information displayed on the current page, but they are only accessed using AJAX methods ( note: in the original XMLHttpRequest, but the information can be obtained, in particular, with the help of an
iframe , therefore I enter more general term ). In other words, you get new page content on the screen, but the URL of this page in the browser does not change. Since vertical links do not change the URL of the page, a new element is not added to the browser history stack. As a result, when the user presses the back button in the browser, he goes to the previous horizontal page, which may not contain all the changes that have appeared on the page that has just been on the screen.
Figure 2. Vertical link between the second URL and the server
Website and web application
The approach that should be used to solve this problem directly depends on whether you are developing: a website or a web application. Sometimes it’s hard to separate these two concepts, but usually a web application can be distinguished by the following properties:
- Authorization required before use
- Serious work with user sessions
- The process of user interaction with the application has a definite beginning and end.
As an example of a website, consider Yahoo! Finance and E * TRADE - as a web application. From the user's point of view, I can say that it is not always possible to draw a clear boundary between these two types. However, web developers should decide from the very beginning what they are going to develop: a website or applications? If you understand this, then you can ask a simple question: in the absence of the Internet, what is the best way to describe your development: is it a collection of Word documents or a desktop application? Consider web-based applications on a par with desktop with the only difference that the first still requires a browser for normal operation. Another question you can ask yourself is: “Your main goal will be to provide information or provide functionality?”.
First solution: do not abuse vertical links.
If you are going to create a website for public access, I would advise you to use AJAX only in case of emergency (do not abuse it). It may be necessary to change the URL of the page in order to update it all, but at the same time, I suppose, the ideology of correct operation of the back button in the browser will be observed. Remember that not all AJAX calls are strongly associated with vertical links ( note: as I understand it, the author means first of all changing any small parts of the page with the main content unchanged) .
The easiest way is simply not to take into account the inoperability of the back button in the browser, but you cannot completely ignore this. Instead of creating a holistic application that uses a large number of vertical links and is tied to a single URL, create a certain number of horizontal links in places where it is really required. In other words, use horizontal links to separate parts of your application, for example, in the way that is done in paper literature (the book is divided into parts and chapters). Using a reasonable combination of traditional horizontal links with vertical links, you can achieve a balance of AJAX power and the ability to use the browser navigation functionality.
Note: as an example, perhaps, you can bring a number of modern sites on which AJAX is used only to provide some additional features, in particular, this is a Habrahabr and a voting / adding mechanism.
Second solution: use a special AJAX library
Now there are a sufficient number of open source libraries, created, among other things, to resolve this problem. Most of them use anchors anyway (which are specified after the '#' ( hash ) in the link). The result is a vertical link that changes the URL of the page in such a way that it emulates a new horizontal link ( note: when we click on vertical links, we simultaneously move on pseudo-horizontal ones ), without overloading the current page. Although each of these libraries adds another level of processing (complexity, complexity ) to a web page, yet they can be fairly easily integrated into your development.
Note: the main methods for creating pseudo-horizontal links are grouped below; I tried to supplement them with examples known to me, expanding the list of the original source article.
- Note: solution: each time AJAX is called, the current page number in the “history” stack is added as an anchor to the page URL, in fact, simply increasing numbers. When you click the "back" button in the browser, the URL of the page changes to the previous one. Every 100 (200, 400, 1000) milliseconds the page checks if its anchor has changed in the URL, if the anchor has changed, then the data corresponding to the current anchor is loaded (= an item in the history stack).
Mike Stenhouse 's approach. The demo version is extremely simple and works in almost all browsers. A demo version of this solution can be viewed at this link and see what happens to the URL of the page when you click on the links. I constantly get an error message, but the solution can be understood
The Brad Neuberg approach, this library tries to be as cross-browser as possible without complicating the code. It is good that it is available under the BSD opensource license. Brad published a step-by-step instruction on how to create this library, as well as an online demo .
You can see the mikage approach using the jQuery library here .
- Note: solution: instead of changing the URL of the page itself, an invisible
iframeis created, into which the URL is loaded, which has an anchor (in this case, the approach is more flexible, because it allows you to set part of the parameters right after the #, for example, URL for an AJAX request or additional parameters, but this does not change the address of the main page, i.e., for the user, in fact, nothing changes, but the browser history is updated). Based on this idea, several frameworks have been created.
Plex is an open source AJAX framework that supports so many features, including emulating the back button in the browser.
Dojo is another open source AJAX framework that provides some AJAX functionality and emulates the back button in the browser.
Found another variation of this approach in the Streampad blog , the author guarantees the performance under Safari.
- Note: the following method is very little different from the previous one, however, I want to highlight it in a separate case, because instead of using the “native” AJAX methods, it simply uses sending data to a hidden
iframe, in which case no additional actions are required, because Browsing history in the browser will load this or that URL into thisiframe, and it will already update the main page accordingly.
Description of the approach and demo version .
- There are also a number of other approaches, in particular, using
document.save()ordocument.body.onbeforeunload(), which are not cross-browser.
I can not fail to mention a good overview article by Vladimira Kelmana , in which part of the above decisions are discussed.
Solution three: provide users with a convenient alternative to the back button
Traditionally, the “back” button served to implement the concept: “Bring me back to where I came from.” However, when you click on it, many users actually mean “cancel what I just did.” To save them from telling them to use the "back" button for other purposes, you can create buttons with the "Undo" or "Step back" functions in your web application using AJAX. For example, if you are developing an advanced text editor on the Web, create a "Cancel" button that prevents users from losing the entire document if the "back" button in the browser is incorrectly pressed.
However, the worst decision of all that I have seen is to create an alternative “back” button within the web page itself, using AJAX methods. Many users could hardly get used to the border between the browser and the web page, could understand where the browser ends and the page itself actually begins. There is no need to increase their inconvenience. After all, you can not guarantee that those users who easily coped with this will be able to get used to another “innovation” and change their habits for the sake of your website. Providing users with alternative navigation and functionality will be quite enough, but not to create this button again.
In conclusion, if you still limit the functionality of the standard history in the browser when creating a web application, please notify users of this in one way or another. AJAX is not the first method that limits this functionality, and, most likely, users will not know about it for the first time, either. (There are also applets, Flash and eCommerce applications that can withdraw the amount from the credit card again if you click the "back" button in the browser.) The weight of responsibility that you ultimately place on the user for his actions on the site will be depend on your corporate culture, but why not make it a little easier?
Thank you all for reading, reading and will read my translations and articles. I want to thank in advance all those who point out factual inaccuracies or errors in the article, and maybe give links to additional information.
Web Optimizator: checking the speed of loading sites
Source: https://habr.com/ru/post/31211/
All Articles