Что такое аякс -> SEO программы для веб-мастера -> Javascript и Ajax

Ajax: примеры новичкам

Последнее время, в свете веб-два-нольных событий, AJAX стал очень популярной технологией. Никакой веб-два-нольный стартап сейчас не мыслит своё существование без этой технологии.

Представьте себе такую ситуацию, что нужно Вам запустить стартап, а AJAX’a Вы или Ваш программист не знаете. Что делать, если изучить его нужно максимально быстро? Именно поэтому здесь представлена эта заметка, после прочтения которой всё должно стать простым и понятным.

Что такое AJAX?

AJAX (Asynchronous Javascript and XML) - асинхронный JS и XML. То есть Ваши страницы смогут получать данные не прибегая к перезагрузке страницы. AJAX это не язык, как Вы могли сейчас подумать. Это просто технология использующие другие технлогии: динамическое обращение к серверу и DHTML для изменения содержимого элементов на странице.

Что нужно для начала работы с AJAX?

Для работы с технологией AJAX я предлагаю использовать фреймвёрк Prototype.

Почему он?

Т.е. Вам не нужно заботиться о том, что какой-то браузер не поддерживает чего-то. За Вас заботится об этом команда фреймвёрка 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: оптимально, наверное, оставить минимум функциональности и навигации для них

Помните. Всегда нужно осторожно вводить новое в уже раскрученном проекте. Бывает, что изменение меню навигации приводит к ухудшению показателей ПР, а это имхо большая плата за новшества. Реально, уже на этапе формирования проекта определиться, какие технологии будут использоваться и предусмотреть компромисные решения, а это возможно, если двиг пишется с нуля. В противном случае, код разрастается и сайт напоминает монстра:))


Меню сайта

Ajax: примеры новичкам
Ajax: примеры новичкам