Ajax: примеры новичкам
Последнее время, в свете веб-два-нольных событий, AJAX стал очень популярной технологией. Никакой веб-два-нольный стартап сейчас не мыслит своё существование без этой технологии.
Представьте себе такую ситуацию, что нужно Вам запустить стартап, а AJAX’a Вы или Ваш программист не знаете. Что делать, если изучить его нужно максимально быстро? Именно поэтому здесь представлена эта заметка, после прочтения которой всё должно стать простым и понятным.
Что такое AJAX?
AJAX (Asynchronous Javascript and XML) - асинхронный JS и XML. То есть Ваши страницы смогут получать данные не прибегая к перезагрузке страницы. AJAX это не язык, как Вы могли сейчас подумать. Это просто технология использующие другие технлогии: динамическое обращение к серверу и DHTML для изменения содержимого элементов на странице.
Что нужно для начала работы с AJAX?
Для работы с технологией AJAX я предлагаю использовать фреймвёрк Prototype.
Почему он?
- простота работы с AJAX
- отличная браузерная поддержка. Судите сами:
- Opera >= 9.25
- Mozilla Firefox >= 1.5
- Apple Safari >= 2.0
- Microsoft Internet Explorer >= 6.0
Т.е. Вам не нужно заботиться о том, что какой-то браузер не поддерживает чего-то. За Вас заботится об этом команда фреймвёрка PrototypeJS. Ваша задача - только программировать и выдавать креативные фишки.
Первый шаг в сторону начала работы с AJAX - это конечно же скачать сам фреймвёрк и подключить его.
Качаем отсюда Prototype самой свежей версии.
Подготавливаем страницу для работы с AJAX
В качестве подготовки нам нужно подключить 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!
Небольшое введение в терминологию AJAX…
Для того, чтобы обратиться к DOM элементу веб-страницы мы используем что-то вроде:
document.getElementById("elementId");
document.all["elementId"];
В PrototypeJS у нас есть возможность сократить трудозатраты по написанию этого кода до следующего:
$('elementId')
То есть можно написать что-то вроде:
$('updateMe').style.color = 'green';(*updateMe - это в случае с нашей вышеописанной страницей)
Помимо функции $() существует похожая функция $F(), которая позволяет получить значение любого элемента. Причём, если это поле формы - оно вернёт его значение, а в случае с элементом select - функция вернёт выбранный пункт.
ajax: осуществление запроса
Создаём простейший скрипт 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.
ajax: обновление содержимого элемента
Теперь, рассмотрим ситуацию когда нам нужно изменить содержание нашего элемента 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.
ajax: обновление содержимого с параметрами
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: оптимально, наверное, оставить минимум функциональности и навигации для них
Помните. Всегда нужно осторожно вводить новое в уже раскрученном проекте. Бывает, что изменение меню навигации приводит к ухудшению показателей ПР, а это имхо большая плата за новшества. Реально, уже на этапе формирования проекта определиться, какие технологии будут использоваться и предусмотреть компромисные решения, а это возможно, если двиг пишется с нуля. В противном случае, код разрастается и сайт напоминает монстра:))
