Practical AJAX: what to do with bookmarks

Note: the following is a translation of the article “Ajax Best Practices: Don't Break Bookmarks,” dedicated to solutions that allow users to correctly bookmark the pages of a site made using AJAX methods. I tried to supplement it as much as possible, relying on the discussion of the previous article in the series .

The article is the second of the series ( here is the first ), dedicated to eliminating criticism, which is now so much addressed to the use of AJAX, and reviews of methods that will help make your site a little better.

The essence of the problem

In the previous article, “What to do with the“ back ”button in browsers,” concepts such as “horizontal” and “vertical” links were introduced. If you have not read it, please read before studying further.
')
So, vertical links not only invalidate the back button in browsers, but also the ability of the browser to save a link to this page in bookmarks. This is very similar to the problem of not being able to save HTTP POST requests in the same way as HTTP GET simply because they do not send data in the address bar ( note: I mean, of course, “full” saving of the results of a POST request, because Now most of these requests are combined, when POST data is sent to a specific (GET) line, in which case we can save only the resulting URL, but not the data we sent by POST to it. )

This problem affects not only users who want to come to your site again, it also concerns the great complexity or complete impossibility of indexing the internal pages of the site by search engines so that in the results of search queries you can give a correct link to the resource (for example: This problem is very similar to the frame problem raised a few years ago: the search engines wonderfully indexed the site, but as a link they gave out the main page, and it was not always clear how I believe that this problem is not relevant now, because the links on the site themselves are static, if a user gets some new information when they click on them, or they are not assigned at all if they are supposed to “Hang” dynamic handlers ).

Solution one: use a special AJAX library

In the previous article, an overview was made of methods that allow you to save history in the browser, some of which allow you to work with bookmarks.

Note: solution: each time AJAX is called, a flag is added to the page URL as an anchor, which is the key of the current page. When you add it to your favorites, the page is added with the anchor. Then, when opening the page, the application checks the anchor flag and overloads the required content.

• 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, then save the link as a bookmark. When you open a bookmark, the content is overloaded.
• Brad Neuberg 's approach. Demo version . This library tries to be as cross-browser as possible without complicating the code too much.
• You can see the mikage approach using the jQuery library here .

The use of hidden iframes in this case, as I believe, is not at all justified, because the same main page gets into the bookmarks, and not the one that is loaded into the iframe. Yes, and as was rightly noted by bersz bersz , some iframes can be automatically “cut” as advertising.

A little further explains why the first solution is not always suitable.

Solution two: use special links.

Although there is no ideal solution that would provide the user with a link to the current page with all the GET parameters, this problem can be partially overcome by worsening the support for the ability to add the page to bookmarks. For example, this approach is used in Google Maps . If a user searches for an address, the URL of the page remains the same ( http://maps.google.com ), but when you click on the link “Link to this page”, the requested URL is converted to display the current location with GET parameters (e.g. http://maps.google.com/maps?f=q&hl=en&geocode=&q=Moscow&ie=UTF8&z=17&om=1 ).

This approach allows, in fact, to create a horizontal interpretation of a vertical link that would lead to the current page. When using this solution, several aspects should be kept in mind:

• pre-bookmark - this approach will not work if the user has bookmarked this page before clicking on a special link ( note: I mean, probably, that when the page anchor is changed, the browser cannot save it as new in bookmarks, this is true for IE, it does not take into account the difference of bookmarks by anchors, however, in Firefox 2 and Opera 9 each page with a different anchor is saved as a new bookmark );
• URL encoding - if the data describing the current state contains special characters (for example, tab characters, percentages, ampersands), they must be encoded ( URL encoded ) when a link is created for the bookmark;
• private data - if the data for the current state contains any private information (for example, a user password), you should not include it as a GET parameter of the query string. (However, if the data for the current page contains private information, then, first of all, you should not generally make it possible to save such a page in bookmarks.)

In the near future I want to lay out a small instruction on how to fix the problems described in these articles, as well as some other aspects. If you have links to examples on the net, please share them. I will try to review all of these approaches. Many thanks to everyone who takes an active part in the discussion of my materials. I appreciate your opinion and your opinion on the stated problem.

Web Optimizator: checking the speed of loading sites