Блог

2013-07-07 - AJAX и jQuery - это просто, удобно и полезно!

Добавил RaSla, "2013-07-07 13:17:56"

Наконец-то смог "победить" AJAX и jQuery!

Теперь приручаю его под свои нужды - делаю каркас движка для Веб-Сайтов, который подгружает элементы странички (скрытые от анонимного доступа) и данные, вместо полного обновления страницы.

(Кстати, опять появились навящевые мысли по "захвату сегмента рынка, с помощью своих Веб-БД"  )

Суть метода - обновление страницы осуществляется ЧАСТИЧНО, вместо полной перезагрузки:

1) Дизайн любого сайта разбит на несколько элементов, включая (как минимум): "шапку" (header), "навигационное меню" (nav_menu) и "подвал" (footer). Очень часто в макете страницы используется "включение" этих элементов из отдельных файлов (которые, почти всегда, одинаковы для всех страниц Сайта):

<?php include "page/header.php";
include "page/nav_menu.php";
...
print "<div id=\"page_content\">"
include "page/$PAGE_NAME.php"; // например, "page/main.php"
print "</div>";
...
include "page/footer.php"; ?>

Используя AJAX мы можем заменить загрузку ВСЕЙ страницы, на эквивалентное обновление лишь содержательной части в HTML-коде:

<a onclick="jQuery('#page_content').load( 'page/main.php' );">ГЛАВНАЯ</a>

2) Интерактивность приложения значительно выше - можно отправлять короткие команды (с параметрами) на Сервер и отображать на Клиенте результат, полученный в ответ!

Преимущества такого подхода от "частичного обновления" страницы при всей очевидности даже более значительны: эквивалентная AJAX-загрузка работает быстрее даже не в 4-5 раз (за счет уменьшения передаваемого трафика), а в 10-60 раз (!), т.к. ещё уменьшается объём исполняемого кода, дисковых обращений как на стороне Сервера, так и на стороне Клиента и КОЛИЧЕСТВО обращений к Серверу (самое "дорогое" обстоятельство, в плане итоговой производительности Сайта), особенно с медленным интернетом (GPRS, 3G, ADSL, dial-up modem)!

Недостатки правда тоже имеются:

1) При AJAX-загрузке HTML-кода функцией jQuery().load(); - НЕ ИНИЦИАЛИЗИРУЕТСЯ JavaScript-код, который идёт в тегах SCRIPT!

Проблема решается написанием своей очень простой функции (которая подгружает Скрипты отдельным запросом сразу после загрузки HTML-кода), либо чуть более сложной функции (которая получает за один запрос и HTML-код и JS-скрипты в соответствующих переменных и сама инициализирует их).

2) При частичном обновлении страницы (например, '#page_content') НЕ МЕНЯЕТСЯ ИСТОРИЯ ПОСЕЩЕНИЙ и при нажатии кнопки браузера "Назад", мы вместо ожидаемого возвращения на предыдущую страничку, ВДРУГ, улетаем на прошлый Сайт!

Этот вопрос тоже решаемый, но мне пока не известно как... Предполагаю, что надо перехватывать некое событие в JS-коде и обрабатывать его...


Назад