Direct links to AJAX websites are our Fullajax Direct Link technology.

Greetings to all readers. The popularity of AJAX is such that, in fact, it is already the de facto standard for many projects. Although, like all technologies (especially new and / or fashionable), it is often used (which is a sin to conceal) and where it is impossible to do without it, and where it is quite possible, and often necessary. However, today we will talk about something else.

One of the unpleasant moments when using AJAX is the lack of direct links to dynamically generated pages or their individual parts. Here lies a conceptual question in general - and what, strictly speaking, is a page in this approach - it does not have some static representation, each time is completely different (not to be confused with dynamic generation on the server), and, in fact, provides the user with a window in multidimensional representation of itself.

But still - let's say we have a simple, but pretentious website a business card, where AJAX loads and displays content through the transitions of the menu, and we want to give a friend via ICQ a link to the contact page (or any other, does not matter).
')
There are two approaches to solving the problem of references.

The first is to indicate the current normal address or the button for obtaining the page address in some place on the page (this is practiced on sites with video content, where they give direct links to the page or player). This approach is not entirely convenient, since adding the current page to a bookmark is different from the standard method and sometimes requires additional actions from the user, sometimes completely non-trivial.

The second approach is to use anchors to generate links in the address bar of the browser. This approach is more preferable and more common, since it allows you to use the standard approach to bookmark links to pages, and also, if desired, allows you to implement a site navigation history on AJAX.
When using the second approach, links to dynamically generated ones will have a similar look: site.ru/# : news, site.ru/# : download or site.ru/#content/blogcategory/4/7

Later, when clicking on such a link (for example, from bookmarks), the mechanism for retrieving page content is implemented by defining an anchor on the client, and loading the corresponding content. There are not many articles on this topic on the Internet. In general, there is practically no runet.
One of the problems with this approach is the first “blank content download”.

To understand the essence of the problem, let’s look at the AJAX link transition mechanism in more detail. As you know, anchors (#: news, #: download, # content / blogcategory / 4/7 /) are not transmitted to the server. To download the corresponding content link to the user, we are forced to initially load the content of the root page (http://site.ru/), then define the AJAX anchor (#: news), and only now we have the opportunity to load the corresponding content anchor. As can be seen from the algorithm of work, we have the first overload of root content, which, in fact, we do not need at all. Visually this is accompanied by an unpleasant blinking of the page. Examples of the implementation of this implementation see here:

http://maxaman-soft.ru/#content/blogcategory/4/7/
http://www.pricelist.uz/en/goods/catalog/#ru/goods/catalog/category/ofisnaya_tehnika/

There are several solutions to this problem. One of them is based on the temporary concealment of content and its subsequent display only after reloading the content corresponding to the anchor. This approach still has the disadvantage of overloading content. Unfortunately, I have not found any examples of such implementation.

The second approach, which is known to me, is the implementation of the first page of the dummy - and downloading the content only after determining the AJAX anchor. Examples of implementation can be seen here:
http://www.datamash.us/#:chips:goto:gs12
http://fullajax.ru/examples/index.html#:[addscript]

This approach has the disadvantage of indexing the site by search engines; they see the root page as a dummy. Although here I operate with general algorithms, it is quite possible that professionals in the field of search or optimization can more fully disclose the topic of indexing such content.

By the way, here lies, in my opinion, the second problem of AJAX - yet it is more suitable for the implementation of applications, and the content and navigation in open access is a bit wrong. In applications, the problem of links does not arise at all (I cannot imagine a link to my open letter in GMail, and all the more so), but the developers of ordinary “content” sites often go too far in beauty without researching the usability of their projects.

Your attention is invited to a third solution to the problem of "blank download content." The following approach is called fullajax direct link . The developer of this technology is Ruslan Sinitsky, who is the main co-author of this material. The method is original in its implementation and is designed to significantly simplify or even completely solve all the problems listed above.

The problem is solved by writing a small javascript that can do a couple of simple operations. The essence of the algorithm is as follows.

When a user navigates through AJAX to site.ru/# : news, initially it falls into the root of our site site.ru. First of all, our little javascript is loaded, which determines the presence of the referrer. If the referrer is missing (the user entered the address in a new window) or the referrer from an external site (the user came to our site by clicking on a link on another site), then we immediately define the AJAX anchor (#: news) and determine the corresponding page (for example, / content / news). Then we immediately redirect to the page / content / news, and, as soon as we started downloading this page, at the very beginning we do a reverse redirect to site.ru : #news. We get back to the root of the site, but we already have an internal referrer. At this moment, the server algorithm is turned on, which, if the conditions coincide - the site root request and the presence of an internal referrer - loads the content of the page that is specified in the referrer instead of the content of the root page. The scheme of the algorithm is shown in the figure below:

All redirects are done using javascript, which allows you to work with the site as usual when it is disabled.

Everything would be great if it were not for some features of the Internet Explorer browser. He completely refuses to save the referrer when redirecting with JS! But there was an interesting way out of this situation. Your attention is a solution to this problem (after all, saving the referrer may be useful in other cases). It turns out that IE allows you to programmatically click on links! In this case, the browser normally redirects and saves the referrer. In addition, the Opera has a problem with the referrer. True, with the JS redirect, the referrer Opera saves, but if you click update after the redirect, Opera loses the referrer. Fortunately, Opera also allows you to programmatically click on links.

And so I give an example of a working client script that is actually used on the website of the developer of this approach (http://fullajax.ru):

 //     «AJAX »   ***** var links = { '/content/view/36' : 'main', '/content/blogcategory/27/74' : 'news', '/content/view/43/75' : 'technology', '/content/view/41/76' : 'portfolio', '/content/view/38/79' : 'connection', '/content/view/42/80' : 'license', '/content/view/45/83' : 'contacts', '/content/view/39/77' : 'developers', '/content/view/40/78' : 'links', '/content/view/65/84' : 'download' } //     if (location.pathname && location.pathname != '/') { var l; for (var i in links){ if (location.pathname.substring(0,i.length)==i) { l = links[i] + location.pathname.replace(i,''); break; } } l = '/'+(l?'#:'+l:''); //  AJAX    //    **** var ua = navigator.userAgent.toLowerCase(); //         if (ua.indexOf('opera') > -1 || ua.indexOf('msie') > -1) { //        if (ua.indexOf('msie') > -1) { document.write('<a href="'+l+'" id="redirect" style="display:none"> </a>') document.getElementById('redirect').click(); } else { //     -     var a = document.createElement('a'); a.setAttribute('href', l); a.click(); } } else { //    location.replace(l); } } else { //   //  ,          var ref = document.referrer; if (!ref || ref.indexOf(location.hostname) == -1 || (ref.substring(ref.length-'fullajax.ru/'.length,ref.length)=='fullajax.ru/')){ var ind = location.href.indexOf('#:'); if (ind != -1){ // AJAX - var l = location.href.substring(ind+2); for (var i in links){ //  AJAX        if (l.substring(0,links[i].length)==links[i]) location.replace(i+l.replace(links[i],'')); } } } } 
 
// «AJAX » ***** var links = { '/content/view/36' : 'main', '/content/blogcategory/27/74' : 'news', '/content/view/43/75' : 'technology', '/content/view/41/76' : 'portfolio', '/content/view/38/79' : 'connection', '/content/view/42/80' : 'license', '/content/view/45/83' : 'contacts', '/content/view/39/77' : 'developers', '/content/view/40/78' : 'links', '/content/view/65/84' : 'download' } // if (location.pathname && location.pathname != '/') { var l; for (var i in links){ if (location.pathname.substring(0,i.length)==i) { l = links[i] + location.pathname.replace(i,''); break; } } l = '/'+(l?'#:'+l:''); // AJAX // **** var ua = navigator.userAgent.toLowerCase(); // if (ua.indexOf('opera') > -1 || ua.indexOf('msie') > -1) { // if (ua.indexOf('msie') > -1) { document.write('<a href="'+l+'" id="redirect" style="display:none"> </a>') document.getElementById('redirect').click(); } else { // - var a = document.createElement('a'); a.setAttribute('href', l); a.click(); } } else { // location.replace(l); } } else { // // , var ref = document.referrer; if (!ref || ref.indexOf(location.hostname) == -1 || (ref.substring(ref.length-'fullajax.ru/'.length,ref.length)=='fullajax.ru/')){ var ind = location.href.indexOf('#:'); if (ind != -1){ // AJAX - var l = location.href.substring(ind+2); for (var i in links){ // AJAX if (l.substring(0,links[i].length)==links[i]) location.replace(i+l.replace(links[i],'')); } } } }

These are the pies :). A server script is attached to this client script, which, if there is an internal referrer, loads, instead of the main page, the page that is specified in the referrer. Here is a working PHP implementation example for CMS Joomla written in PHP:

 <? php
 / *
 * fullajax systembot
 * (c) 2008 boston & si-rus
 * As part of the Fullajax project for Joomla!
 * http://www.fullajax.ru |  http://www.joostina.ru
 ** /
 defined ('_VALID_MOS') or die ('Direct call to the file is prohibited.');

 $ _MAMBOTS-> registerFunction ('onStart', 'fullajaxStart');


 function fullajaxStart () {
	 global $ mosConfig_live_site, $ mosConfig_absolute_path, $ mosConfig_sef;
	 if (isset ($ _ SERVER ['HTTP_REFERER'])) {
		 $ _lo = strpos ($ _ SERVER ['HTTP_REFERER'], $ mosConfig_live_site);
		 if ($ _ lo === false) {// external referrer - we do everything as usual
			 null;
		 } else {
			 // echo 'internal <br />';
			 $ _ref = str_replace (array ('http: //', 'www.'), '', $ _ SERVER ['HTTP_REFERER']);  // referrer
			 // echo '<br />';
			 $ _url = str_replace (array ('http: //', 'www.'), '', $ _ SERVER ['SERVER_NAME']. $ _ SERVER ['REQUEST_URI']);  // current url - address
			 // echo '<br />';
			 $ _root = str_replace (array ('http: //', 'www.'), '', $ mosConfig_live_site). '/';  // URL of the site root

			 if ($ _ url == $ _ root and $ _url! = $ _ ref) {// root query with internal referrer
				 // ship referrer
				 require ($ mosConfig_absolute_path. '/ templates / index / unsef.php');
			 } else {
				 null;
			 }
		 }
	 }
 }

 ?>

Well, that's basically all.

This algorithm also has a drawback (this is the law of energy conservation) - as a result, there are 2 more connections to the server (2 redirects), but this may be a tiny fraction in relation to the “idle content download”.

The advantage of this approach is that the main page remains indexable like a regular site, there is no download of unnecessary content (“idle request”), there is no page blinking. The need to implement the considered algorithm depends on the specific situation. Maybe you need it. Use on health!

The work of the algorithm in reality can be seen on the site http://fullajax.ru .

PS The author of the material: Ruslan Sinitsky (sirus, http://fullajax.ru ), editing and co-author - Alexander Lozovyuk (aleks_raiden, http://abrdev.com ).

Source: https://habr.com/ru/post/23159/

All Articles

Direct links to AJAX websites are our Fullajax Direct Link technology.

More articles: