Новомодная технология AJAX + PHP = как? В лёгкую и с примерами!
3 июня, 2008
Последнее время, в свете веб-два-нольных событий, AJAX стал очень популярной технологией. Никакой веб-два-нольный стартап сейчас не мыслит своё существование без этой технологии.
Представьте себе такую ситуацию, что нужно Вам запустить стартап, а AJAX’a Вы или Ваш программист не знаете. Что делать, если изучить его нужно максимально быстро? Именно поэтому я и написал эту заметку, после прочтения которой всё должно стать простым и понятным. Если Ваш разработчик не знает AJAX’а - смело шлите его на эту заметку, поможем 
Так что же это такое 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..
Побольше Вам сайтов посещаемых и полезных!
Отступая от темы сообщу хорошую новость для блогеров. Дмитрий S.M.A.R.T. устроил акцию по привлечению посетителей в Ваши блоги. Подробности читать .
18 Responses to “Новомодная технология AJAX + PHP = как? В лёгкую и с примерами!”
Шлыков Сергей [03.06.08 14:47] | Reply
Просто, понятно и доступно, спасибо.
Еще неплохо бы примеры, когда AJAX является не модной фишкой, а действительно улучшает юзабилити. А если с готовыми примерами или ссылками на реализацию - вообще супер. Ведь большинство таких приложений (корзины товаров, букмарки, голосовалки и т.п.) наверняка описаны - зачем изобретать велосипед.
SEOVirus [04.06.08 02:20] | Reply
Хорошо. Подумаю над этим.
Ладушки [05.06.08 17:30] | Reply
В большинстве эти технологии - враг СЕО. А для пользователя хорошо… и тут следует для себя определиться - чему вы отдаете предпочтение.
SEOVirus [05.06.08 20:00] | Reply
Можно выбрать “золотую середину”.
Имхо, изначально сайты нужно разрабатывать без аякса, а вот далее подцеплять уже его. Пользователи у которых включён JS - у них будет юзабельность аяксовая, с другой стороны для поисковиков есть чё поиндексить
Antoni [09.06.08 11:57] | Reply
Ввввау, аякс. По моему уже каждый веб девелопер знает что это, с чем едят, на чем реализовано и то что у jQuery лучший API при работе с аяксом
SEOVirus [09.06.08 12:55] | Reply
Знает может и каждый, но не каждый использует эту технологию в своих разработках.
jQuery тоже знатная вещь. Отличный фреймвёрк.
spomoni [10.06.08 04:12] | Reply
Хороший обзор, но к сожалению, я не программист
variable [22.06.08 03:44] | Reply
тут нашел как с cp1251 работать
VolCh [08.07.08 03:58] | Reply
Имхо, если уж разрабатывать c AJAХ, то уж сразу на него рассчитывать, а не подцеплять куда нужно и не нужно. АЯКС позволяет делать уникальную вещь - страницы только из контента (и ссылок сапы
), навигация (оставляем минимум для индексации, и то сайтмап есть, главное для передачи веса), декор и все прочее выводится динамически.
Не нужно только допускать распространенной ошибки при использования аякса (и фреймов, кстати) - когда грузят контент динамически, не изменяя URL. Надо наоборот - грузить контент статически по URL, чтобы и пользователь мог буку поставить, и поисковики видели контент, а вот всякий “мусор” типа навигации, форм, декора, счетчиков и прочего грузить динамически, активно используя кэширование и в браузере, и на стороне сервера.
Единственная проблема (не считая трудоемкости, особенно реализацию нормального кэширования) - посетители без JS: оптимально, наверное, оставить минимум функциональности и навигации для них
Техник-строитель [21.11.08 15:18] | Reply
Всегда нужно осторожно вводить новое в уже раскрученном проекте. Бывает, что изменение меню навигации приводит к ухудшению показателей ПР, а это имхо большая плата за новшества. Реально, уже на этапе формирования проекта определиться, какие технологии будут использоваться и предусмотреть компромисные решения, а это возможно, если двиг пишется с нуля. В противном случае, код разрастается и сайт напоминает монстра:))
none [26.11.08 11:52] | Reply
Я вот всё-таки остановил свой выбор на jQuery+php. Были некоторые заморочки с передачей русского текста туда и обратно, но после их решения - просто красота, всё легко и удобно.
А за статью спасибо, прототайп тоже достаточно известный и мощный фреймворк…
максим [04.01.09 02:53] | Reply
если нужно просто обновлять контент без перегрузки страницы, можно не заморачиватся с полноценными фреймворками, а найти мини-примочки.
Вот такая например штука есть - 5кб всего.
Simple AJAX Code-Kit (SACK)
SACK is exactly what it says it is: A simple set of code to allow you to put AJAX into your webpages with none of the fuss or overhead of other packages.
Tolik [21.04.10 16:21] | Reply
Всякий раз когда начинал пытаться изучать AJAX - бросало в дрожь от километровых статей и каждый раз опускались руки. А эта статейка для новичков - СУПЕР!!!!!
java_is_forever [20.05.10 14:22] | Reply
По мне, так самое оправданное применение Ajax - это админки, которые требуют нетривиальную функциональность. Зачем индексировать админки (скорее наоборот)?!
MoJo [29.09.10 18:54] | Reply
У меня на сайте тоже технология ajax стоит. Отличная вещь.
Вячеслав [02.10.10 14:04] | Reply
Воспользовался этим готовым решением, но столкнулся с проблемой - данные приходят на сервер нормально, но запрос к бд mysql, используя эти данные, не проходит. Кто-нибудь сталкивался?
SEOVirus [02.10.10 15:07] | Reply
Ну если данные приходят успешно на сервер, то там видимо дальше что-то на стадии их обработки.. Возможно при подключении к бд.
Потестируйте как-нибудь отдельно этот момент работы скрипта. Введите экспериментальные данные вручную в скрипте и проверьте - точно ли он коннектится корректно к бд.. а то может пароли с логинами прописали не те, а думать будете, что в этом AJAX виноват..
Вячеслав [07.10.10 20:21] | Reply
Все дело было в кодировке. Данные из бд переконвертировал в utf-8 командой mysql_query(”SET NAMES ‘utf8′”); и заработало. Теперь появилась необходимость в том, чтобы ajax работал не асинхронно, а наоборот, чтобы последующий код дождался завершения ajax и продолжил работу. Не знаешь, как сделать?