Последнее время, в свете веб-два-нольных событий, AJAX стал очень популярной технологией. Никакой веб-два-нольный стартап сейчас не мыслит своё существование без этой технологии.
Представьте себе такую ситуацию, что нужно Вам запустить стартап, а AJAX’a Вы или Ваш программист не знаете. Что делать, если изучить его нужно максимально быстро? Именно поэтому здесь представлена эта заметка, после прочтения которой всё должно стать простым и понятным.
AJAX (Asynchronous Javascript and XML) - асинхронный JS и XML. То есть Ваши страницы смогут получать данные не прибегая к перезагрузке страницы. AJAX это не язык, как Вы могли сейчас подумать. Это просто технология использующие другие технлогии: динамическое обращение к серверу и DHTML для изменения содержимого элементов на странице.
Для работы с технологией AJAX я предлагаю использовать фреймвёрк Prototype.
Почему он?
Т.е. Вам не нужно заботиться о том, что какой-то браузер не поддерживает чего-то. За Вас заботится об этом команда фреймвёрка PrototypeJS. Ваша задача - только программировать и выдавать креативные фишки.
Первый шаг в сторону начала работы с AJAX - это конечно же скачать сам фреймвёрк и подключить его.
Качаем отсюда Prototype самой свежей версии.
В качестве подготовки нам нужно подключить JS скрипт PrototypeJS:
<script type="text/javascript" src="prototype-1.6.0.2.js"></script>
AJAX подключен. Создадим небольшой HTML файл для проверки работоспособности AJAX:
<html>
<head><title>AJAX Forever!</title></head>
<body>
<h1>Работа с AJAX</h1>
<div id="updateMe">Update me!!!</div>
<script type="text/javascript" src="prototype-1.6.0.2.js"></script>
<script type="text/javascript">
// ... здесь будем испытывать наши JS скрипты...
</script>
</body>
</html>
Всё готово к старту работы с технологией AJAX!
Для того, чтобы обратиться к DOM элементу веб-страницы мы используем что-то вроде:
document.getElementById("elementId");
document.all["elementId"];
В PrototypeJS у нас есть возможность сократить трудозатраты по написанию этого кода до следующего:
$('elementId')
То есть можно написать что-то вроде:
$('updateMe').style.color = 'green';
(*updateMe - это в случае с нашей вышеописанной страницей)
Помимо функции $() существует похожая функция $F(), которая позволяет получить значение любого элемента. Причём, если это поле формы - оно вернёт его значение, а в случае с элементом select - функция вернёт выбранный пункт.
Создаём простейший скрипт 1.php, который будет состоять всего лишь из одной строчки:
<?php echo 'hello AJAX!!!'; ?>
(особенно не распыляемся на РНР скриптинг, поскольку это не тема для данной статьи).
Теперь первый наш AJAX скрипт:
new Ajax.Request( '1.php',
{
method: 'get',
onSuccess: function( transport ){
var responseStr = transport.responseText || "пусто...";
alert( responseStr );
},
onFailure: function(){
alert( 'Какая-то ошибка...' )
}
});
Запускаем и… о чудо! Оно работает!
Alert нам выдаёт сообщение hello AJAX!!!, которое получено было из скрипта 1.php.
Теперь, рассмотрим ситуацию когда нам нужно изменить содержание нашего элемента updateMe. Не зря же мы его таким говорящим названием назвали! И это также осуществляется элементарно:
new Ajax.Updater( 'updateMe', '1.php', { method: 'get' } );
В данный момент здесь указан метод отправки данных: GET, если указано это явно не будет - по дефолту использоваться будет POST.
Если мы не хотим, чтобы предыдущий существующий текст затирался, используем Updater следующим образом:
new Ajax.Updater( 'updateMe', '1.php', {
method: 'get',
insertion: Insertion.Bottom
});
Можете посмотреть результат. По аналогии можно использовать: insertion: Insertion.Top.
HTTP методом GET делаем запрос с таким QUERY_STRING: text=wow!!&bbb=asdsf:
new Ajax.Updater( 'updateMe', '1.php', {
method: 'get',
parameters: { text: 'wow!!', bbb: 'asdsf' }
});
Развивая данную идею:
new Ajax.Updater( 'updateMe', '1.php', {
method: 'get',
parameters: { text: $F('someTextField'), bbb: 'asdsf' }
});
..и мы уже передаём в качестве значения параметра text - текущее значение поля someTextField.
Чтобы убедиться в работоспособности вышесказанного можно изменить наш 1.php на следующий:
echo 'hello AJAX!!! ' . $_SERVER['QUERY_STRING'];
Теперь мы будем видеть строчку запроса.
Не забывайте пожалуйста, что дефолтовая кодировка у PrototypeJS это UTF-8. Она определяется в опциях как: encoding: ‘UTF-8′. Вообще, лучше работать, как раз именно с UTF-8..
АЯКС позволяет делать уникальную вещь - страницы только из контента (и ссылок сапы 🙂 ), навигация (оставляем минимум для индексации, и то сайтмап есть, главное для передачи веса), декор и все прочее выводится динамически.
Не нужно только допускать распространенной ошибки при использования аякса (и фреймов, кстати) - когда грузят контент динамически, не изменяя URL. Надо наоборот - грузить контент статически по URL, чтобы и пользователь мог буку поставить, и поисковики видели контент, а вот всякий “мусор” типа навигации, форм, декора, счетчиков и прочего грузить динамически, активно используя кэширование и в браузере, и на стороне сервера. Единственная проблема (не считая трудоемкости, особенно реализацию нормального кэширования) - посетители без JS: оптимально, наверное, оставить минимум функциональности и навигации для них
Помните. Всегда нужно осторожно вводить новое в уже раскрученном проекте. Бывает, что изменение меню навигации приводит к ухудшению показателей ПР, а это имхо большая плата за новшества. Реально, уже на этапе формирования проекта определиться, какие технологии будут использоваться и предусмотреть компромисные решения, а это возможно, если двиг пишется с нуля. В противном случае, код разрастается и сайт напоминает монстра:))