Script no reload page

nrl.js

/*\
|*| Script no reload page 
|*| v1.0
|*| Attributes for links: data-no-reload
|*| <a href="address" data-no-reload></a>
|*| Attributes for tags: data-load-name=""
|*| <div data-load-name="name1">..code..</div>
\*/
(function() {
"use strict";
var loadNoReload = function (get) {
    removeNoReload();
    if (document.querySelector('[data-load-name]') === null) document.location = get.url;
    else {
        var load = true;
        var data = new DOMParser().parseFromString(get.responseText, 'text/html');
        var tags = document.querySelectorAll('[data-load-name]');
        for (var i = 0; i < tags.length; i++) {
            var tag = data.querySelector('[data-load-name="' + tags[i].getAttribute('data-load-name') + '"]');
            if (tag !== null) {
                tags[i].innerHTML = tag.innerHTML;
                var scripts = tags[i].querySelectorAll('script');
                for (var j = 0; j < scripts.length; j++) {
                    var script = document.createElement('script');
                    script.innerHTML = scripts[j].innerHTML;
                    var attr = tag.querySelectorAll('script')[j].attributes;
                    for (var l = 0; l < attr.length; l++) script.setAttribute(attr[l].name, attr[l].value);
                    tags[i].replaceChild(script, scripts[j]);
                    load = false;
                }
            }
        }
    if (load) document.location = get.url;
    }
    addNoReload();
};
var clickNoReload = function (e, url) {
    if (e) e.preventDefault(e);
    var get = new XMLHttpRequest();
    if (url !== undefined) get.url = url;
    else get.url = e.target.getAttribute('href');
    get.open('GET', get.url, true);
    get.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    get.onload = function () {
        if (url === undefined) history.pushState(null, null, get.url);
        loadNoReload(get);
    };
    get.send();
};
var addNoReload = function () {
    var links = document.querySelectorAll('a[data-no-reload]');
    for (var i = 0; i < links.length; i++) links[i].addEventListener('click', clickNoReload);
};
var removeNoReload = function () {
    var links = document.querySelectorAll('a[data-no-reload]');
    for (var i = 0; i < links.length; i++) links[i].removeEventListener('click', clickNoReload);
};
window.addEventListener('popstate', function (e) { clickNoReload(e, location.pathname); });
window.addEventListener('DOMContentLoaded', function () { addNoReload(); });
})();

Навигация без перезагрузки страниц

Скрипт позволяет с наименьшими усилиями организовать на сайте навигацию без перезагрузки страниц.

Как делать:

1. Определить на сайте группы страниц, которые одинаковые по структуре и отличием только в определённых блоках. Таким образом можно будет не трогая эти страницы заставить изменяться только блоки в них. Так же, при создании новых сайтов, можно заранее распланировать разделы, которые состоят из страниц с одинаковой структурой и дизайном.

2. Вписать на страницах в теги, блоки которых должны обновляться, атрибуты: data-load-name="имя блока", где имя_блока - указатель на заменяющиеся блоки. Блоков с уникальными именами на странице может быть несколько. При переходе на другую страницу содержимое этих блоков замениться на содержимое соответствующих блоков новой страницы.

3. Вписать в теги ссылок, которые ведут на подобные себе страницы, атрибуты: data-no-reload . Данный атрибут определяет, что по этой ссылке страница обновится без перезагрузки. Остальные ссылки будут загружать новые страницы обычным способом.

Выгоды:

• Смена страницы в браузере без мерцаний и белого фона;
• Полное сохранение истории переходов для кнопок назад/вперёд;
• Отсутствие противоречий при работе с поисковыми системами и СЕО;
• Предельно простое и лёгкое внедрение практически на любые сайты.
• Никакого вмешательства и изменения работы на стороне сервера!
• Скрипт не влияет на выполнение других скриптов на страницах.

---

P.S. В скрипте используются ajax запросы для получения новых страниц, в заголовках которых присутствует строка:
X-Requested-With=XMLHttpRequest , она позволяет отслеживать эти запросы. Это можно использовать для отдачи сервером не полных страниц, а только содержимого заменяющихся блоков. Такой подход позволит сократить объёмы передаваемых данных сайта.