Ребят у меня есть проблемка, на хабре наткнулся на 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);
}
}
Вот пример 
