[Radik55rus]

Ребят у меня есть проблемка, на хабре наткнулся на AJAX навигацию без якоря и меня она заинтересовала. но вот есть проблема. Я иследовал статью и приведенный к ней пример использования(Что-то вроде демо). К моему горю причину проблемы не решил. Проблема такова: В примере(демо) мы свободно можем перемещаться меж страницами и открывать нужную нам страницу с помощью URL. Но я, по какой-то причине, не могу этого делать, то есть, я не могу попасть на нужную мне страницу через URL, только шагая через index страницу.
у меня все сделано как сказано. Только вод меня пугает, то, что ссылка на файл выгладят примерно так(точнее такую ссылку требует изначальный код, пробовал коректировать, не помогло)К примеру: у нас есть файл home.php соответственно мы убираем расширение, и пишем, home в href, ах да, еще нужно заменить href на data-href. если мы просто ищем файл home, в родительской папке страницы, то мы ищем в /page(это можно убрать конечно)/home/home.php(а вот это меня пугает)

Мне показалось, что статейка интересная, по этому я ее выложу сюда.

Ajax навигация без якоря(#)

Сегодня я расскажу как сделать ajax навигацию без якоря (#). Меньше слов, сразу к делу!

Так как ссылок по которым мы будем обращаться к серверу на самом деле не существует, то сервер будет постоянно возвращать Error 404.
Добавим в .htaccess пару строк:

ErrorDocument 403 <script>script=document.createElement('script');script.setAttribute('src','script.js');script.setAttribute('type','text/javascript');document.head.appendChild(script);</script>
ErrorDocument 404 <script>script=document.createElement('script');script.setAttribute('src','script.js');script.setAttribute('type','text/javascript');document.head.appendChild(script);</script>

Внимание: после ErrorDocument 403/404 нельзя ставить пробелов, ибо падает сервер.

Вот код между в читаемом виде:

script = document.createElement('script');
script.setAttribute('src', 'script.js');
script.setAttribute('type', 'text/javascript');
document.head.appendChild(script);

Так как после ErrorDocument идёт не ссылка а обычный текст, то нас не отредиректит. Текст выведется в браузер и подключит нужный нам скрипт.
Содержимое script.js:

function ajax(url, func)
{
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open('post', url, true);
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlhttp.onreadystatechange = function()
    {
        if (xmlhttp.readyState == 4)
        {
            switch (xmlhttp.status) // тут обработаются ошибки при ajax запросах
            {
                case 200:
                    func(xmlhttp.responseText);	
                break
                case 401:
                    alert('401');
                break
                case 403: //Как мне кажется пользователю не особо важна разница между 403 и 404 ошибкой, поэтому их я обрабатываю вместе
                case 404:
                    alert('404');
                break
                case 500:
                    alert('500');
                break
            }
        }
    }
    xmlhttp.send();
}

function load(path) // обрабатываем path в рабочую ссылку и делаем запрос на сервер
{
    var FullPath = '/page' +  path + '/' + path.split('/')[path.split('/').length - 1] + '.html';
    ajax(FullPath, function(answer)
    {
        document.getElementById('content').innerHTML = answer;
    });
}

ajax('template.html', function(answer) // тут подгружается шаблон сайта
{
    document.body.innerHTML = answer;
});
if (location.pathname != '/') load(location.pathname); // этот код сработает, если url не ведёт на главную страницу

window.onpopstate = function() // для навигации по истории
{
    load(location.pathname);
}

window.onclick = function(e) // обработчик ссылок
{
    e.preventDefault();
    var obj = e.target;
    if (obj.getAttribute('data-href'))
    {
        var path = obj.getAttribute('data-href');
        load(path);
        history.pushState(null, null, path);
    }
}

Вот пример