Ajax навигация для сайта

Доброго времени суток, дорогие читатели! В данном уроке будет рассмотрено разработка ajax навигации для сайта, а так же будет затронута тема ЧПУ аббревиатура от человеко понятный урл.

Для начала я расскажу Вам, какая есть причина для использования ajax технологии. Как многим возможно известно, ajax – это технология асинхронной связи с сервером, т. е. отправка запроса и получение ответа от сервера без полной перезагрузки страницы. Таким образом, используя ajax запросы можно избавиться от необходимости, при каждом переходе на какую либо страницу сайта, загружать js, css и другие файлы, а также определенную часть страницы, что существенно увеличит скорость получения данных браузером и уменьшит нагрузку на сервер.

Теперь, когда мы разобрались с необходимостью такой навигации, можем приступить непосредственно к самой реализации. Меню навигации должно состоять из ссылок, но его html структура не имеет никакого значения, поэтому не будем на этом заострять внимание. Но прежде чем перейти к скриптам рассмотрим, как для этого урока были реализованы ЧПУ, так как от этого зависит форма ссылок, которые будут использоваться для «теневых» запросов к серверу.

Итак, создадим конфигурационный файл сервера с расширением htaccess в корне сайта и запишем в него следующие строки:

#при условии доступа к модулю Rewrite
<IfModule mod_rewrite.c>
#включаем модуль Rewrite для текущего сайта
    RewriteEngine On
#за исключением папок
    RewriteCond %{REQUEST_FILENAME} !-d
#и файлов
    RewriteCond %{REQUEST_FILENAME} !-f
#а параметры роутинга записываем в переменную _url
    RewriteRule ^(.*)$ index.php?_url=/$1 [QSA,L]
</IfModule>

Теперь все параметры запроса могут передаваться со ссылкой в виде строки завершающей url и будут записаны в переменную _url. Можем приступить к рассмотрению скриптов, а начнем с jQuery скрипта, который посылает ajax запросы к серверу:

// при нажатии на ссылку (пункт меню)

$("nav a").on("click", function(event){

         //отключаем прямой переход по ссылке

event.preventDefault();

/* удаляем класс

"active"(для выделения текущей страницы)

У всех ссылок из навигации

и добавляем только что нажатой*/

         $("nav a").removeClass("active");

         $(this).addClass("active");

         //записываем в переменную адрес из ссылки

         var url = $(this).attr("href");

         /* отправляем запрос серверу, результат которого

В последующем записываем в блок с классом "content"*/

         $.ajax({url:url,

success: function(data){$(".content").html(data);}});

});

Теперь рассмотрим скрипт, который принимает запросы. Скрипт находиться в индекс-файле, через который происходит роутинг. Вся работа с сервером осуществляется через файл index.php, так что можете смело блокировать доступ из вне ко всем папкам на сервере (как это сделать смотрите в уроке запрет просмотра директории HTACCESS).

Следующая функция предназначена для проверки, ajax запрос поступил на сервер или нет:

function isAjax(){

         if(isset($_SERVER['HTTP_X_REQUESTED_WITH'])

         && !empty($_SERVER['HTTP_X_REQUESTED_WITH'])

         && strtolower(

$_SERVER['HTTP_X_REQUESTED_WITH'])

== 'xmlhttprequest')

                   return true;

         else

                   return false;

}

Таким образом, используя данную функцию, мы можем помимо контента включить в результат возвращаемый браузеру еще и остальные части страницы вместе с js файлами и файлами стилей, что исключит ошибки в том случае, если в браузере пользователя отключена обработка JavaScript. Код, обрабатывающий запрос представлен ниже.

//записываем параметры запроса в массив

$request = explode("/", $_GET["_url"]);

//если нет никаких параметром направляемся на главную

if(isset($request[1])) $page = $request[1]; else $page="home";

//записываем имя файла в котором контент

$fname = dirname(__FILE__)."/".$page.".html";

//если запрос не теневой подключаем хидер

if(!isAjax()) include_once("./header.php");

 

//если файл существует - подключаем

if(is_file($fname))

         include_once($fname);

else

//нет? выводим 404(нет фала)

include_once(dirname(__FILE__)."/404.html");

//если запрос не теневой подключаем хидер

if(!isAjax()) include_once("./footer.php");

Как можно понять из кода приведенного выше, контент каждой страницы храниться в отдельных файлах из корневого каталога, а ссылки в навигации содержат имена этих файлов без учета расширения. Так что все, что Вам остается – создать файл, занести в него контент, и добавить в меню еще одну ссылку с указанием имени файла.

На этом наш урок окончен. Благодарю за внимание!